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 equal column height size
Add h-100 or height: 100%; to the first child of col-md-6 column start for both columns.
<html>
<head>
<title>Page Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!--JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
<div class="col-xs-3">
<div class="row">
<div class="col-md-6">
<div class="shadow p-3 mb-5 bg-white rounded h-100">
<div class="container">
<div class="row">
<div class="col-md-6">
-Icon-
</div>
<div class="col-md-6">
<p>Date</p>
</div>
</div>
</div>
<p>Author</p>
<div class="row">
<div class="col-md-6">
<p>Time</p>
</div>
<div class="col-md-6">
<div>
</div>
</div>
<!-- This needs to get the latest unread message -->
<!-- {% if unreadMessagesCount %}
<p>Unread: {{unreadMessagesCount}}</p>
{% if inbox %}
<div>
<p>{{inbox.first.sender}}</p>
</div>
<div>
<div>
<p>{{inbox.first.subject}}</p>
</div>
</div>
{{inbox.first.text}}
{{inbox.first.time}}
{% endif %}
{% else %}
<p>Unread: 0</p>
<div>
<p>There are no senders</p>
</div>
{% endif %} -->
</div>
</div>
</div>
<div class="col-md-6">
<div class="shadow p-3 mb-5 bg-white rounded h-100">
<div class="container">
<div class="row">
<div class="col-md-6">
-Icon-
</div>
<div class="col-md-6">
More stuff than possible
<!-- {% if request.user.refresh_token != "" %}
<div>
There are maybe some
</div>
{% else %}
<div>
There are no calendar events
</div>
{% endif %} -->
</div>
</div>
</div>
<p>Author</p>
<div class="row">
<div class="col-md-6">
<p>Time</p>
</div>
<div class="col-md-6">
<div>
</div>
</div>
</div>
</div>
</div>
<!-- This needs to get the earliest calendar event -->
</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/
css bootstrap make all cols in row same height
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container-fluid"> <div class="row">
<div class="col-6"> <div class="card mb-4 box-shadow h-100"> <div class="card-body"> <p>box 1 data here </p> </div> </div> </div>
<div class="col-6"> <div class="card mb-4 box-shadow h-100"> <div class="card-body"> <p>box 1 data here </p> <p>box 2 data here </p> <p>box 2 data here </p> </div> </div> </div>
</div>
</div>Equal height of columns in Bootstrap 4
You can use flexbox for this.
Update
And another way:
https://jsfiddle.net/persianturtle/ar0m0p3a/5/
.row-eq-height > [class^=col] {
display: flex;
flex-direction: column;
}
.row-eq-height > [class^=col]:last-of-type div {
margin: 10px;
}
.row-eq-height > [class^=col]:last-of-type div:first-of-type {
margin-top: 0;
}
.row-eq-height > [class^=col]:last-of-type div:last-of-type {
margin-bottom: 0;
}
.row-eq-height > [class^=col]:first-of-type .black {
flex-grow: 1;
}
Update
A better way with more specific classes:
https://jsfiddle.net/persianturtle/ar0m0p3a/3/
.row-eq-height > [class^=col]:first-of-type {
display: flex;
}
.row-eq-height > [class^=col]:first-of-type .black {
flex-grow: 1;
}
.blue p {
margin: 0;
}
Original way:
https://jsfiddle.net/persianturtle/ar0m0p3a/1/
[class^=col] {
display: flex;
flex-direction: column;
}
[class^=col] div {
flex-grow: 1
}
Bootstrap columns with the same heights
Reading: How can I make Bootstrap columns all the same height?
You can use:
.row{
overflow: hidden;
}
[class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
Here's a runnable example:
.row{ overflow: hidden; }
[class*="col-"]{ margin-bottom: -99999px; padding-bottom: 99999px;}
.row1 { height: 100%;}
.col1{ background-color: red; color: white; height: 100%;}
.col2{ background-color: green; color: white; height: 100%;}
.col3{ background-color: yellow; height: 100%;}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><div class="container"> <div class="row row1"> <div class="col col1 col-xs-3"> Column 1 </div> <div class="col col2 col-xs-3"> Column 2 </div> <div class="col col3 col-xs-3"> <div class="row"> Column 3 </div> <div class="row"> Column 4 </div> </div> </div></div>Same height for Bootstrap 3 grid columns
The solution is to "remove" the display: table which is set to .row::before:
.aligned-row {
display: flex;
flex-flow: row wrap;
&::before {
display: block;
}
}
Demo
Related Topics
How to Position Div Below Another Div
How to Create a Flexible Vertical Line in Between Two Divs
Laravel - Barryvdh Pdf - How Include External CSS File into HTML View
Is Float For Layout Bad? What Should Be Used in Its Place
Why Is a Flex Item Limited to Parent Size
Border-Radius in Percentage (%) and Pixels (Px) or Em
Equal Height Rows in CSS Grid Layout
Pure CSS to Make Font-Size Responsive Based on Dynamic Amount of Characters
Prevent Body Scrolling But Allow Overlay Scrolling
How to Make Multiple Divs Display in One Line But Still Retain Width
Vuejs Vue-Router Linking an External Website
Align an Image and Some Text on the Same Line Without Using Div Width
Size of Html5 Canvas Via CSS Versus Element Attributes
Difference Between Visibility:Hidden and Display:None
Hiding the Scroll Bar on an HTML Page