CODEWITHSUNDEEP
htmlcsstwitter-bootstrapmultiple-columns
Blease
Blease

Reputation: 1420

Bootstrap - Make a column 100% the height of the row

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;
}

Upvotes: 2

Views: 2029

Answers (2)

Catto
Catto

Reputation: 6419

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!

Upvotes: 2

kburlz
kburlz

Reputation: 606

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/

Upvotes: 2

Related Questions