Ensuring all Bootstrap columns have equal height to match the tallest one

Question

Ensuring all Bootstrap columns have equal height to match the tallest one

I have several .col-md-2 elements on my Bootstrap website, each containing an image of varying height.

I am looking to ensure that all the columns have the same height so that I can align the images horizontally.

Below is the HTML code:

<div class="row">
    <div class="col-md-2">
        <img src="http://lorempixel.com/400/300/" alt="" />
    </div>
    <div class="col-md-2">
        <img src="http://lorempixel.com/400/200/" alt="" />
    </div>
    <div class="col-md-2">
        <img src="http://lorempixel.com/300/200/" alt="" />
    </div>
    <div class="col-md-2">
        <img src="http://lorempixel.com/200/200/" alt="" />
    </div>
    <div class="col-md-2">
        <img src="http://lorempixel.com/400/400/" alt="" />
    </div>
</div>

Here is the CSS code:

.col-md-2 {
    background-color: red;
}

.col-md-2:nth-child(odd) {
    background-color: green;
}

.col-md-2 img {
    max-width: 100%;
}

You can view a live example on JSFiddle

Is there a way I can achieve this layout?

html css twitter-bootstrap

Answer 1

Answer №1

If you want equal height columns in Bootstrap, you can utilize the properties display: table-cell and table-layout: fixed

For a detailed example, check out this resource:

Here is an example of the HTML structure:

<div class="row">
  <div class="row-same-height">
    <div class="col-xs-6 col-xs-height"></div>
    <div class="col-xs-3 col-xs-height col-top"></div>
    <div class="col-xs-2 col-xs-height col-middle"></div>
    <div class="col-xs-1 col-xs-height col-bottom"></div>
  </div>
</div>

And here is the corresponding CSS:

.row-full-height {
  height: 100%;
}
.col-full-height {
  height: 100%;
  vertical-align: middle;
}
.row-same-height {
  display: table;
  width: 100%;
  /* fix overflow */
  table-layout: fixed;
}
.col-xs-height {
  display: table-cell;
  float: none !important;
}

@media (min-width: 768px) {
  .col-sm-height {
    display: table-cell;
    float: none !important;
  }
}
@media (min-width: 992px) {
  .col-md-height {
    display: table-cell;
    float: none !important;
  }
}
@media (min-width: 1200px) {
  .col-lg-height {
    display: table-cell;
    float: none !important;
  }
}

I trust that this solution will be beneficial for your needs.

Answer 2

If you want equal height columns in Bootstrap, you can utilize the properties display: table-cell and table-layout: fixed

For a detailed example, check out this resource:

Here is an example of the HTML structure:

<div class="row">
  <div class="row-same-height">
    <div class="col-xs-6 col-xs-height"></div>
    <div class="col-xs-3 col-xs-height col-top"></div>
    <div class="col-xs-2 col-xs-height col-middle"></div>
    <div class="col-xs-1 col-xs-height col-bottom"></div>
  </div>
</div>

And here is the corresponding CSS:

.row-full-height {
  height: 100%;
}
.col-full-height {
  height: 100%;
  vertical-align: middle;
}
.row-same-height {
  display: table;
  width: 100%;
  /* fix overflow */
  table-layout: fixed;
}
.col-xs-height {
  display: table-cell;
  float: none !important;
}

@media (min-width: 768px) {
  .col-sm-height {
    display: table-cell;
    float: none !important;
  }
}
@media (min-width: 992px) {
  .col-md-height {
    display: table-cell;
    float: none !important;
  }
}
@media (min-width: 1200px) {
  .col-lg-height {
    display: table-cell;
    float: none !important;
  }
}

I trust that this solution will be beneficial for your needs.

Ensuring all Bootstrap columns have equal height to match the tallest one

Answer №1

Similar questions

What is the best way to eliminate vertical spacing among li elements in CSS

Concerning dilemma with a div element

Is it feasible to utilize the translate function twice on a single element?

Steps for adding a delete icon to a text input field and enabling the functionality to delete text

Dynamic water filling effect with SVG

The node.js and express.js update operation (CRUD) is not rendering the CSS files properly

Is there a way to line up these two tables or divs using a shared parent header div?

Show an image based on a query parameter

The feature of Switch css does not appear to function properly when used in conjunction with input type

Leveraging jQuery to manipulate an SVG file

Align text in the middle of an image

How to incorporate an image within a div element without reliance on the <img> tag

Comparing the impact of class and element selectors on CSS performance

The Regex.Replace function is not functioning as expected

What is the process for implementing hover transitions on link elements?

Denied rendering of design due to incompatible MIME type

Styling with Chemistry: CSS for Chemical Formulas

Resetting JavaScript Input based on certain conditions

Styling a custom Qt class using a CSS selector

What are some ways to utilize a Bootstrap modal button embedded within a clickable row?