CODEWITHSUNDEEP
csstwitter-bootstrap-3
JMan
JMan

Reputation: 2629

Bootstrap 3 - Columns in row should have same height

I have a view with 4 articles within a colored box. When the screen is wide enough they need to be displayed side by side and have the same height like this:

Article 1       Article 2
Article 3       Article 4

I have tried adding the style so the container - row and columns have following style, but to no result either:

.container-height{
display:table;
}

.row-height{
display:table-row;
}

.col-height{
display:table-cell;
float:none;
}

https://plnkr.co/edit/vrlHw8tepKZ5nj4SW8EB?p=preview

Upvotes: 3

Views: 1421

Answers (3)

Mamun
Mamun

Reputation: 145

If you using Bootstrap. This code very helpfull for you

<!DOCTYPE html>
<html>

    <head>
        <link rel="stylesheet" href="style.css">
        <script src="script.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <link rel="stylesheet" href="http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    </head>

    <body>
        <div class="container">
            <div class="row  row-eq-height">
                <div class="col-md-6">
                    <h1>Header 1 </h1>
                    <p>Lorem ipsum dolor sdfdfdit amet, duo latine euismod ut. Nullam lobortis nec cu, vel nisl simul at. Ad pro omnis quando suavitate, est ea quod autem perfecto, eros brute nusquam pri ut. At saepe dicant euismod nec.. Lorem ipsum dolor sdfdfdit amet, duo latine euismod ut. Nullam lobortis nec cu, vel nisl simul at. Ad pro omnis quando suavitate, est ea quod autem perfecto, eros brute nusquam pri ut. At saepe dicant euismod nec..</p>
                </div>
                <div class="col-md-6">
                    <h1>Header 1 </h1>
                    <p>Lorem ipsum dolor sit fdfdfamet, duo latine euismod ut. Nullam lobortis nec cu, vel nisl simul at. Ad pro omnis quando suavitate, est ea quod autem perfecto, eros brute nusquam pri ut. At saepe dicant euismod nec..</p>
                </div>
                <div class="col-md-6">
                    <h1>Header 1 </h1>
                    <p>Lorem ipsum dolor sidfdft amet, duo latine euismod ut. Nullam lobortis nec cu, vel nisl simul at. Ad pro omnis quando suavitate, est ea quod autem perfecto, eros brute nusquam pri ut. At saepe dicant euismod nec..</p>
                </div>
                <div class="col-md-6">
                    <h1>Header 1 </h1>
                    <p>Lorem ipsum dolor sit afgfmet, duo latine euismod ut. Nullam lobortis nec cu, vel nisl simul at. Ad pro omnis quando suavitate, est ea quod autem perfecto, eros brute nusquam pri ut. At saepe dicant euismod nec..</p>
                </div>
            </div>
        </div>
    </body>

</html>

<!-- begin snippet: js hide: false -->

Upvotes: 0

Leo the lion
Leo the lion

Reputation: 3065

Well, if you are ok with jquery solution then please have a look at this code.

Check fiddle

$(document).ready(function(e) {
    var heightNew = 0;
    $('.col-md-6 article').each(function(index, element) {
        if($(this).height() > heightNew){
            heightNew = $(this).height();
        }
        $(this).css('height', heightNew+'px');
    });
});

so just add this in tag and use this css.

article{
    text-align:center;
    background-color:lightgray;
    margin:0 25px 50px 25px;
}
h1, p{
    padding:10px;
}

What i did is, i took max-height of article and give that height to other so who ever is the biggest article, all article will be the same height. Hope you will like my idea. Thank you

Upvotes: 1

Vincent T
Vincent T

Reputation: 3292

getting them along side each other can be achieved by using the bootstrap class col-lg-6 in the case of 2 cols this adds up to 12 and only be active on a large screen (from 1200px and up)

the quickest way to get the equal height for all of the columns (in case of fixed content) is by setting the height, making use of a media query

@media(min-width: 1200){ height: xx; }

Upvotes: 0

Related Questions