bootstrap 4 row height set by specific col - not highest one
You need to make the list-group position:absolute
, and then set overflow:auto
on both the list and list-group...
.list {
overflow: auto
}
.scroll {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
overflow:auto;
}
Demo: https://codeply.com/go/X2ydvxPU3k
Also see:
One flex/grid item sets the size limit for siblings
Flex equal height column but respect max height of another column
How can I limit the height of a row to the height of a specific column? [Bootstrap]
Wrap the content of the column in a absolute position div, and use overflow-auto if you want it to be scrollable...
<div class="container">
<div class="row">
<div class="col-3" style="background-color: yellow;"><img src="//via.placeholder.com/200x50"></div>
<div class="col-9 position-relative" style="background-color: blue;">
<div class="position-absolute overflow-auto top-0 bottom-0 start-0 end-0">Lorem ipsum dolor sit amet consectetur, dolor sit amet consectetur, adipisicing elit. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora, vitae!</div>
</div>
</div>
</div>
https://codeply.com/p/TGtv6KDKvD
Also see: bootstrap 4 row height set by specific col - not highest one
bootstrap 4 row height
Use the sizing utility classes...
h-50
= height 50%h-100
= height 100%
http://www.codeply.com/go/Y3nG0io2uE
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-6 B">
<div class="card card-inverse card-primary">
<img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image">
</div>
</div>
<div class="col-md-4 col-lg-3 G">
<div class="row h-100">
<div class="col-md-6 col-lg-6 B h-50 pb-3">
<div class="card card-inverse card-success h-100">
</div>
</div>
<div class="col-md-6 col-lg-6 B h-50 pb-3">
<div class="card card-inverse bg-success h-100">
</div>
</div>
<div class="col-md-12 h-50">
<div class="card card-inverse bg-danger h-100">
</div>
</div>
</div>
</div>
</div>
</div>
Or, for an unknown number of child columns, use flexbox and the cols will fill height. See the d-flex flex-column
on the row
, and h-100
on the child cols.
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-6 B">
<div class="card card-inverse card-primary">
<img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image">
</div>
</div>
<div class="col-md-4 col-lg-3 G ">
<div class="row d-flex flex-column h-100">
<div class="col-md-6 col-lg-6 B h-100">
<div class="card bg-success h-100">
</div>
</div>
<div class="col-md-6 col-lg-6 B h-100">
<div class="card bg-success h-100">
</div>
</div>
<div class="col-md-12 h-100">
<div class="card bg-danger h-100">
</div>
</div>
</div>
</div>
</div>
</div>
https://www.codeply.com/go/tgzFAH8vaW
Bootstrap row with columns of different height
This is a popular Bootstrap question, so I've updated and expanded the answer for Bootstrap 3, Bootstrap 4 and Bootstrap 5...
Bootstrap 5 (update 2021)
Bootstrap columns still use flexbox, but the card-columns previously used to create a Masonry like layout have been removed. For Bootstrap 5 the recommended method is to use the Masonry JS plugin:
Bootstrap 5 Masonry Example
Bootstrap 4 (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.
Bootstrap 3 (original answer -- pre flexbox)
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
How to limit Bootstrap 4 column height to another columns height?
I don't think that a pure css method is possible here. You can do this quite simply using Javascript. Just get the height of the left column and set the right column to it's height.
Working Fiddle: https://jsfiddle.net/036v75ap/6/
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col" id="left-col" style="background-color:blue">
<p>some content in the left column</p>
<p>some content in the left column</p>
<p>some content in the left column</p>
</div>
<div class="col" id="right-col" style="background-color:red">
<p>some content in the right column</p>
<p>some content in the right column</p>
<p>some content in the right column</p>
<p style="background-color:green">this should be in the overflow</p>
<p style="background-color:green">this should be in the overflow</p>
<p style="background-color:green">this should be in the overflow</p>
<p style="background-color:green">this should be in the overflow</p>
</div>
</div>
</body>
#left-col {
height: fit-content;
}
#right-col {
overflow-y: scroll;
}
$(document).ready(function(){
let height = $('#left-col').css('height');
$('#right-col').css('height', height);
})
How can I make Bootstrap columns all the same height?
LATEST SOLUTION (2022)
Solution 4 using Bootstrap 4 or 5
Bootstrap 4 and 5 use Flexbox by default, so there is no need for extra CSS.
Demo
<div class="container">
<div class="row ">
<div class="col-md-4" style="background-color: red">
some content
</div>
<div class="col-md-4" style="background-color: yellow">
catz
<img width="100" height="100" src="https://placekitten.com/100/100/">
</div>
<div class="col-md-4" style="background-color: green">
some more content
</div>
</div>
</div>
Solution 1 using negative margins (doesn't break responsiveness)
Demo
.row{
overflow: hidden;
}
[class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
Solution 2 using table
Demo
.row {
display: table;
}
[class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}
Solution 3 using flex added August 2015. Comments posted before this don't apply to this solution.
Demo
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}
Related Topics
Grid Layout on <Fieldset>... Bug on Chrome
Remove Underline Only from Anchor Element Child
Nth-Child with Mod (Or Modulo) Operator
Background Image Is Not Displayed in Firefox
Preventing Relayout Due to Scrollbar
Is It Allowed to Use Any Decimal Value in CSS Keyframe Animations
Fontawesome - Failed to Decode Downloaded Font
-Webkit-Transform-Style: Preserve-3D Not Working
Using Props to Set '&:Hover' Background-Color
How to Disable Margin Collapse Between Sibling Elements
CSS Selectors - How to Select 'For' in CSS
CSS Object-Fit Cover Is Stretching a Particular Image in Chrome on MAC
How to Delete Border Spacing in Table
Less Mixin with Optional Parameters
Why Doesn't This CSS Transition Work on Svg Inside an Anchor