Bootstrap Responsive Columns Height
Since Bootstrap 4 uses flexbox, cols across a row are always going to be the equal height (set by the height of the tallest).
You can workaround this by "disabling" flexbox at certain breakpoints using d-(breakpoint)-block on the row. By making the row display:block instead display:flex, floats can now be used to float cols to the right or left.
<div class="container-fluid">
<div class="row pt-5 d-md-block d-xl-flex">
<div id="left-nav" class="d-sm-none d-md-block col-md-4 col-lg-3 col-xl-2 border float-left">
left
</div>
<div id="main-body" class="col-md-8 col-lg-9 col-xl-8 border taller float-right">
main
</div>
<div id="right-nav" class="d-sm-none d-md-block col-md-4 col-lg-3 col-xl-2 border">
right
</div>
</div>
</div>
Demo: https://www.codeply.com/go/A0oYUlPOud
Related:
How to fix unexpected column order in bootstrap 4?
How to make this column ignore the vertical space
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;
}
Bootstrap Grid with Responsive height for a row
Achieved it with
display:table; for .container
display:table-row; for .row
display:table-column;float:none; for .col
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<head>
<style>
div.col-xs-7, div.col-xs-1{
border-right:1px solid black;
}
div.row{
border-bottom: 1px solid black;
}
.TableStyle {
display:table;
padding-left:0px;
padding-right:0px;
}
.RowStyle {
display:table-row;
}
.ColumnStyle {
display:table-cell;
float:none;
}
</style>
</head>
<body>
<div class = "container TableStyle">
<div class="row RowStyle">
<div class = "col-xs-7 col-md-5 ColumnStyle">Medical History Unknown</div>
<div class = "col-xs-1 ColumnStyle">y</div>
<div class = "col-xs-1 ColumnStyle">n</div>
<div class = "col-xs-1 ColumnStyle">y</div>
<div class = "col-xs-1 ColumnStyle">n</div>
</div>
<div class="row RowStyle">
<div class = "col-xs-7 col-md-5 ColumnStyle">Heart Condition (CHF, Angina, Heart Attack) </div>
<div class = "col-xs-1 ColumnStyle">y</div>
<div class = "col-xs-1 ColumnStyle">y</div>
<div class = "col-xs-1 ColumnStyle">y</div>
<div class = "col-xs-1 ColumnStyle">y</div>
</div>
<div class="row RowStyle">
<div class = "col-xs-7 col-md-5 ColumnStyle">Anemia</div>
<div class = "col-xs-1 ColumnStyle">n</div>
<div class = "col-xs-1 ColumnStyle">y</div>
<div class = "col-xs-1 ColumnStyle">n</div>
<div class = "col-xs-1 ColumnStyle">y</div>
</div>
<div class="row RowStyle">
<div class = "col-xs-7 col-md-5 ColumnStyle">Epilepsy, Seizure </div>
<div class = "col-xs-1 ColumnStyle">y</div>
<div class = "col-xs-1 ColumnStyle">y</div>
<div class = "col-xs-1 ColumnStyle">n</div>
<div class = "col-xs-1 ColumnStyle">n</div>
</div>
</div>
</body>
</html>Same height column bootstrap 3 row responsive
You can achieve this by using javascript. Find out the biggest height of the 4 divs and make all of them at the same height like the biggest one.
Here is the code:
$( document ).ready(function() {
var heights = $(".well").map(function() {
return $(this).height();
}).get();
maxHeight = Math.max.apply(null, heights);
$(".well").height(maxHeight);
});
edit history: changed the ',' sign into ';' sign
How do I make an image's height responsive in a Bootstrap 4 column so that an embedded video in an adjacent column is not affected?
I found that if I use Bootstrap's embed-responsive class for the first column (containing the image) and wrap the image in a <div> then the embedded video in the second column behaves properly.
For some reason this doesn't work with the anchor around the placeholder image I used in the code in my question above. So I've provided my updated code below with a reference to a local image.
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-3 embed-responsive border">
<div class="embed-responsive-item justify-content-end d-flex ">
<img class="mt-auto" style="height: 100%;" src="img/local_image.jpg">
</div>
</div>
<div class="col-6 border embed-responsive embed-responsive-16by9" id="vid">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/kyJUQuaECrg" allowfullscreen></iframe>
</div>
<div class="col-3 border d-flex">
<span class="mt-auto">Some Text</span>
</div>
</div>
</div>
</body>
</html>
How can I make Bootstrap 4 columns all the same height?
You just have to use class="row-eq-height" with your class="row" to get equal height columns for previous bootstrap versions.
but with bootstrap 4 this comes natively.
check this link --http://getbootstrap.com.vn/examples/equal-height-columns/
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
Bootstrap - Responsive Row and Column with 100% height
It is wrong idea, bootstrap classes shouldn`t be changed. Write your custom css with custom classes.
<div class="container full-height-container">
<div class="row full-height-row">
<div class="col-md-6 col-xs-12 left full-height-col">
<div class="row">
<div class="col-md-4">
c1
</div>
<div class="col-md-4">
c2
</div>
<div class="col-md-4">
c3
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 right full-height-col">
test2
</div>
</div>
</div>
html,body{
height: 100%;
}
.left{
background: red;
}
.right{
background: yellow;
}
.full-height-container{
height: 100%;
}
.full-height-row{
height: 100%;
}
.full-height-col{
height: 100%;
}
Take a look: fiddle
How can I make Bootstrap 4 columns have a height of 100%?
Use the Bootstrap 4 h-100 class for height:100%;
<div class="container-fluid h-100">
<div class="row justify-content-center h-100">
<div class="col-4 hidden-md-down" id="yellow">
XXXX
</div>
<div class="col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8">
Form Goes Here
</div>
</div>
</div>
https://www.codeply.com/go/zxd6oN1yWp
You'll also need ensure any parent(s) are also 100% height (or have a defined height)...
html,body {
height: 100%;
}
Note: 100% height is not the same as "remaining" height.
Related: Bootstrap 4: How to make the row stretch remaining height?
set height of column equal to parent div and responsive in bootstrap
for this you must use display: flex
.row{
display: flex;
}
.row > div{
border: 1px solid red;
}
http://jsfiddle.net/twL6azag/
Related Topics
Ie11 Making Background Image Text Blurry
Difference Between Blank and Empty Pseudo-Classes
How to Override Device Pixel Ratio
Why Do Inline Elements Behave Like Block Level Elements When Floated
CSS Filter Cancels Element Position
Font-Face Embedded Fonts Look Fuzzy in Windows 7 Browsers
Svg Spritesheet Targeting with CSS
Equal Height Children of Grid Items
CSS Tables for Rowspan and Colspan
Css3 Backgrounds - Multiple Background-Size Properties
How to Force a Website to Be in Landscape Mode When Viewed on a Mobile Device
Sass Store Selector in Variable
Sidemenu Background-Color in Ionic-V4
How to Make a Link Inside a Div Fill the Entire Space Inside the Div