CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
JonThecomputer
JonThecomputer

Reputation: 9

Can't align bootstrap containers next to each other

I want them to float left next to each other. I don't get why they won't. I've tried everything including trying to reduce the margin to 10px. What could be the problem? I need a row of 3 containers aligned floating from left. 

<div class="row">
  <div class="col-sm-6 col-xs-12">

    <div class="thumbnail">
      <img src="includes/sample.png" alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Buy!</a> 
        </p> </div> </div> 




    <div class="thumbnail">
      <img src="includes/sample.png" alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Buy!</a>
        </p> </div> </div>


    <div class="thumbnail">
      <img src="includes/sample.png" alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Buy!</a>
        </p> </div> </div>

</div>
</div>

Here is my custom CSS 

.thumbnail {
    float:left;
    margin: 0px;
}

and here is the result:

enter image description here

Upvotes: 0

Views: 354

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362430

Use the Bootstrap grid. Since you want 3 columns, use col-sm-4 which spans 4 of the 12 columns across (12/4 = 3). Then you won't need the extra CSS to float the .thumbnail.

http://www.codeply.com/go/UoRlotGrut

<div class="row">
        <div class="col-sm-4 col-xs-12">
            <div class="thumbnail">
                <img src="includes/sample.png" alt="...">
                <div class="caption">
                    <h3>Thumbnail label</h3>
                    <p>...</p>
                    <p><a href="#" class="btn btn-primary" role="button">Buy!</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-4 col-xs-12">
            <div class="thumbnail">
                <img src="includes/sample.png" alt="...">
                <div class="caption">
                    <h3>Thumbnail label</h3>
                    <p>...</p>
                    <p><a href="#" class="btn btn-primary" role="button">Buy!</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-4 col-xs-12">
            <div class="thumbnail">
                <img src="includes/sample.png" alt="...">
                <div class="caption">
                    <h3>Thumbnail label</h3>
                    <p>...</p>
                    <p><a href="#" class="btn btn-primary" role="button">Buy!</a>
                    </p>
                </div>
            </div>
        </div>
    </div>

Upvotes: 2

APAD1
APAD1

Reputation: 13666

Just create another row within the parent column and then add 3 columns in that row(spanning 4 each)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-sm-6 col-xs-12">
     <div class="row">
        <div class="col-sm-4">
           <div class="thumbnail">
              <img src="includes/sample.png" alt="...">
              <div class="caption">
                 <h3>Thumbnail label</h3>
                 <p>...</p>
                 <p><a href="#" class="btn btn-primary" role="button">Buy!</a> 
                 </p>
              </div>
           </div>
        </div>
        <div class="col-sm-4">
           <div class="thumbnail">
              <img src="includes/sample.png" alt="...">
              <div class="caption">
                 <h3>Thumbnail label</h3>
                 <p>...</p>
                 <p><a href="#" class="btn btn-primary" role="button">Buy!</a>
                 </p>
              </div>
           </div>
        </div>
        <div class="col-sm-4">
           <div class="thumbnail">
              <img src="includes/sample.png" alt="...">
              <div class="caption">
                 <h3>Thumbnail label</h3>
                 <p>...</p>
                 <p><a href="#" class="btn btn-primary" role="button">Buy!</a>
                 </p>
              </div>
           </div>
        </div>
     </div>
  </div>
</div>

Upvotes: 0

Related Questions