CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Sheldon
Sheldon

Reputation: 10077

How do I align the button to the bottom of the row/column in bootstrap?

I have row with 4 columns each with a heading and some text. Most of the columns have a similar amount of text and push the button in their column down to match the rest of the columns. However one column has less text and doesn't push the button down far enough.

enter image description here

Is there a way to align the button to the bottom of the row? I would like to achieve this and keep it responsive at the same time so it looks like this when the screen is smaller:

enter image description here

This is my markup of the page just now:

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <h2>Heading</h2>
      <p>text here</p>
      <p><a class="btn btn-default" href="#" role="button">View details >></a></p>
    </div>
    <div class="col-md-3">
      <h2>Heading</h2>
      <p>text here</p>
      <p><a class="btn btn-default" href="#" role="button">View details >></a></p>
    </div>
    <div class="col-md-3">
      <h2>Heading</h2>
      <p>less text here</p>
      <p><a class="btn btn-default more" href="#" role="button">View details >></a></p>
    </div>
    <div class="col-md-3">
      <h2>Heading</h2>
      <p>text here</p>
      <p><a class="btn btn-default" href="#" role="button">View details >></a></p>
    </div>
  </div>
</div>

Upvotes: 10

Views: 19554

Answers (3)

Tims
Tims

Reputation: 2007

There are several ways this can be done:

  • Give the containers a fixed height. This is not ideal as in order for it to look nice you will have to set different heights for each of the breakpoints.
    You will also need to set the button to position: absolute, bottom: 0 and add some bottom padding/margin.

  • Use some javascript to match the heights using something like match height. You will also need to set the positions as in the previous point.

  • Add an additional row and repeat your buttons within 4 new cols. Then show or hide your original buttons and the new ones using bootstraps responsive classes.

Upvotes: 4

Abe Hendlish
Abe Hendlish

Reputation: 727

Set an explicit height on col-md-3.

Upvotes: -1

A.B
A.B

Reputation: 20445

set min-height equals to something to the text containing div for example

.col-md-3{min-height:300px;}

Upvotes: 0

Related Questions