2

I'm using Bootstrap version 3.3.7 How can I make the Bootstrap button to equal height columns with button at the bottom? I've found some solution is targeting the row or col class to make it same height. But can I do the same result without targeting the Bootstrap row and col? Rather than targeting the row and col class or using position:absolute, can I make the same result using some others CSS way? Maybe clearfix? clear:both? overflow? display:table-cell? or display: flex?

/* Can I do the same result without using position:absolute? */
@media only screen and (min-width: 990px) {
button.btn.btn-success {
 position: absolute;
 top: 100px;
 left: 15px;
 margin: 20px 0;
}
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript" ></script>

<div class="container">
 <div class="row">
  <div class="col-md-4">
   <p>expetendis illum vidisse laboris officia sint philosophari ab laboris nescius</p>
   <div class="clearfix">
    <button class="btn btn-success">Button</button>
   </div>
  </div>

  <div class="col-md-4">
   <p>ea pariatur laborum nulla quae sunt mandaremus laborum et pariatur legam velit adipisicing amet o admodum magna nescius noster noster</p>
   <div class="clearfix">
    <button class="btn btn-success">Button</button>
   </div>
  </div>

  <div class="col-md-4">
   <p>pariatur non varias ex ea sunt voluptatibus ingeniis summis doctrina transferrem incurreret nostrud officia proident magna do qui distinguantur fidelissimae familiaritatem lorem elit nescius enim litteris litteris iis enim cohaerescant</p>
   <div class="clearfix">
    <button class="btn btn-success">Button</button>
   </div>
  </div>
 </div>
</div>

<h3>despicationes quorum quamquam aliquip coniunctione distinguantur de imitarentur 
cohaerescant e incurreret hic officia noster cupidatat arbitrantur praesentibus 
praetermissum illustriora exquisitaque ea cillum incurreret tempor vidisse minim 
e a nisi mandaremus</h3>
Ace
  • 325
  • 1
  • 3
  • 13
  • Just curious, what's the reason not to use `position:absolute` on your button? And it's a very convenient way for using with `display:table-cell`? – Dhaval Jardosh May 24 '18 at 05:21

1 Answers1

0

You can try Flexbox. Use a custom class of yours i.e. flex and apply flex to .row and .col-* classes

Or you can upgrade to bootstrap4 as its fully based on Flexbox and very easy to align these kinds of layout with their flex-utilities classes.

.flex {
  display: flex;
}

.flex .col-xs-4 {
  display: flex;
  flex-direction: column;
}

.flex .col-xs-4 p {
  flex: 1;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>

<div class="container">
  <div class="row flex">
    <div class="col-xs-4">
      <p>expetendis illum vidisse laboris officia sint philosophari ab laboris nescius</p>
      <div class="clearfix">
        <button class="btn btn-success">Button</button>
      </div>
    </div>

    <div class="col-xs-4">
      <p>ea pariatur laborum nulla quae sunt mandaremus laborum et pariatur legam velit adipisicing amet o admodum magna nescius noster noster</p>
      <div class="clearfix">
        <button class="btn btn-success">Button</button>
      </div>
    </div>

    <div class="col-xs-4">
      <p>pariatur non varias ex ea sunt voluptatibus ingeniis summis doctrina transferrem incurreret nostrud officia proident magna do qui distinguantur fidelissimae familiaritatem lorem elit nescius enim litteris litteris iis enim cohaerescant</p>
      <div class="clearfix">
        <button class="btn btn-success">Button</button>
      </div>
    </div>
  </div>
</div>
Bhuwan
  • 16,525
  • 5
  • 34
  • 57
  • That's really cool! What about using clear:both or display:table-cell? I think I saw some example long time ago using this method but I can't find how exactly to do it. – Ace May 24 '18 at 05:03
  • @Ace see `clear:both` and `display:table-cell` are both different thing...no benefit to use them together...`clear:both` is used with `floats` and using `float` make element `display:block`...I don't think it is possible with `display:table-cell` or `clear:both`....another solution can be to follow the table structure... – Bhuwan May 24 '18 at 05:23
  • Alright, I got it. But I have another problem from my original answer, while I'm using CSS `position:absolute` there was a text overlay my new content. How can I fix it by using the `position:absolute` in this case? (See my updated question) – Ace May 24 '18 at 09:04
  • @Ace see thats the main problem with the `position:absolute` solution. you will need to control the `top` value based on the `col` content which is not a good practice...and for the temporary solution try to apply the `margin-top` to the `h3` like `margin-top:50px;` – Bhuwan May 24 '18 at 10:15