Place the three columns with the same height
If you are using Bootstrap4
then you can easily achieve by BS4 predefined classes
like h-100
and also your html structure is not correct way so follow as per bootstrap instructions.Predefined classes for width & height follow:
https://getbootstrap.com/docs/4.3/utilities/sizing/#relative-to-the-parent
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container my-2"> <div class="row"> <div class="col-3"> <div class="card cardm h-100"> <div class="card-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit </div> </div> </div> <div class="col-3"> <div class="card cardm h-100"> <div class="card-body"> Ut enim ad minim veniam, quis nostrud exercitation ullamco. </div> </div> </div> <div class="col-3"> <div class="card cardm h-100"> <div class="card-body"> Laboris nisi ut aliquip ex ea </div> </div> </div> <div class="col-3"> <div class="card cardm h-100"> <div class="card-body"> Voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat </div> </div> </div> </div></div>
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;
}
CSS - Equal Height Columns?
Grid
Nowadays, I prefer grid because it allows keeping all layout declarations on parent and gives you equal width columns by default:
.row { display: grid; grid-auto-flow: column; gap: 5%;}
.col { border: solid;}
<div class="row"> <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div> <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</div></div>
Bootstrap with 3 column having same height for all row
You can add these style to your code:
I checked this in responsive mode.
<style>
.col-4{
min-height: 100px;
text-align: center;
}
.col-4 span{
display:block
}
.col-4 i{
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
</style>
How to make 3 li columns with variable height content the same height
For IE7?
And Pure CSS?
And All Row 1 (Div "one") Equal Height?
And all Columns Equal Height?
The answer is... Not possible.
Three columns with equal height corresponding rows in each column
I would consider option 1 for the following reasons:
- Your markup is semantically correct (3 columns, each with some rows) and clean
- Your column styles can easily be applied
- Looping through all rows just to calculate the maximum height isn't that cumbersome especially if you only have a few rows.
A solution with vanilla JavaScript could look like the following. You can wrap the code into a function and call it, whenever your filter is applied:
var rows = document.querySelectorAll(".col:nth-child(1) > .row").length, nfor (n = 1; n <= rows; ++n) { var cells = document.querySelectorAll('.row:nth-child(' + n + ')') var maxHeight = 0, i for (i = 0; i < cells.length; ++i) { maxHeight = (cells[i].clientHeight > maxHeight) ? cells[i].clientHeight : maxHeight } cells.forEach(function(cell){ cell.style.height = Number(maxHeight-10) + 'px' })}
.col { display: inline-block; width: calc(33% - 41px); margin: 10px 10px; padding: 10px; border-radius: 15px; box-shadow: 0 0 20px #aaa; vertical-align: top;}.row { border-top: 3px solid black; margin: 5px 0; padding: 5px;}
<div class="container"> <div class="col"> <div class="row">row 1 Compare text 1</div> <div class="row">row 2</div> <div class="row">row 3</div> </div> <div class="col"> <div class="row">row 1 Compare text 1 this text is longer</div> <div class="row">row 2</div> <div class="row">row 3 with a little more text</div> </div> <div class="col"> <div class="row">row 1 Compare text 1 this text is even much much longer</div> <div class="row">row 2</div> <div class="row">row 3</div> </div></div>
Flex-box: 3 columns of same height with page scroll
Change height:100%
to min-height:100%
of .container
, also add height:100%
to body, html
.container {
display: flex;
justify-content: center;
min-height: 100%;
}
body, html {
background-color: seashell;
margin: 0;
height: 100%
}
Related Topics
Vertically Aligning an Image to The Bottom Inside a Bootstrap "Column"
Can CSS: Not Selector Target: Before and: After Selectors
Using HTML Attributes as CSS Property Values
Why Doesn't Blur(0) Remove All Text Blur in Webkit/Chrome on Retina Screens
How to Draw a Border Around The Text of a Javafx Label
Make an Image Fit Its Container by Setting The Image Height to The Containers Heights
CSS Variable with Fallback Value of Itself
Bootstrap Container Fill Sides with Colors
Cannot Find Definitions of Editor-Label and Editor-Field in MVC 4, Did Ms Remove It? Why
Sass Replicating Nested Selector
How to Include "Leaflet.CSS" in a React App with Webpack
How to Break Lines in Urls in Stylesheet
What Is CSS "[Class*=My-Class] .My-Subclass" Doing