Same Height Column Bootstrap 3 Row Responsive

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

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

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>

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

Bootstrap grid with 3 divs in a row with same height

For Bootstrap 3 versions, you could approach a fixed height for md+ screen devices (width >= 992px) with something like this:

@media(min-width:992px) {
    .fixed-md-height {        height: 150px;    }        .h-100 {        height: 100%;    }}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container-fluid">  <div class="row fixed-md-height">    <div class="col-md-7 h-100 bg-danger">Test</div>    <div class="col-md-2 h-100 bg-primary">Test</div>    <div class="col-md-3 h-100 bg-warning">Test</div>  </div></div>

Equal height columns bootstrap 3

Set a minimum height for the .thumbnail class

.thumbnail {
    min-height: 330px;
}

and for the overflow issue add

.text-center {
    word-wrap: break-word;
}

Fiddle
http://jsfiddle.net/8d8g7hyt/3/

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>

---

Related Topics