Bootstrap cells with equal height

Question

I have the following

<div class="row">
  <div class="col-md-6">
    <div class = "box-cell">
      <p>
        Slightly short text
      </p>
    </div>
  </div>
  <div class="col-md-6">
    <div class = "box-cell">
      <p>
        Text that<br>literally<br>spans<br>4 lines
      </p>
    </div>
  </div>
</div>

and css

.box-cell
{
    position:        relative;
    margin:          3px;
    border-style:    groove ridge ridge groove;
    border-width:    3px;
    background-size: cover;
}

So the problem that I am facing is that one of the cells is usually taller than the other.IS there any way for me to equalize how much height each cell takes up? Searching didn't yield me which property I can manipulate to get same height :(

Here is jsfiddle However in this fiddle I can not get them to be side by side to prove my point

EDIT: I guess I didn't specify it properly. I would like to have the borders be as tall as the tallest cell. So all the examples provided here actually take out the borders and instead color the background. If I do that then yes it gives illusion of every cell being the same, but I would like there to be a border of same height.

@Pytth I added jsfiddle however I can't get it to be side by side — Quillion, Dec 06 '17 at 00:57
you can expand the viewable area in jsfiddle by dragging the side of that panel. When I do that, I am able to get the items next to each other but it looks like they are both the same height. — Pytth, Dec 06 '17 at 01:01
This question has been asked before: [How can I make Bootstrap columns all the same height?](https://stackoverflow.com/a/19695851/6264196) — pattpass, Dec 06 '17 at 01:08

score 1 · Accepted Answer · answered Dec 06 '17 at 01:06

1

I tried replicating what it sounds like you are looking for.

I would recommend you mess around with flexbox since it seems to do exactly what you are looking for.

<div class="myc">
    <div class="col">
      <p>Text of some sorts</p>
      <p>Text of some sorts</p>
      <p>Text of some sorts</p>
      <p>Text of some sorts</p>

    </div>
    <div class="col">
      <p>Text of some sorts</p>
      <p>Text of some sorts</p>
      <p>Text of some sorts</p>

    </div>
  </div>

And for the CSS

.myc {
  display: flex;
}

.col {
  background-color: yellow;
  margin-right: 20px;
}

answered Dec 06 '17 at 01:06

Pytth

4,008
24
29

I would like to have the borders grow as tall instead of just background being colored. Additionally I have to use row and col provided by bootstrap because it is near perfect grid mthodology. – Quillion Dec 07 '17 at 18:07
Yea, I put the color there to just show the difference in height better. Bootstrap's grid is certainly great, but as you are seeing, it does have it's limits. Becoming familiar with Flexbox and the built-in CSS grid system would likely come in handy. Once you start using those technologies, I can almost guarantee you won't need to reach for bootstrap again for layout. – Pytth Dec 07 '17 at 22:03
I noticed that if I use `flex` then I end up having a very crappy layout on mobile. Is there a way to avoid that? – Quillion Dec 09 '17 at 02:19

score 1 · Answer 2 · answered Dec 06 '17 at 04:11

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}
.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<div class="row">
  <div class="col-xs-12 col-sm-4" style="background-color: green">
  some content
  </div>
  <div class="col-xs-6 col-sm-4" style="background-color: orange">
  some content
  <img src="http://placehold.it/100x120">
  </div>
  <div class="col-xs-6 col-sm-4" style="background-color: magenta">
  some of content
  </div>
</div>

Setting the background gives an illusion of every cell being same height, but I need the border to be same height, just setting background doesn't really accomplish much — Quillion, Dec 07 '17 at 18:09

score 1 · Answer 3 · answered Dec 06 '17 at 16:23

1

Some options to solve it: Different Tricks on How to Make Bootstrap Columns All the Same Height

answered Dec 06 '17 at 16:23

Kuzma

679
1
12
36

score 0 · Answer 4 · answered Dec 06 '17 at 09:24

<style type="text/css">
.box-cell{
    position:        relative;
    margin:          3px;
    border-style:    groove ridge ridge groove;
    border-width:    3px;
    background-size: cover;
}
</style>    
<div class="row">
  <div class="col-md-6">
    <div class = "box-cell">
      <p>
        Slightly short text
      </p>
    </div>
  </div>
  <div class="col-md-6">
    <div class = "box-cell">
      <p>
        <span>Text that</span>
        <span>literally</span>
        <span>s4 lines</span>
        <span>ygthfg</span>
      </p>
    </div>
  </div>
</div>

1- you need to add text in span tag. 2- Or take text in one line .

What does adding these spans even accomplish? – Quillion Dec 07 '17 at 18:06 — Quillion, Dec 07 '17 at 18:06

Bootstrap cells with equal height

4 Answers4