Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to make Bootstrap columns all the same height?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 866
    Comment on it

    Hello Readers!

    Bootstrap is the most amazing HTML and CSS framework by far. Also, the grid system is near to perfect.

    It has columns and rows to keep our content just in place perfectly. But everything has its weak point.

    Bootstrap has its own when the amount of content in different columns varies. Developers can often be seen struggling to match the height of their columns in order to maintain responsiveness.

    Things like these were easy to cope with table. But with the commencement of div, they have turned annoying.

    Let us look at the solutions for this.

     

    NEGATIVE MARGINS AND OVERFLOW:HIDDEN


    This approach is probably the best solution in my opinion. It would work on all columns irrespective of their size and height. In this approach, you add 99999px to the column height via padding and then -99999px of negative margin to seem as if it is not there. Finally, giving overflow:hidden to the row hides the overflowing content.

    Here's how you do it.

    .row {
      overflow: hidden; 
    }
    
    [class*="col-"]{
      margin-bottom: -99999px;
      padding-bottom: 99999px;
    }

     

     

    TABLE, YET AGAIN


    table comes to rescue. We do know, div's and its elements can be made to behave like a table.

    We wil take this approach because the table columns have matched height by default. Simply, make the row behave like a table.

    .row {
      display: table;
    }
    
    [class*="col-"] {
      float: none;
      display: table-cell;
      vertical-align: top;
    }

     

     

    FLEXBOX


    Flexbox is a boon for front-end developers.

    It does everything you can ask for. It provides equal heights and is responsive. All this make it the ultimate tool for layouts.

    Internet Explorer 9 and below do not support this property.

    .row {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      flex-wrap: wrap;
    }
    
    .row > [class*='col-'] {
      display: flex;
      flex-direction: column;
    }

     

    Keep Coding!

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: