Mixing
Bootstrap row with columns of different height
I currently have something like:
<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>
Now assuming that, content was boxes of different height, with all the same width - how could I keep the same "grid based layout" and yet have all the boxes line up under each other, instead of in perfect lines.
Currently TWBS will place the next line of col-md-4 under the longest element in the previous third row., thus each row of items is perfectly aligned an clean - while this is awesome I want each item to fall directly under the last element ("Masonry" layout)
html css twitter-bootstrap responsive-design bootstrap-4
edited Apr 3 '18 at 11:52
Zim
187k48393376
asked Mar 10 '14 at 20:43
user3379926user3379926
1,36441538
add a comment |
I currently have something like:
<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>
Now assuming that, content was boxes of different height, with all the same width - how could I keep the same "grid based layout" and yet have all the boxes line up under each other, instead of in perfect lines.
Currently TWBS will place the next line of col-md-4 under the longest element in the previous third row., thus each row of items is perfectly aligned an clean - while this is awesome I want each item to fall directly under the last element ("Masonry" layout)
html css twitter-bootstrap responsive-design bootstrap-4
edited Apr 3 '18 at 11:52
Zim
187k48393376
asked Mar 10 '14 at 20:43
user3379926user3379926
1,36441538
add a comment |
I currently have something like:
<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>
Now assuming that, content was boxes of different height, with all the same width - how could I keep the same "grid based layout" and yet have all the boxes line up under each other, instead of in perfect lines.
Currently TWBS will place the next line of col-md-4 under the longest element in the previous third row., thus each row of items is perfectly aligned an clean - while this is awesome I want each item to fall directly under the last element ("Masonry" layout)
html css twitter-bootstrap responsive-design bootstrap-4
edited Apr 3 '18 at 11:52
Zim
187k48393376
asked Mar 10 '14 at 20:43
user3379926user3379926
1,36441538
I currently have something like:
<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>
Now assuming that, content was boxes of different height, with all the same width - how could I keep the same "grid based layout" and yet have all the boxes line up under each other, instead of in perfect lines.
Currently TWBS will place the next line of col-md-4 under the longest element in the previous third row., thus each row of items is perfectly aligned an clean - while this is awesome I want each item to fall directly under the last element ("Masonry" layout)
html css twitter-bootstrap responsive-design bootstrap-4
html css twitter-bootstrap responsive-design bootstrap-4
edited Apr 3 '18 at 11:52
Zim
187k48393376
asked Mar 10 '14 at 20:43
user3379926user3379926
1,36441538
edited Apr 3 '18 at 11:52
Zim
187k48393376
asked Mar 10 '14 at 20:43
user3379926user3379926
1,36441538
edited Apr 3 '18 at 11:52
Zim
187k48393376
edited Apr 3 '18 at 11:52
Zim
187k48393376
edited Apr 3 '18 at 11:52
Zim
187k48393376
187k48393376
asked Mar 10 '14 at 20:43
user3379926user3379926
1,36441538
asked Mar 10 '14 at 20:43
user3379926user3379926
1,36441538
asked Mar 10 '14 at 20:43
user3379926user3379926
1,36441538
1,36441538
add a comment |
add a comment |
4 Answers
4
active
oldest
votes
This is a popular Bootstrap question, so I've updated and expanded the answer for Bootstrap 3 and Bootstrap 4...
The Bootstrap 3 "height problem" occurs because the columns use float:left. When a column is “floated” it’s taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of its containing box. So, when you have uneven column heights, the correct behavior is to stack them to the closest side.
Note: The options below are applicable for column wrapping scenarios where there are more than 12 col units in a single .row. For readers that don't understand why there would ever be more than 12 cols in a row, or think the solution is to "use separate rows" should read this first
There are a few ways to fix this.. (updated for 2018)
1 - The 'clearfix' approach (recommended by Bootstrap) like this (requires iteration every X columns). This will force a wrap every X number of columns...
<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="clearfix"></div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="clearfix"></div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>
Clearfix Demo (single tier)
Clearfix Demo (responsive tiers) - eg. col-sm-6 col-md-4 col-lg-3
There is also a CSS-only variation of the 'clearfix'
CSS-only clearfix with tables
2 - Make the columns the same height (using flexbox):
Since the issue is caused by the difference in height, you can make columns equal height across each row. Flexbox is the best way to do this, and is natively supported in Bootstrap 4...
.row.display-flex {
display: flex;
flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
display: flex;
flex-direction: column;
}
Flexbox equal height Demo
3 - Un-float the columns an use inline-block instead..
Again, the height problem only occurs because the columns are floated. Another option is to set the columns to display:inline-block and float:none. This also provides more flexibility for vertical-alignment. However, with this solution there must be no HTML whitespace between columns, otherwise the inline-block elements have additional space and will wrap prematurely.
Demo of inline block fix
4 - CSS3 columns approach (Masonry/Pinterest like solution)..
This is not native to Bootstrap 3, but another approach using CSS multi-columns. One downside to this approach is the column order is top-to-bottom instead of left-to-right. Bootstrap 4 includes this type of
solution:
Bootstrap 4 Masonry cards Demo.
Bootstrap 3 multi-columns Demo
5 - Masonry JavaScript/jQuery approach
Finally, you may want to use a plugin such as Isotope/Masonry:
Bootstrap Masonry Demo
Masonry Demo 2
More on Bootstrap Variable Height Columns
Update 2018
All columns are equal height in Bootstrap 4 because it uses flexbox by default, so the "height issue" is not a problem. Additionally, Bootstrap 4 includes this type of multi-columns solution:
Bootstrap 4 Masonry cards Demo.
answered Mar 10 '14 at 21:01
ZimZim
187k48393376
Here is a good guideline on vertical alignment in bootstrap v4-alpha.getbootstrap.com/layout/grid. Particularly vertical alignment and class "row align-items-start"
– Josh
Jun 22 '17 at 8:52
2
WooW! you earn my up vote for this bootply.com/120682. With Masonry plugin, it looks good on page load not good when you drag to adjust the screen width
– Paullo
Dec 21 '17 at 7:54
1
Thx a lot for this excellent explanation!
– danielgc
Mar 13 '18 at 16:24
1
The best answer for this problem
– Sushin Pv
Mar 19 '18 at 8:45
1
this solves my problem :)
– Joji
Aug 11 '18 at 2:17
|
show 1 more comment
For some reason this worked for me without the .display-flex class
.row {
display: flex;
flex-wrap: wrap;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}
answered Nov 8 '17 at 18:41
Steve WhitbySteve Whitby
14614
This did work for me. Only i put second css to .col property
– RohitAneja
Nov 15 '18 at 6:01
add a comment |
The col's sum inside the twitter bootsrap should be everytime 12. This will keep a clean grid design:
<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>
<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>
<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>
answered Mar 10 '14 at 20:51
Christian MichaelChristian Michael
547517
1
This is not what I want, what I am asking for is how to make the boxes appaear DIRECTLY under the last box instead of the perfectly clean grid, some boxes may be bigger, while some are smaller and if its "clean" then you have massive white spaces in some areas.
– user3379926
Mar 10 '14 at 20:57
3
"The col's sum inside the twitter bootsrap should be everytime 12" is not true. Read about column wrapping
– Zim
Mar 13 '17 at 13:43
add a comment |
I created another extension (which also is reactive) to the bootstrap row. You can try something like this:
.row.flexRow { display: flex; flex-wrap: wrap;}
answered Nov 20 '18 at 15:30
Akash YellappaAkash Yellappa
34733
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f22310912%2fbootstrap-row-with-columns-of-different-height%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
This is a popular Bootstrap question, so I've updated and expanded the answer for Bootstrap 3 and Bootstrap 4...
The Bootstrap 3 "height problem" occurs because the columns use float:left. When a column is “floated” it’s taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of its containing box. So, when you have uneven column heights, the correct behavior is to stack them to the closest side.
Note: The options below are applicable for column wrapping scenarios where there are more than 12 col units in a single .row. For readers that don't understand why there would ever be more than 12 cols in a row, or think the solution is to "use separate rows" should read this first
There are a few ways to fix this.. (updated for 2018)
1 - The 'clearfix' approach (recommended by Bootstrap) like this (requires iteration every X columns). This will force a wrap every X number of columns...
<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="clearfix"></div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="clearfix"></div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>
Clearfix Demo (single tier)
Clearfix Demo (responsive tiers) - eg. col-sm-6 col-md-4 col-lg-3
There is also a CSS-only variation of the 'clearfix'
CSS-only clearfix with tables
2 - Make the columns the same height (using flexbox):
Since the issue is caused by the difference in height, you can make columns equal height across each row. Flexbox is the best way to do this, and is natively supported in Bootstrap 4...
.row.display-flex {
display: flex;
flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
display: flex;
flex-direction: column;
}
Flexbox equal height Demo
3 - Un-float the columns an use inline-block instead..
Again, the height problem only occurs because the columns are floated. Another option is to set the columns to display:inline-block and float:none. This also provides more flexibility for vertical-alignment. However, with this solution there must be no HTML whitespace between columns, otherwise the inline-block elements have additional space and will wrap prematurely.
Demo of inline block fix
4 - CSS3 columns approach (Masonry/Pinterest like solution)..
This is not native to Bootstrap 3, but another approach using CSS multi-columns. One downside to this approach is the column order is top-to-bottom instead of left-to-right. Bootstrap 4 includes this type of
solution:
Bootstrap 4 Masonry cards Demo.
Bootstrap 3 multi-columns Demo
5 - Masonry JavaScript/jQuery approach
Finally, you may want to use a plugin such as Isotope/Masonry:
Bootstrap Masonry Demo
Masonry Demo 2
More on Bootstrap Variable Height Columns
Update 2018
All columns are equal height in Bootstrap 4 because it uses flexbox by default, so the "height issue" is not a problem. Additionally, Bootstrap 4 includes this type of multi-columns solution:
Bootstrap 4 Masonry cards Demo.
answered Mar 10 '14 at 21:01
ZimZim
187k48393376
Here is a good guideline on vertical alignment in bootstrap v4-alpha.getbootstrap.com/layout/grid. Particularly vertical alignment and class "row align-items-start"
– Josh
Jun 22 '17 at 8:52
2
WooW! you earn my up vote for this bootply.com/120682. With Masonry plugin, it looks good on page load not good when you drag to adjust the screen width
– Paullo
Dec 21 '17 at 7:54
1
Thx a lot for this excellent explanation!
– danielgc
Mar 13 '18 at 16:24
1
The best answer for this problem
– Sushin Pv
Mar 19 '18 at 8:45
1
this solves my problem :)
– Joji
Aug 11 '18 at 2:17
|
show 1 more comment
This is a popular Bootstrap question, so I've updated and expanded the answer for Bootstrap 3 and Bootstrap 4...
The Bootstrap 3 "height problem" occurs because the columns use float:left. When a column is “floated” it’s taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of its containing box. So, when you have uneven column heights, the correct behavior is to stack them to the closest side.
Note: The options below are applicable for column wrapping scenarios where there are more than 12 col units in a single .row. For readers that don't understand why there would ever be more than 12 cols in a row, or think the solution is to "use separate rows" should read this first
There are a few ways to fix this.. (updated for 2018)
1 - The 'clearfix' approach (recommended by Bootstrap) like this (requires iteration every X columns). This will force a wrap every X number of columns...
<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="clearfix"></div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="clearfix"></div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>
Clearfix Demo (single tier)
Clearfix Demo (responsive tiers) - eg. col-sm-6 col-md-4 col-lg-3
There is also a CSS-only variation of the 'clearfix'
CSS-only clearfix with tables
2 - Make the columns the same height (using flexbox):
Since the issue is caused by the difference in height, you can make columns equal height across each row. Flexbox is the best way to do this, and is natively supported in Bootstrap 4...
.row.display-flex {
display: flex;
flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
display: flex;
flex-direction: column;
}
Flexbox equal height Demo
3 - Un-float the columns an use inline-block instead..
Again, the height problem only occurs because the columns are floated. Another option is to set the columns to display:inline-block and float:none. This also provides more flexibility for vertical-alignment. However, with this solution there must be no HTML whitespace between columns, otherwise the inline-block elements have additional space and will wrap prematurely.
Demo of inline block fix
4 - CSS3 columns approach (Masonry/Pinterest like solution)..
This is not native to Bootstrap 3, but another approach using CSS multi-columns. One downside to this approach is the column order is top-to-bottom instead of left-to-right. Bootstrap 4 includes this type of
solution:
Bootstrap 4 Masonry cards Demo.
Bootstrap 3 multi-columns Demo
5 - Masonry JavaScript/jQuery approach
Finally, you may want to use a plugin such as Isotope/Masonry:
Bootstrap Masonry Demo
Masonry Demo 2
More on Bootstrap Variable Height Columns
Update 2018
All columns are equal height in Bootstrap 4 because it uses flexbox by default, so the "height issue" is not a problem. Additionally, Bootstrap 4 includes this type of multi-columns solution:
Bootstrap 4 Masonry cards Demo.
answered Mar 10 '14 at 21:01
ZimZim
187k48393376
Here is a good guideline on vertical alignment in bootstrap v4-alpha.getbootstrap.com/layout/grid. Particularly vertical alignment and class "row align-items-start"
– Josh
Jun 22 '17 at 8:52
2
WooW! you earn my up vote for this bootply.com/120682. With Masonry plugin, it looks good on page load not good when you drag to adjust the screen width
– Paullo
Dec 21 '17 at 7:54
1
Thx a lot for this excellent explanation!
– danielgc
Mar 13 '18 at 16:24
1
The best answer for this problem
– Sushin Pv
Mar 19 '18 at 8:45
1
this solves my problem :)
– Joji
Aug 11 '18 at 2:17
|
show 1 more comment
This is a popular Bootstrap question, so I've updated and expanded the answer for Bootstrap 3 and Bootstrap 4...
The Bootstrap 3 "height problem" occurs because the columns use float:left. When a column is “floated” it’s taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of its containing box. So, when you have uneven column heights, the correct behavior is to stack them to the closest side.
Note: The options below are applicable for column wrapping scenarios where there are more than 12 col units in a single .row. For readers that don't understand why there would ever be more than 12 cols in a row, or think the solution is to "use separate rows" should read this first
There are a few ways to fix this.. (updated for 2018)
1 - The 'clearfix' approach (recommended by Bootstrap) like this (requires iteration every X columns). This will force a wrap every X number of columns...
<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="clearfix"></div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="clearfix"></div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>
Clearfix Demo (single tier)
Clearfix Demo (responsive tiers) - eg. col-sm-6 col-md-4 col-lg-3
There is also a CSS-only variation of the 'clearfix'
CSS-only clearfix with tables
2 - Make the columns the same height (using flexbox):
Since the issue is caused by the difference in height, you can make columns equal height across each row. Flexbox is the best way to do this, and is natively supported in Bootstrap 4...
.row.display-flex {
display: flex;
flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
display: flex;
flex-direction: column;
}
Flexbox equal height Demo
3 - Un-float the columns an use inline-block instead..
Again, the height problem only occurs because the columns are floated. Another option is to set the columns to display:inline-block and float:none. This also provides more flexibility for vertical-alignment. However, with this solution there must be no HTML whitespace between columns, otherwise the inline-block elements have additional space and will wrap prematurely.
Demo of inline block fix
4 - CSS3 columns approach (Masonry/Pinterest like solution)..
This is not native to Bootstrap 3, but another approach using CSS multi-columns. One downside to this approach is the column order is top-to-bottom instead of left-to-right. Bootstrap 4 includes this type of
solution:
Bootstrap 4 Masonry cards Demo.
Bootstrap 3 multi-columns Demo
5 - Masonry JavaScript/jQuery approach
Finally, you may want to use a plugin such as Isotope/Masonry:
Bootstrap Masonry Demo
Masonry Demo 2
More on Bootstrap Variable Height Columns
Update 2018
All columns are equal height in Bootstrap 4 because it uses flexbox by default, so the "height issue" is not a problem. Additionally, Bootstrap 4 includes this type of multi-columns solution:
Bootstrap 4 Masonry cards Demo.
answered Mar 10 '14 at 21:01
ZimZim
187k48393376
This is a popular Bootstrap question, so I've updated and expanded the answer for Bootstrap 3 and Bootstrap 4...
The Bootstrap 3 "height problem" occurs because the columns use float:left. When a column is “floated” it’s taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of its containing box. So, when you have uneven column heights, the correct behavior is to stack them to the closest side.
Note: The options below are applicable for column wrapping scenarios where there are more than 12 col units in a single .row. For readers that don't understand why there would ever be more than 12 cols in a row, or think the solution is to "use separate rows" should read this first
There are a few ways to fix this.. (updated for 2018)
1 - The 'clearfix' approach (recommended by Bootstrap) like this (requires iteration every X columns). This will force a wrap every X number of columns...
<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="clearfix"></div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="clearfix"></div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>
Clearfix Demo (single tier)
Clearfix Demo (responsive tiers) - eg. col-sm-6 col-md-4 col-lg-3
There is also a CSS-only variation of the 'clearfix'
CSS-only clearfix with tables
2 - Make the columns the same height (using flexbox):
Since the issue is caused by the difference in height, you can make columns equal height across each row. Flexbox is the best way to do this, and is natively supported in Bootstrap 4...
.row.display-flex {
display: flex;
flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
display: flex;
flex-direction: column;
}
Flexbox equal height Demo
3 - Un-float the columns an use inline-block instead..
Again, the height problem only occurs because the columns are floated. Another option is to set the columns to display:inline-block and float:none. This also provides more flexibility for vertical-alignment. However, with this solution there must be no HTML whitespace between columns, otherwise the inline-block elements have additional space and will wrap prematurely.
Demo of inline block fix
4 - CSS3 columns approach (Masonry/Pinterest like solution)..
This is not native to Bootstrap 3, but another approach using CSS multi-columns. One downside to this approach is the column order is top-to-bottom instead of left-to-right. Bootstrap 4 includes this type of
solution:
Bootstrap 4 Masonry cards Demo.
Bootstrap 3 multi-columns Demo
5 - Masonry JavaScript/jQuery approach
Finally, you may want to use a plugin such as Isotope/Masonry:
Bootstrap Masonry Demo
Masonry Demo 2
More on Bootstrap Variable Height Columns
Update 2018
All columns are equal height in Bootstrap 4 because it uses flexbox by default, so the "height issue" is not a problem. Additionally, Bootstrap 4 includes this type of multi-columns solution:
Bootstrap 4 Masonry cards Demo.
answered Mar 10 '14 at 21:01
ZimZim
187k48393376
edited Apr 3 '18 at 12:04
answered Mar 10 '14 at 21:01
ZimZim
187k48393376
answered Mar 10 '14 at 21:01
ZimZim
187k48393376
answered Mar 10 '14 at 21:01
ZimZim
187k48393376
187k48393376
Here is a good guideline on vertical alignment in bootstrap v4-alpha.getbootstrap.com/layout/grid. Particularly vertical alignment and class "row align-items-start"
– Josh
Jun 22 '17 at 8:52
2
WooW! you earn my up vote for this bootply.com/120682. With Masonry plugin, it looks good on page load not good when you drag to adjust the screen width
– Paullo
Dec 21 '17 at 7:54
1
Thx a lot for this excellent explanation!
– danielgc
Mar 13 '18 at 16:24
1
The best answer for this problem
– Sushin Pv
Mar 19 '18 at 8:45
1
this solves my problem :)
– Joji
Aug 11 '18 at 2:17
|
show 1 more comment
Here is a good guideline on vertical alignment in bootstrap v4-alpha.getbootstrap.com/layout/grid. Particularly vertical alignment and class "row align-items-start"
– Josh
Jun 22 '17 at 8:52
2
WooW! you earn my up vote for this bootply.com/120682. With Masonry plugin, it looks good on page load not good when you drag to adjust the screen width
– Paullo
Dec 21 '17 at 7:54
1
Thx a lot for this excellent explanation!
– danielgc
Mar 13 '18 at 16:24
1
The best answer for this problem
– Sushin Pv
Mar 19 '18 at 8:45
1
this solves my problem :)
– Joji
Aug 11 '18 at 2:17
Here is a good guideline on vertical alignment in bootstrap v4-alpha.getbootstrap.com/layout/grid. Particularly vertical alignment and class "row align-items-start"
– Josh
Jun 22 '17 at 8:52
Here is a good guideline on vertical alignment in bootstrap v4-alpha.getbootstrap.com/layout/grid. Particularly vertical alignment and class "row align-items-start"
– Josh
Jun 22 '17 at 8:52
2
2
WooW! you earn my up vote for this bootply.com/120682. With Masonry plugin, it looks good on page load not good when you drag to adjust the screen width
– Paullo
Dec 21 '17 at 7:54
WooW! you earn my up vote for this bootply.com/120682. With Masonry plugin, it looks good on page load not good when you drag to adjust the screen width
– Paullo
Dec 21 '17 at 7:54
1
1
Thx a lot for this excellent explanation!
– danielgc
Mar 13 '18 at 16:24
Thx a lot for this excellent explanation!
– danielgc
Mar 13 '18 at 16:24
1
1
The best answer for this problem
– Sushin Pv
Mar 19 '18 at 8:45
The best answer for this problem
– Sushin Pv
Mar 19 '18 at 8:45
1
1
this solves my problem :)
– Joji
Aug 11 '18 at 2:17
this solves my problem :)
– Joji
Aug 11 '18 at 2:17
|
show 1 more comment
For some reason this worked for me without the .display-flex class
.row {
display: flex;
flex-wrap: wrap;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}
answered Nov 8 '17 at 18:41
Steve WhitbySteve Whitby
14614
This did work for me. Only i put second css to .col property
– RohitAneja
Nov 15 '18 at 6:01
add a comment |
For some reason this worked for me without the .display-flex class
.row {
display: flex;
flex-wrap: wrap;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}
answered Nov 8 '17 at 18:41
Steve WhitbySteve Whitby
14614
This did work for me. Only i put second css to .col property
– RohitAneja
Nov 15 '18 at 6:01
add a comment |
For some reason this worked for me without the .display-flex class
.row {
display: flex;
flex-wrap: wrap;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}
answered Nov 8 '17 at 18:41
Steve WhitbySteve Whitby
14614
For some reason this worked for me without the .display-flex class
.row {
display: flex;
flex-wrap: wrap;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}
answered Nov 8 '17 at 18:41
Steve WhitbySteve Whitby
14614
answered Nov 8 '17 at 18:41
Steve WhitbySteve Whitby
14614
answered Nov 8 '17 at 18:41
Steve WhitbySteve Whitby
14614
answered Nov 8 '17 at 18:41
Steve WhitbySteve Whitby
14614
14614
This did work for me. Only i put second css to .col property
– RohitAneja
Nov 15 '18 at 6:01
add a comment |
This did work for me. Only i put second css to .col property
– RohitAneja
Nov 15 '18 at 6:01
This did work for me. Only i put second css to .col property
– RohitAneja
Nov 15 '18 at 6:01
This did work for me. Only i put second css to .col property
– RohitAneja
Nov 15 '18 at 6:01
add a comment |
The col's sum inside the twitter bootsrap should be everytime 12. This will keep a clean grid design:
<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>
<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>
<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>
answered Mar 10 '14 at 20:51
Christian MichaelChristian Michael
547517
1
This is not what I want, what I am asking for is how to make the boxes appaear DIRECTLY under the last box instead of the perfectly clean grid, some boxes may be bigger, while some are smaller and if its "clean" then you have massive white spaces in some areas.
– user3379926
Mar 10 '14 at 20:57
3
"The col's sum inside the twitter bootsrap should be everytime 12" is not true. Read about column wrapping
– Zim
Mar 13 '17 at 13:43
add a comment |
The col's sum inside the twitter bootsrap should be everytime 12. This will keep a clean grid design:
<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>
<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>
<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>
answered Mar 10 '14 at 20:51
Christian MichaelChristian Michael
547517
1
This is not what I want, what I am asking for is how to make the boxes appaear DIRECTLY under the last box instead of the perfectly clean grid, some boxes may be bigger, while some are smaller and if its "clean" then you have massive white spaces in some areas.
– user3379926
Mar 10 '14 at 20:57
3
"The col's sum inside the twitter bootsrap should be everytime 12" is not true. Read about column wrapping
– Zim
Mar 13 '17 at 13:43
add a comment |
The col's sum inside the twitter bootsrap should be everytime 12. This will keep a clean grid design:
<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>
<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>
<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>
answered Mar 10 '14 at 20:51
Christian MichaelChristian Michael
547517
The col's sum inside the twitter bootsrap should be everytime 12. This will keep a clean grid design:
<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>
<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>
<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>
answered Mar 10 '14 at 20:51
Christian MichaelChristian Michael
547517
answered Mar 10 '14 at 20:51
Christian MichaelChristian Michael
547517
answered Mar 10 '14 at 20:51
Christian MichaelChristian Michael
547517
answered Mar 10 '14 at 20:51
Christian MichaelChristian Michael
547517
547517
1
This is not what I want, what I am asking for is how to make the boxes appaear DIRECTLY under the last box instead of the perfectly clean grid, some boxes may be bigger, while some are smaller and if its "clean" then you have massive white spaces in some areas.
– user3379926
Mar 10 '14 at 20:57
3
"The col's sum inside the twitter bootsrap should be everytime 12" is not true. Read about column wrapping
– Zim
Mar 13 '17 at 13:43
add a comment |
1
This is not what I want, what I am asking for is how to make the boxes appaear DIRECTLY under the last box instead of the perfectly clean grid, some boxes may be bigger, while some are smaller and if its "clean" then you have massive white spaces in some areas.
– user3379926
Mar 10 '14 at 20:57
3
"The col's sum inside the twitter bootsrap should be everytime 12" is not true. Read about column wrapping
– Zim
Mar 13 '17 at 13:43
1
1
This is not what I want, what I am asking for is how to make the boxes appaear DIRECTLY under the last box instead of the perfectly clean grid, some boxes may be bigger, while some are smaller and if its "clean" then you have massive white spaces in some areas.
– user3379926
Mar 10 '14 at 20:57
This is not what I want, what I am asking for is how to make the boxes appaear DIRECTLY under the last box instead of the perfectly clean grid, some boxes may be bigger, while some are smaller and if its "clean" then you have massive white spaces in some areas.
– user3379926
Mar 10 '14 at 20:57
3
3
"The col's sum inside the twitter bootsrap should be everytime 12" is not true. Read about column wrapping
– Zim
Mar 13 '17 at 13:43
"The col's sum inside the twitter bootsrap should be everytime 12" is not true. Read about column wrapping
– Zim
Mar 13 '17 at 13:43
add a comment |
I created another extension (which also is reactive) to the bootstrap row. You can try something like this:
.row.flexRow { display: flex; flex-wrap: wrap;}
answered Nov 20 '18 at 15:30
Akash YellappaAkash Yellappa
34733
add a comment |
I created another extension (which also is reactive) to the bootstrap row. You can try something like this:
.row.flexRow { display: flex; flex-wrap: wrap;}
answered Nov 20 '18 at 15:30
Akash YellappaAkash Yellappa
34733
add a comment |
I created another extension (which also is reactive) to the bootstrap row. You can try something like this:
.row.flexRow { display: flex; flex-wrap: wrap;}
answered Nov 20 '18 at 15:30
Akash YellappaAkash Yellappa
34733
I created another extension (which also is reactive) to the bootstrap row. You can try something like this:
.row.flexRow { display: flex; flex-wrap: wrap;}
answered Nov 20 '18 at 15:30
Akash YellappaAkash Yellappa
34733
answered Nov 20 '18 at 15:30
Akash YellappaAkash Yellappa
34733
answered Nov 20 '18 at 15:30
Akash YellappaAkash Yellappa
34733
answered Nov 20 '18 at 15:30
Akash YellappaAkash Yellappa
34733
34733
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f22310912%2fbootstrap-row-with-columns-of-different-height%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
