CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Marc-André Therrien
Marc-André Therrien

Reputation: 549

How to keep more than 1 image on the same line when resizing with bootstrap?

I am new to bootstrap. I got this code

<div class="row-fluid inline">
    <div class="img-responsive span2 p-10"><img src="http://imageshack.us/a/img823/3578/lnrk.jpg" alt="Responsive image"/></div>
    <div class="img-responsive span2 p-10"><img src="http://imageshack.us/a/img593/2931/5mzt.jpg" alt="Responsive image"/></div>
    <div class="img-responsive span2 p-10"><img src="http://imageshack.us/a/img841/6476/bk2j.jpg" alt="Responsive image"/></div>
    <div class="img-responsive span2 p-10"><img src="http://imageshack.us/a/img823/3578/lnrk.jpg" alt="Responsive image"/></div>
    <div class="img-responsive span2 p-10"><img src="http://imageshack.us/a/img593/2931/5mzt.jpg" alt="Responsive image"/></div>
    <div class="img-responsive span2 p-10"><img src="http://imageshack.us/a/img841/6476/bk2j.jpg" alt="Responsive image"/></div>
</div>
<br />
<div class="row-fluid inline">
    <div class="img-responsive span2 p-10"><img src="http://imageshack.us/a/img823/3578/lnrk.jpg" alt="Responsive image"/></div>
    <div class="img-responsive span2 p-10"><img src="http://imageshack.us/a/img593/2931/5mzt.jpg" alt="Responsive image"/></div>
    <div class="img-responsive span2 p-10"><img src="http://imageshack.us/a/img841/6476/bk2j.jpg" alt="Responsive image"/></div>
    <div class="img-responsive span2 p-10"><img src="http://imageshack.us/a/img823/3578/lnrk.jpg" alt="Responsive image"/></div>
    <div class="img-responsive span2 p-10"><img src="http://imageshack.us/a/img593/2931/5mzt.jpg" alt="Responsive image"/></div>
    <div class="img-responsive span2 p-10"><img src="http://imageshack.us/a/img841/6476/bk2j.jpg" alt="Responsive image"/></div>
</div>

It shows 2 rows of 6 columns/images. When I resize it to a certain point, it shows multiple rows of 1 image. Instead, I would like to have 4 rows of 3 images/columns. Is there a simple way to do this with bootstrap?

Upvotes: 0

Views: 572

Answers (1)

Guilherme
Guilherme

Reputation: 1146

That's because the display of the each image wrapper div is 'block', when you set to inline it gets the way you want. take alook: (breaking into the size you want with a different code - http://bootply.com/94383 ) (with the same code - http://bootply.com/94385)

Upvotes: 1

Related Questions