How to create bootstrap columns in a list of bootstrap thumbnails

Question

I'm not sure if bootstrap thumnails are the best component to use here, so if there is someone who can suggest something else please do. Here is what I want - a list of items that look something like this in a column that will represent results returned from the server. But when I add 4 columns inside the thumbnail the text and column divs don't fit into the thumbnails seen in the second pic. My code is below the pics.

<style>
.thumbnail .col-lg-3 {
    border: 1px solid red;
    
}
.searchResults {
        height: 85%;
        border: 1px solid green;
        overflow-y: scroll
    }
</style>

<div class="searchResults col-lg-12 col-xs-12 col-sm-12">
  <div class="thumbnail">
    <div class="col-lg-3">
      <h3>Thumbnail label</h3>
      <p>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>
    </div>
    <div class="col-lg-3">
      <h3>Thumbnail label</h3>
      <p>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>
    </div>
    <div class="col-lg-3">
      <h3>Thumbnail label</h3>
      <p>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>
    </div>
    <div class="col-lg-3">
      <h3>Thumbnail label</h3>
      <p>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>
    </div>
  </div>

  <div class="thumbnail">
    <div class="col-lg-3">
      <h3>Thumbnail label</h3>
      <p>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>
    </div>
    <div class="col-lg-3">
      <h3>Thumbnail label</h3>
      <p>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>
    </div>
    <div class="col-lg-3">
      <h3>Thumbnail label</h3>
      <p>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>
    </div>
    <div class="col-lg-3">
      <h3>Thumbnail label</h3>
      <p>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>
    </div>
  </div>
</div>

Adding the class row to your thumbnail <div> should fix it for you. — Chris Yongchu
– Chris Yongchu, Commented Aug 28, 2015 at 3:25

Chris Yongchu · Accepted Answer · 2015-08-28 03:30:30Z

1

Per Boostrap

Use rows to create horizontal groups of columns.

That being said, you can just add the class of row to your existing <div class="thumbnail"> div.

It should look something like this:

<div class="thumbnail row">
  <div class="col-lg-3">
    ...
  </div>
  <div class="col-lg-3">
    ...
  </div>  
  <div class="col-lg-3">
    ...
  </div>  
  <div class="col-lg-3">
    ...
  </div>  
</div>

Here's a fiddle demo for you to review. http://jsfiddle.net/9ndyzzaf/

answered Aug 28, 2015 at 3:30

Chris Yongchu

7893 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

chuckd Over a year ago

Thanks but I have some css that sets the row class to a height: 100%, so when I use thumbnail row as a class the thumbnail gets set to the entire height of the surrounding div. how can I override this for your answer so that the thumbnail becomes its default height?

chuckd Over a year ago

also I don't want to set a specific height like 300px because I want the thumbnail to be somewhat responsive when I resize.

Chris Yongchu Over a year ago

.thumbnail { height: auto !important; }, that will overwrite your row class height value. I don't want to set a specific height like 300px because I want the thumbnail to be somewhat responsive when I resize. Why not just use padding or use bootstraps img-responsive class for the <img> tag. getbootstrap.com/css/#images-responsive

Chris Yongchu Over a year ago

If you don't want to use !important, you can also specify it this way .thumbnail.row { height: auto; }.

chuckd Over a year ago

what would be the difference between using !important and not? and I think I will use 'img-responsive' when I insert an image into the thumbnail, but I haven't done that yet. Isn't 'img-responsive' only for images?

|

Collectives™ on Stack Overflow

How to create bootstrap columns in a list of bootstrap thumbnails

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related