CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
chuckd
chuckd

Reputation: 14600

How to create bootstrap columns in a list of bootstrap thumbnails

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.

enter image description here

enter image description here

<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>

Upvotes: 0

Views: 505

Answers (1)

Chris Yongchu
Chris Yongchu

Reputation: 789

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/

Upvotes: 1

Related Questions