Using Twitter Bootstrap 2.0 - How to Make Equal Column Heights

Using twitter bootstrap 2.0 - How to make equal column heights?

Here's a responsive CSS solution, based on adding a large padding and an equally large negative margin to each column, then wrapping the entire row in in a class with overflow hidden.

.col{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
    background-color:#ffc;
}

.col-wrap{  
    overflow: hidden;   
}

You can see it working at jsFiddle

Edit

In response to a question, here's a variation if you need equal height wells or equal height columns with rounded corners: http://jsfiddle.net/panchroma/4Pyhj/

Edit

In response to a question, here's the same technique in Bootstrap 3, same principle, just update the class names in the Bootstap grid: http://jsfiddle.net/panchroma/bj4ys/embedded/result/

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;
}

Make Column A equal to Column B in height

With a minor change in the HTML this is possible with Flexbox.

Columnb will take the height of ColumnB but the content of ColumnA in inside an absolutely positioned div with 100% height (and overflow).

.parent {  display: flex;  margin-bottom: 1em;}.colA {  position: relative;  background: pink;  flex: 1;}.colB {  height: 75px;  flex: 1;  background: lightblue;}.inner {  position: absolute;  height: 100%;  overflow: auto;}.tall .colB {  height: 180px;}

<div class="parent">  <div class="colA">    <div class="inner">      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium accusantium iure nostrum nemo eaque sunt impedit reiciendis expedita ducimus necessitatibus voluptas excepturi, deleniti aut repellat! Porro nihil nemo, ipsum ipsa reiciendis quis        cupiditate fugiat quam!</p>    </div>  </div>  <div class="colB"></div></div>
<div class="parent tall">  <div class="colA">    <div class="inner">      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium accusantium iure nostrum nemo eaque sunt impedit reiciendis expedita ducimus necessitatibus voluptas excepturi, deleniti aut repellat! Porro nihil nemo, ipsum ipsa reiciendis quis        cupiditate fugiat quam!</p>    </div>  </div>  <div class="colB"></div></div>

Twitter Bootstrap equal height columns and content aligned bottom

To get that layout you will need to break the float rules of bootstrap. Try this:

Add a class on the row to later target the columns:
```
<div class="row t-cell">
```

Then with CSS use table-cell like this:

.t-cell > div {
    display:table-cell;
    float:none;
    vertical-align:bottom;
}

Check this DemoFiddle

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/

Using Twitter Bootstrap 2.0 - How to Make Equal Column Heights