CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user5563999
user5563999

Reputation:

Bootstrap grid going vertical instead of Horizontal

I am probably doing this completely wrong but from my understanding I think I am on the right path.

I am trying to make my image grid go side by side in a Horizontal line but instead it's going vertical all the way down my page.

Here's the current code I am using.

<div class="row">
    <div class="col-md-3">
        <img src="http://i.imgur.com/SLUyAtG.png" alt="1" height="150" width="150">
        <img src="http://i.imgur.com/SLUyAtG.png" alt="2" height="150" width="150">
        <img src="http://i.imgur.com/SLUyAtG.png" alt="3" height="150" width="150">
        <img src="http://i.imgur.com/SLUyAtG.png" alt="4" height="150" width="150">
    </div>
</div>

Upvotes: 2

Views: 3563

Answers (4)

Lal
Lal

Reputation: 14810

The images are going down because, it is the actual behaviour of col-md-3 bootstrap class. The col-md-3 doesnt have the size to contain all the four images and thus it goes down.

if you want the images to be horizontally aligned, you have to rewrite your html as

<div class="row">
    <div class="col-md-3">
        <img src="http://i.imgur.com/SLUyAtG.png" alt="1" height="150" width="150">
    </div>
    <div class="col-md-3">
        <img src="http://i.imgur.com/SLUyAtG.png" alt="2" height="150" width="150">
    </div>
    <div class="col-md-3">
        <img src="http://i.imgur.com/SLUyAtG.png" alt="3" height="150" width="150">
    </div>
    <div class="col-md-3">
        <img src="http://i.imgur.com/SLUyAtG.png" alt="4" height="150" width="150">
    </div>
</div>

See the fiddle

Upvotes: 2

arinh
arinh

Reputation: 206

You can also create an inline list inside a larger column. Which has padding in between each list item. This provides a nicer look.

http://codepen.io/anon/pen/vNboJz

  <div class="row">
    <div class="col-md-12">
      <ul class="list-inline">
        <li>
          <img src="http://i.imgur.com/SLUyAtG.png" alt="1" height="150" width="150">
        </li>
        <li>
          <img src="http://i.imgur.com/SLUyAtG.png" alt="2" height="150" width="150">
        </li>
        <li>
          <img src="http://i.imgur.com/SLUyAtG.png" alt="3" height="150" width="150">
        </li>
        <li>
          <img src="http://i.imgur.com/SLUyAtG.png" alt="4" height="150" width="150">
        </li>
      </ul>
    </div>
  </div>

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122087

Try this 

<div class="row">
    <div class="col-md-3">
        <img src="http://i.imgur.com/SLUyAtG.png" alt="1" height="150" width="150">
    </div>
    <div class="col-md-3">
        <img src="http://i.imgur.com/SLUyAtG.png" alt="1" height="150" width="150">
    </div>
    <div class="col-md-3">
        <img src="http://i.imgur.com/SLUyAtG.png" alt="1" height="150" width="150">
    </div>
    <div class="col-md-3">
        <img src="http://i.imgur.com/SLUyAtG.png" alt="1" height="150" width="150">
    </div>
</div>

Upvotes: 0

service-paradis
service-paradis

Reputation: 3398

You want to take all horizontal space having a grid of four images. So you basically want 4 columns. Since twitter-bootstrap is based on a grid of 12, every column should take 3.

Your row should look like this:

<div class="row">
    <div class="col-md-3">
        <img src="http://i.imgur.com/SLUyAtG.png" alt="1" height="150" width="150">
    </div>
    <div class="col-md-3">
        <img src="http://i.imgur.com/SLUyAtG.png" alt="2" height="150" width="150">
    </div>
    <div class="col-md-3">
        <img src="http://i.imgur.com/SLUyAtG.png" alt="3" height="150" width="150">
    </div>
    <div class="col-md-3">
        <img src="http://i.imgur.com/SLUyAtG.png" alt="4" height="150" width="150">
    </div>
</div>

Upvotes: 1

Related Questions