CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
WeAreRight
WeAreRight

Reputation: 905

bootstrap thumbnail buttons not aligning properly

I am using bootstrap thumbnails on my page from here.

 <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>

All this thumbnail have varying content in paragraph i.e in "<p>...</p>". This give rise to problem of aligning the below buttons. Some buttons moving up and some down. I tried with "<br/>" tags but they don't work and showing different results on different browser.

Note : There are total 8 thumbnails. 4 in upper row and 4 row it.

Upvotes: 1

Views: 204

Answers (7)

Vinod Kumar Kashyap
Vinod Kumar Kashyap

Reputation: 103

simply put the width of p tag

<p style="width:some width">...</p>

Upvotes: 0

hameeda naz
hameeda naz

Reputation: 287

You need to add min-height and max-height on your image and paragraph tag, so they all take similar spaces, then all your button will be align perfectly.

Upvotes: 0

neophyte
neophyte

Reputation: 6624

You can achieve it using a min-height to the p tag and the min height should be more than the height of the maximum caption content ---

working example

.p_info {
  min-height: 330px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>



<div class="col-sm-12 col-md-12">
  <div class="thumbnail col-sm-3 col-md-3">
    <img src="..." alt="...">
    <div class="caption">
      <h3>Thumbnail label</h3>
      <p class="p_info">...Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
      <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
    </div>
  </div>

  <div class="thumbnail col-sm-3 col-md-3">
    <img src="..." alt="...">
    <div class="caption">
      <h3>Thumbnail label</h3>
      <p class="p_info">...Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
      <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
    </div>
  </div>
  <div class="thumbnail col-sm-3 col-md-3">
    <img src="..." alt="...">
    <div class="caption">
      <h3>Thumbnail label</h3>
      <p class="p_info">...Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
      <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
    </div>
  </div>


  <div class="thumbnail col-sm-3 col-md-3">
    <img src="..." alt="...">
    <div class="caption">
      <h3>Thumbnail label</h3>
      <p class="p_info">...Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
      <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
    </div>
  </div>

  <div class="thumbnail col-sm-3 col-md-3">
    <img src="..." alt="...">
    <div class="caption">
      <h3>Thumbnail label</h3>
      <p class="p_info">...Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
      <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
    </div>
  </div>

  <div class="thumbnail col-sm-3 col-md-3">
    <img src="..." alt="...">
    <div class="caption">
      <h3>Thumbnail label</h3>
      <p class="p_info">...Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
      <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
    </div>
  </div>
  <div class="thumbnail col-sm-3 col-md-3">
    <img src="..." alt="...">
    <div class="caption">
      <h3>Thumbnail label</h3>
      <p class="p_info">...Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
      <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
    </div>
  </div>
  <div class="thumbnail col-sm-3 col-md-3">
    <img src="..." alt="...">
    <div class="caption">
      <h3>Thumbnail label</h3>
      <p class="p_info">...Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit....Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit
        non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit....Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula
        ut id elit.</p>
      <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
    </div>
  </div>
</div>

Upvotes: 2

Alfin Paul
Alfin Paul

Reputation: 1621

.caption p { 
    height: 42px; /*set the height*/
    overflow: hidden;
    text-overflow: ellipsis; 
    white-space: nowrap;
}

Upvotes: 0

Satheesh Kumar
Satheesh Kumar

Reputation: 2293

Just define the height to the <p>first child and set property overflow:scroll.

here is the example jsfiddle demo

Upvotes: 1

Coder 47
Coder 47

Reputation: 43

you can use 

<div class="col-sm-6 col-md-4 col-md-offset-3">

to align buttons to specific positions i suggest you to put buttons in different row

Upvotes: 0

user4732515
user4732515

Reputation:

Try to add this inline style to the buttons

style='vertical-align: bottom;'

Upvotes: 0

Related Questions