CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
senty
senty

Reputation: 12857

Push div to parent's bottom

I am using Bootstrap 3 and I have a row; inside that row I have 2 col divs. One of the col div is longer than the other one. What is the proper way of moving the second col, so they seem in position.

I don't want to use bottom: 15px or top: 22px or achieve it with margin because it will make me edit the @media stuff.

What is the proper way to handle such scenario?

<div class="row">
  <div class="col-xs-6">
    <h2>Hello</h2>
  </div>
    <div class="col-xs-6">
      <button type="button" class="btn">Button</button>
    </div>
</div>

https://jsfiddle.net/DTcHh/37950/

Expected:

enter image description here

More understandable with colors:

enter image description here

Upvotes: 0

Views: 88

Answers (2)

Phani Kumar M
Phani Kumar M

Reputation: 4590

Bootstrap applies a margin top of 20px for h2 elements. You can overwrite the margin top for the h2 element by defining a class.

.removeTopMargin {
   margin-top: 0px;
}
<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-6">
		<h2 class="removeTopMargin">Hello</h2>
	</div>
	<div class="col-xs-6">
		<button type="button" class="btn">World</button>
	</div>
</div>

Upvotes: 1

Adrian Cotter
Adrian Cotter

Reputation: 131

Your issue here is not the height of the column, but the differences in margins on the h2 tag compared to the button. So you could do something like this

h2:first-child {
    margin: 0;
    line-height: 34px;
}

The line-height would be there to get the alignment correctly with the height of the button... though this might cause other problems if the text were long and responsive. Alternatively, you could give the button whatever margin would be appropriate. Or you could have a column-first-child class.

You'd also have to account for whatever content variations you might have in either place.

Upvotes: 1

Related Questions