2

I have a row containing two columns, and I want for both cells in the row to be the same height. In the screenshot, the left cell is smaller than the right, thus I want that to be the same height as the row. The issue is that either one of the cells maybe larger than it's neighbour.

Example with blue line to indicate where the space should be made up: Screenshot of difference

The snippet of the row is:

<div class="row center-block">
    <div class="col-sm-4">
        <div class="well-menu">
            <ul class="nav">
                <li>
                    <a title="Home" href="/">Home</a>
                </li>
                <li>
                    <a title="Contact" href="#">Contact</a>
                </li>
                <li>
                    <a title="Parent Portal" href="#">Parent Portal</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="visible-xs-block padding-top-10"></div>
    <div class="col-sm-8">
        <div id="subscribe-box" class="well-menu">
            <form action="#">
                <div class="input-group">
                    <h3>Subscribe to our newsletter:</h3>
                    <input class="btn btn-lg" name="email" id="email" type="email" placeholder="Your Email" required>
                    <button class="btn btn-info btn-lg" type="submit">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>

Styling:

.well-menu {
  padding: 0 18px;
  line-height: 42px;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 7px;
  background-clip: padding-box;
  box-shadow: 0 1px 0px rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(0, 0, 0, 0.5);
}
.well-menu>.nav>li {
  float: left;
  margin: 0;
}
.well-menu>.nav>li:first-child>a{
  margin: 0 10px 0 0;
}
.well-menu>.nav>li:last-child>a{
  margin: 0 0 0 10px;
}
.well-menu>.nav>li>a{
  position: relative;
  display: inline;
  color: #DBDDDD;
  padding: 0;
  margin: 0 10px;
  background: transparent;
}
.well-menu > .nav > li > a:hover{
  color: #fff;
  text-decoration: none;
}
.well-menu>.nav>li:not(:first-child):before{
  display: inline-block;
  content: "\2022";
  float: left;
  margin: 0 2px;
  color:#DBDDDD !important;
}
Blease
  • 1,380
  • 4
  • 38
  • 64
  • 1
    possible duplicate of [How can I make Bootstrap columns all the same height?](http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height) – Max Novich May 20 '15 at 13:33
  • @MaksymStepanenko That hasn't worked, I've set the height of the nav list and `well-menu` to 100% too – Blease May 20 '15 at 13:42

2 Answers2

2

I think bootstrap has a row-eq-height class you can add to the containing div of those two columns.

EDIT: here's a link

http://getbootstrap.com.vn/examples/equal-height-columns/

kburlz
  • 606
  • 1
  • 4
  • 18
  • That hasn't worked for some reason, but I've updated my question and added in some CSS to see if it's clearer to what my issue is. – Blease May 20 '15 at 13:54
  • 1
    Also I'll just mention this... I 'm sure changing the framework for your project isn't realistic, but if there's any chance it is, I would use the Foundation framework instead of Bootstrap. It has an 'equalizer' that handles this exact problem. – kburlz May 20 '15 at 13:54
2

To make BootStrap Column the 100% height of the row

Add the follow code to the section:

 .row {
    display: table;
 }

.row [class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

this is a duplicate question and I'd like to give credit to popnoodles for teaching me how to accomplish this. Hope This Helps!

Community
  • 1
  • 1
Catto
  • 6,259
  • 2
  • 52
  • 55