How can I make Bootstrap columns all the same height?

How can I make Bootstrap columns all the same height?

Asked on October 26, 2018 in Bootstrap.
Add Comment


  • 2 Answer(s)

    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;
    }
    
    Answered on October 26, 2018.
    Add Comment

    Solution 3 using flex
    Demo

    .row {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    flex-wrap: wrap;
    }
    .row > [class*='col-'] {
        display: flex;
        flex-direction: column;
    }
    
    Answered on October 26, 2018.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.