How to vertically align a button below text of varying length using bootstrap grid system?

Question

I have problem placing a button below a thumbnail in bootstrap. This image below shows three thumbnails with a button below it. The buttons are not vertically aligned because of the text that appears between the three different thumbnails and buttons are having different lengths. current display Here is my code:

<div class="col-md-3">
    <div class="thumbnail" style="height: 400px;">
        <img style="width: 200px; height: 200px;" src="<?php echo base_url();?>assets/user_file/product/<?php echo $row->foto; ?>">
        <div class="caption">
            <center>
                <h3><?php echo $row->nama_prod; ?></h3>
                <strong><p>Rp.<?php echo $row->harga; ?>.-</p></strong>
                <a href="<?php echo base_url()?>/index.php/pesanan/pesan?id_product=<?php echo $row->id_product?>" class="btn btn-success"> Pesan</a>
            </center>
        </div>
    </div>
</div>

How could I fix this?

score 1 · Answer 1 · answered Dec 10 '16 at 16:32

1

hope this may helpful:

make thumbnail class as relative position:relative; then add position:absolute; top:auto; bottom:0; to <a> tag

answered Dec 10 '16 at 16:32

vishnu

2,848
3
30
55

yes its make the button in the same position, but out of the thumbnail box and little bit move to the right.. – Mochamad Ramdanny Lukman Dec 10 '16 at 16:56
add left:0; right:0 to the button to make it center, then add some px in the left (eg: left:10px;) that you need – vishnu Dec 10 '16 at 17:02

score 1 · Answer 2 · answered Dec 10 '16 at 17:29

Keep your image and caption in one row, and the link button in other row, like this:

<div class="col-md-3 text-center">
  <div class="thumbnail" style="height: 400px;">
    <div class="row">
      <img style="width: 200px; height: 200px;" src="<?php echo base_url();?>assets/user_file/product/<?php echo $row->foto; ?>">
      <div class="caption" style="height: 140px;">
          <h3><?php echo $row->nama_prod; ?></h3>
          <strong><p>Rp.<?php echo $row->harga; ?>.-</p></strong>
      </div>
    </div>
    <div class="row">
          <a href="<?php echo base_url()?>/index.php/pesanan/pesan?id_product=<?php echo $row->id_product?>" class="btn btn-success"> Pesan</a>
    </div>
  </div>
</div>

Set the "text-center" property to the alignment inside of the column. And the div class "caption" should have a height style.

score 0 · Answer 3 · edited May 23 '17 at 10:30

One way will be to use two rows like this.

<div class="row">
    <div class="col-md-3">
        <div class="thumbnail" style="height: 400px;">
            <img style="width: 200px; height: 200px;" src="<?php echo base_url();?>assets/user_file/product/<?php echo $row->foto; ?>">
            <div class="caption">
                <center>
                    <h3><?php echo $row->nama_prod; ?></h3>
                    <strong><p>Rp.<?php echo $row->harga; ?>.-</p></strong>
                </center>
            </div>
        </div>
    </div>
    <div class="col-md-3">...</div>
    <div class="col-md-3">...</div>
</div>
<div class="row">
    <div class="col-md-3">
        <a href="<?php echo base_url()?>/index.php/pesanan/pesan?id_product=<?php echo $row->id_product?>" class="btn btn-success"> Pesan</a>
    </div>
    <div class="col-md-3">...</div>
    <div class="col-md-3">...</div>
</div>

P.S:center tag is deprecated. Do not use it. Why is the <center> tag deprecated in HTML?

How to vertically align a button below text of varying length using bootstrap grid system?

3 Answers3