Patrick Gregorio Patrick Gregorio - 2 months ago 8
HTML Question

Bootstrap to have columns with same height

I have 2 columns in a page using Bootstrap but one column is larger than the other one. What I want to do is have both columns be the same height so that I can align the contents of the shorter column at the bottom.

I've read a couple approaches like

margins
,
flexbox
, and
tables
.

I tried
flexbox
and it works for bigger screen sizes but when I go to mobile sizes the columns do not get stacked like they used to before I added flexbox styling on them. The margins I haven't tried yet because it feels a little hacky for me. The tables - I don't know, I just don't like using tables for layout in general.

Here a Fiddle if you want to take a stab at it.

HTML



<div class="container">
<div class="row">
<div class="col-md-4">
<div class="col-md-12">
<h4 class="search-header bold">Deadline</h4>
<div class="form-group">
<label for="select-deadline" class="control-label">Deadline Type</label>
<select name="deadline" id="select-deadline" class="form-control">
<option value="">Upcoming</option>
<option value="" selected="selected">Sponsor</option>
<option value="">Internal</option>
</select>
</div>
<div class="form-group">
<label for="input-days" class="control-label">Due Within How Many Days?</label>
<input type="text" class="form-control" id="input-days" />
</div>
<div class="divider bold italic"><span class="divider-line">&mdash;</span> or <span class="divider-line">&mdash;</span></div>
<div class="form-group">
<label for="input-date" class="control-label">Last Day to Search</label>
<input type="text" class="form-control" id="input-date" />
</div>
</div>
</div>
<div class="col-md-8">
<div class="col-md-12 action-btn-container">
<button type="button" class="btn btn-default btn-action">Clear All</button>
<button type="button" class="btn btn-default btn-action">Search</button>
</div>
</div>
</div>
</div>


CSS



.action-btn-container {
text-align: right;
}


UPDATE:



Here's a Fiddle with how I tried to solve the problem using
flexbox
.

Answer

I tried flexbox and it works for bigger screen sizes but when I go to mobile sizes the columns do not get stacked like they used to before I added flexbox styling on them.

An initial setting of a flex container is flex-wrap: nowrap.

This means that, by default, the child elements ("flex items") will be forced to stay in a single line regardless of screen size.

If you want the columns to stack vertically on smaller screens, add this to the container:

flex-wrap: wrap