Boostrap 3: how to force the content of layout columns to be of same height?


Tags: html,css,twitter-bootstrap

Problem :

Situation: I've a row, with 3 columns. I'm using the Bootrstrap native grid system. In each column there is a panel, with some text in the body.

I want that each panel be of the same eight, even if the text doesn't fill the panel body.

How can I do this?

Referring to my jsfiddle: https://jsfiddle.net/ae5wvdye/1/

This is the code

<div class="row">

    <div class="col-sm-4">

        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">Step 1</h3>
            </div>
            <div class="panel-body">
                <p>
                    dsadj akshdajksh dkashdjk ahskdjhaskjh dashdjkasdasdasd 
                    asdasdas lkaskljdasklj ldajskljdlasjdlaj sldaskdlkajklsdasd as
                </p>
            </div>
        </div>

    </div>

    <div class="col-sm-4">

        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">Step 2</h3>
            </div>
            <div class="panel-body">
                <p>
                    dsadj akshdajksh dkashdjk ahskdjhaskjh dashdjkasdasdasd 
                    asdasdas lkaskljdasklj ldajskljdlasjdlaj sldaskdlkajklsdasd as
                </p>
                <p>
                    dsadj akshdajksh dkashdjk ahskdjhaskjh dashdjkasdasdasd 
                    asdasdas lkaskljdasklj ldajskljdlasjdlaj sldaskdlkajklsdasd as
                </p>
                <p>
                    dsadj akshdajksh dkashdjk ahskdjhaskjh dashdjkasdasdasd 
                    asdasdas lkaskljdasklj ldajskljdlasjdlaj sldaskdlkajklsdasd as
                </p>
            </div>
        </div>

    </div>

    <div class="col-sm-4">

        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">Step 3</h3>
            </div>
            <div class="panel-body">
                <p>
                    dsadj akshdajksh dkashdjk ahskdjhaskjh dashdjkasdasdasd 
                    asdasdas lkaskljdasklj ldajskljdlasjdlaj sldaskdlkajklsdasd as
                </p>
                <p>
                    dsadj akshdajksh dkashdjk ahskdjhaskjh dashdjkasdasdasd 
                    asdasdas lkaskljdasklj ldajskljdlasjdlaj sldaskdlkajklsdasd as
                </p>
            </div>
        </div>

    </div>

</div>

This is what I got actually, but this is the wrong results, extetically not so good. I want every panel to be at 100% of row height, but I'm not able, using CSS to foce it at 100% of the row height (where the row height is automatically the height of the tallest panel).

enter image description here



Solution :

Solution 1:

Using flexbox https://jsfiddle.net/ae5wvdye/4/

@media(min-width: 768px) {
    .flex {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;

        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .item {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }
}

Solution 2:

Using CSS table https://jsfiddle.net/ae5wvdye/7/

@media(min-width: 768px) {
    .table {
        display: table;
    }

    .item {
        display: table-cell;
        float: none;
        height: 100%;
    }    

    .panel {
        height: 100%;
        display: table;
    }
}

    CSS Howto..

    How to achieve video-play navigation like khan academy in bootstrap? [closed]

    How to highlight spaces in a tag? (CSS only)

    How can I change the path to the css file dynamically?

    How to count total number of divs with in a div using CSS

    CSS: How to align table data

    How to Make
    • as structured

    How do I get text to go in the middle of a div? [duplicate]

    How change css of disabled input checkbox tag?..because it's too light and hard to see

    How to change css from javascripts

    show different content in multiple css popups

    how to change other element css when selected element has new class

    How to slide a div from bottom using pure css or pure javascript

    Trying to find the width of hidden content in order to resize the containing div to show the content (jQuery)

    How do I access HTML elements created by a function? The elements are “undefined” and therefore not CSS apply-able

    Implementing a select element in my form, but unsure how to grab user selection for a list

    How to set Bootstrap @font-family-base?

    How to change the size of an image inside a div without changing the div size

    In CSS, how to hover a background over an image

    How to pass JavaFX variable into CSS style?

    How to set focus/active on the clicked li(tab) in angular.js

    How to remove space from top of web page

    How to read DOM in React

    ASP.NET - how to use CSS to align ASP.NET controls in a data entry situtaion?

    how to Styling a “choose file” button using css Only

    How to make “button-like appearance” with CSS

    How to create popups in css /Javascript?

    How to place div in top right hand corner of page

    How to remove the empty space between divs in CSS?

    CSS: how to make a list item containing a form “submittable”?

    Showing a time countdown progress bar