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 does bootstrap restrict minimum page width to 400px

    How do I grey out the default text of a text box?

    how to make the file input field wrap?

    How do I position divs inside header?

    How to apply Javascript conditionally on a specific css-class only?

    how to dynamically change css class for html form elements based on other css class

    How to position CSS Ribbon to go over one table cell

    How to make maintaince document for a website?

    How to override the slide effect to dissolve effect in JQuery Mobile using CSS3 feautures?

    how to add css background color for div tag

    How to show local html file into webview?

    how to set primefaces datatable columns padding with CSS padding

    multiselect.js via gem multi-select-rails - how best to set width

    How to create a box having border top width more than content at different browser display size?

    How do I stagger divs like Google Plus?

    How can I make responsive image take up 100% of its parent's height?

    How do I achieve my bootstrap nav design?

    How do I align an icon right next to “Click here”?

    How to remove only one media rule property from external css

    How can I refactor some repetitive HTML and CSS?

    How to make a CSS Menu “Selected” with Hover Image Gallery Effect?

    showing a css component for a specified number of seconds

    How to make HTML component is not covered by footer menu?

    How to stretch div height to fill parent div - CSS

    How to @import without including all CSS but just the @extends ones

    how to align the content to center of page using css

    How do I check for a css value using jQuery?

    How to set a max-width only to text nodes not in a tag?

    How to make 2 level scrolling tab in CSS like this in HTML 5

    How to create this type of window,as described in the attached picture with HTML,CSS? [closed]