htmlcsstwitter-bootstraptwitter-bootstrap-3

Reputation: 451

Same height column bootstrap 3 row responsive

Hi I have four divs in a bootstrap row. I want all divs in this row to have the same height and not break responsibility. I don't know how to do this without breaking responsibility.

I have tried solving this with fixed heights but in terms of responsiveness this is a bad solution.

Thanks :-)

<div class="row">
    <div class="col-md-3 index_div_item">
        <a href="#">
        <div class="well" id="item1">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2 class="h2_item_glyphicon"><span class="glyphicon glyphicon-ok-circle"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>                
        </div>
        </a>
    </div>    
    <div class="col-md-3 index_div_item">
        <a href="#">
            <div class="well" id="item2">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-stats"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
            </div>  
        </a>
    </div>    
    <div class="col-md-3 index_div_item">
        <a href="#">
            <div class="well" id="item3">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-send"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
            </div>
        </a> 
    </div>  
    <div class="col-md-3 index_div_item">
        <a href="#">
            <div class="well" id="item4">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-cog"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>                
            </div>  
        </a>  
    </div>              
</div>

Upvotes: 38

Answers (16)

paulalexandru

Reputation: 9530

You can achieve this by using javascript. Find out the biggest height of the 4 divs and make all of them at the same height like the biggest one.

Here is the code:

$( document ).ready(function() {
    var heights = $(".well").map(function() {
        return $(this).height();
    }).get();

    maxHeight = Math.max.apply(null, heights);

    $(".well").height(maxHeight);
});

edit history: changed the ',' sign into ';' sign

Upvotes: 69

Emidomenge

Reputation: 1524

For people who are coming here for this solution in React, here it is:

  constructor(props) {
    super(props);
    this.state = {
      maxHeight: undefined,
    };

    this.putBootstrapColumnSameHeight = this.putBootstrapColumnSameHeight.bind(this);
  }

  componentDidMount() {
    this.putBootstrapColumnSameHeight();
  }

  putBootstrapColumnSameHeight() {
    const heights = [];
    document.querySelectorAll('.col').forEach(el => heights.push(el.clientHeight));
    this.setState(
      {
        maxHeight: Math.max.apply(null, heights),
      },
    );
  }

Then to your columns :

<Col xs={12} md={7} className="col" style={{ height: this.state.maxHeight }}>
 // etc..
</Col>

<Col xs={12} md={5} className="col" style={{ height: this.state.maxHeight }}>
 // etc..
</Col>

Enjoy ;)

Upvotes: 0

Mohan Dere

Reputation: 4597

We can achieve this by -

By using table layout mechanism
Using jquery-match-height js plugin

1. By using table layout mechanism

Demo - JS Fiddle

The mechanism is -

Wrap all columns in one div
Make that div as a Table with fixed layout
Make each column as a table cell
Use vertical-align property to control content position

We can make columns of same height and vertically aligned using following css and classes.

Base css will be-

  /* columns of same height styles */

.row-full-height {
  height: 100%;
}

.col-full-height {
  height: 100%;
  vertical-align: middle;
}

.row-same-height {
  display: table;
  width: 100%;
  /* fix overflow */
  table-layout: fixed;
}

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

@media (min-width: 768px) {
  .col-sm-height {
    display: table-cell;
    float: none !important;
  }
}

@media (min-width: 992px) {
  .col-md-height {
    display: table-cell;
    float: none !important;
  }
}

@media (min-width: 1200px) {
  .col-lg-height {
    display: table-cell;
    float: none !important;
  }
}


/* vertical alignment styles */

.col-top {
  vertical-align: top;
}

.col-middle {
  vertical-align: middle;
}

.col-bottom {
  vertical-align: bottom;
}

Base html will be-

<div class="container">
  <h2>Demo 1</h2>
  <div class="row">
    <div class="row-same-height">
      <div class="col-xs-3 col-sm-height">1st column</div>
      <div class="col-xs-3 col-sm-height col-top">2st column</div>
      <div class="col-xs-3 col-sm-height col-middle">3st column</div>
      <div class="col-xs-3 col-sm-height col-bottom">4th column</div>
    </div>
  </div>
</div>

2. Match Media Js

MatchHeight makes the height of all selected elements exactly equal. It handles many edge cases that cause similar plugins to fail.

Demo link - here

Upvotes: -1

Pete

Reputation: 58412

You can make use of the display:table properties:

.row {display:table; width:100%; border-spacing:10px; }
.col-md-3 {display:table-cell; width:25%;}

Example

Update

As people seem to be downvoting this as it breaks bootstrap, you should really be targeting the elements with different classes to what bootstrap uses - so here is an updated fiddle that won't break the rest of bootstrap - for the above code, if you add another class of table-row to the row, then you can use the following styles:

@media (min-width: 992px) {
  .row.table-row {
    display: table;
    width: 100%;
    min-width: 800px;
    border-spacing: 10px;
  }
  .row.table-row > .col-md-3 {
    display: table-cell;
    width: 25%;
  }
  .row.table-row > .col-md-3 {
    float: none;
  }
}

Example

Upvotes: 2

Watchmaker

Reputation: 5308

If anybody is interested in a pure CSS solution that doesn't break the responsiveness, this worked for me (note that I added the class "row-eq-height" where the "row" class is to clarify and not interfere with bootstrap css and changed 'md' for 'xs' to check it better in the demo).

<div class="row row-eq-height">
<div class="col-xs-3 index_div_item">
    <a href="#">
    <div class="well" id="item1">
            <h1 class="h1_item"><span class="titre_item">Title</span></h1>
            <h2 class="h2_item_glyphicon"><span class="glyphicon glyphicon-ok-circle"></span></h2>
            <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>                
    </div>
    </a>
</div>    
<div class="col-xs-3 index_div_item">
    <a href="#">
        <div class="well" id="item2">
            <h1 class="h1_item"><span class="titre_item">Title</span></h1>
            <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-stats"></span></h2>
            <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
        </div>  
    </a>
</div>    
<div class="col-xs-3 index_div_item">
    <a href="#">
        <div class="well" id="item3">
            <h1 class="h1_item"><span class="titre_item">Title</span></h1>
            <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-send"></span></h2>
            <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
        </div>
    </a> 
</div>  
<div class="col-xs-3 index_div_item">
    <a href="#">
        <div class="well" id="item4">
            <h1 class="h1_item"><span class="titre_item">Title</span></h1>
            <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-cog"></span></h2>
            <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>                
        </div>  
    </a>  
</div>

css:

    .row-eq-height{
    overflow: hidden; 
}

.row-eq-height > [class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

You can check a demo here.

Upvotes: 0

Luis González

Reputation: 3559

I think that the paulalexandru's answer is quite good. I would only add some code to avoid troubles when the window is resized. If the div with the biggest height contains a photo, you could have troubles when the width of the image changes because it will change it's height also, so in this case you should deal with resizeevent.

$( document ).ready(function() {
    toAdapt();
    window.onresize=function(){toAdapt};       

});


function  toAdapt(){
    var heights = $(".well").map(function() {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".well").height(maxHeight);
}

Upvotes: 0

Nirav Varma

Reputation: 39

I had same kind of situation wherein each column within a row should be of same height. By considering above answers and with little trick, it was easy to implement and resolve the issue of window resize also.

$(document).ready(function() {
    //Initiate equalize on load
    equalize();
});

//Equalize on resizing of window
$(window).resize(function() {
    removeHeights();
    equalize();
});

function equalize(){

    $(".container .row").each(function() {
        var heights = $(this).find("p").map(function() {
          return $(this).height();
        }).get(),

        maxHeight = Math.max.apply(null, heights);

      $(this).find("p").height(maxHeight);

    });
}

function removeHeights(){

    $(".container .row").each(function() {

      $(this).find("p").height("auto");

    });
}

Check the demo here - https://jsfiddle.net/3Lam7z68/ (Resize the output pane to see the each div column size's changing)

Upvotes: 2

Beakie

Reputation: 1999

I'm a bit late to the game, but....

This will align the heights of items in a row with a class of "row-height-matched". It matches the cells based on their top value so if they move underneath each other when the page gets smaller, I don't set the height.

I know there are a number of CSS versions out there, but all of them break my layout design.

$(window).resize(function () {
    var rows = $(".row.row-height-matched");

    rows.each(function () {
        var cells = $(this).children("[class^='col-']");

        cells.css("height", "");

        var j = [];

        cells.each(function () {
            j.push($(this).offset().top);
        });

        var u = $.unique($(j));

        u.each(function () {
            var top = $(this)[0];

            var topAlignedCells = cells.filter(function () {
                return $(this).offset().top == top;
            })

            var max = 0;

            topAlignedCells.each(function () {
                max = Math.max(max, $(this).height());
            })

            topAlignedCells.filter(function () {
                return $(this).height() != max;
            }).height(max);
        })

    })
})

Upvotes: 0

Omar Gonzales

Reputation: 4008

To have same columns height and not breaking responsiveness, you should try this:

https://github.com/liabru/jquery-match-height

It uses "JQuery". Until now, for me, It is the simpliest solution out there.

Upvotes: 1

maxime1992

Reputation: 23793

EDIT 1 : I had to help someone with that so i made a plunkr. Go to "script.js" and comment "bootstrap_equalizer();" function to see original bootstrap, without same height columns.

I know this is a bit late but i'm sure that could improve your code and help some others ! :)

As i'm used to work with Foundation 5, when i have to work with bootstrap i miss the "equalizer".

I make a little function to call on pages where you have to "Equalize" some columns. My code is based on @paulalexandru response !

function bootstrap_equalizer() {
  $(".equalizer").each(function() {
    var heights = $(this).find(".watch").map(function() {
      return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".watch").height(maxHeight);
  });
}

On html side, you just need to do this :

<div class="container">
   <div class="row equalizer">
      <div class="watch">
         Column 1
      </div>

      <div class="watch">
         Column 2
      </div>
   </div>
</div>

column 1 & column 2 will have same height ! You can of course have more than 2 columns !

Hope this can help ! =)

Upvotes: 5

Prescient

Reputation: 1061

paulalexandru has a great answer that I used to solve my issue. However it doesn't address the problem that occurred for me when I resized the window. Sometimes the text would extend past the height specified and bleed into text in the row below.

So I added a second function that would detect the window resize, reset the height to auto and then set the height on the div if greater than 967. The 967 number can be changed to whatever number you wish to use when responsive brings everything down to just one column.

$(window).resize(function () {

        // reset height to auto.
        $(".div-name1").height("auto");  
        $(".div-name1").height("auto");            

        // check if the width is greater than 967 under 967 responsive switches to only 1 column per row
        if ($(window).width() > 967) {
            // resize the height
            myresize1(".row-name1", ".div-name-row1");
            myresize1(".row-name2", ".div-name-row2");
         }

            function myresize1(name1, name2) {
                $(name1).each(function () {
                    var heights = $(this).find(name2).map(function () {
                        console.log($(this).height() + " - ");
                        return $(this).height();
                    }).get(),

                    maxHeight = Math.max.apply(null, heights);
                    console.log(maxHeight + " - ");
                    $(name2).height(maxHeight);
                });
            };            
    });

Upvotes: -1

FourLeafCleaver

Reputation: 81

FYI - I did this to solve my issue to include responsive breakpoints which match the breakpoints in bootstrap. (I use LESS variables from bootstrap to synchronise the breakpoints but below is the compiled css version)

@media (min-width: 0px) and (max-width: 767px) {
  .fsi-row-xs-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .fsi-row-sm-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .fsi-row-md-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 1200px) {
  .fsi-row-lg-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}

then added the classes to the parent which were required.

<div class="row fsi-row-lg-level fsi-row-md-level">
<div class="col-sm-4">column 1</div>
<div class="col-sm-4">column 2</div>
<div class="col-sm-4">column 3</div>
</div>

Upvotes: 8

Antônio Medeiros

Reputation: 3268

Bootstrap's experiment, as mentioned by @cvrebert, works for me on Microsoft Internet Explorer (version 11) and Mozilla Firefox (version 37), but does not work for me on Google Chrome (version 42, 64-bit).

Inspired by @cvrebert's and @Maxime's answers, I came up with this solution, that works for me on those three browsers. I decided to share it, so maybe others can use it too.

Suppose you have something like this in your HTML:

<div class="row row-eq-height">
    <div class="col-eq-height col-xs-3">
        Your content
    </div>
    <div class="col-eq-height col-xs-3">
        Your content
    </div>
    <div class="col-eq-height col-xs-3">
        Your content
    </div>
    <div class="col-eq-height col-xs-3">
        Your content
    </div>
</div>

Add this to your JS:

$(document).ready(function() {
    $(".row-eq-height").each(function() {
        var heights = $(this).find(".col-eq-height").map(function() {
            return $(this).outerHeight();
        }).get(), maxHeight = Math.max.apply(null, heights);

        $(this).find(".col-eq-height").outerHeight(maxHeight);
    });
});

It uses jQuery's .outerHeight() function to calculate and set the inner div's heights.

Also, I added this to my CSS, I'm not sure if this helps, but it surely does not hurt:

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

Upvotes: 1

cvrebert

Reputation: 9259

There was at one point an official experimental example of same-height columns using CSS flexbox with Bootstrap. Here's the gist of it:

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

And then use <div class="row row-eq-height"> instead of <div class="row">.

Note that flexbox isn't supported in IE<10.

Upvotes: 21

meena

Reputation: 199

To make the website responsive you should specify the width in % and to display 4 divs with same height and specify height

.col-md-3 {
    width:25%;
    height:250px;
}

.row {
    width:100%;
}

Upvotes: -2

shan

Reputation: 78

For all the div's to have the same height you have to specfy a fixed height for the inner div (div class="well"),

CSS

.index_div_item{
    display: block;
    height: 400px;
}

.index_div_item a .well{
    height: 400px;
}

You can follow this link demo for example.

Upvotes: 0

Same height column bootstrap 3 row responsive

Answers (16)

1. By using table layout mechanism

Demo - JS Fiddle

2. Match Media Js

Demo link - here

Related Questions