How do I create a series of images?
I need to change my design to have 7 boxes in one line. Each box will have a picture and a caption below it. I need to have certain left and right margins similar to the following:
My images
img1 img2 img3 img4 img5 img6 img7
c1 c2 c3 c4 c5 c6 c7
code
<h3>My Images</h3>
<div class="row">
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
<p>C1</p>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
<p>C2</p>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
<p>C3</p>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
<p>C4</p>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
<p>C5</p>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
<p>C6</p>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
<p>C7</p>
</div>
</div>
source to share
Using col-xs-3
will only allow you to have 4 columns per row (since the grid only has 12 columns).
Since you want each column on a separate row on additional small screens (mobile screens or screens xs
), use col-xs-12
and col-sm-1
. This would mean that each div takes up 12
columns on screen xs
and 1
on screens sm
and above.
<div class="col-xs-12 col-sm-1">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
<p>C1</p>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-1">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
<p>C1</p>
</div>
<div class="col-xs-12 col-sm-1">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
<p>C2</p>
</div>
<div class="col-xs-12 col-sm-1">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
<p>C3</p>
</div>
<div class="col-xs-12 col-sm-1">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
<p>C4</p>
</div>
<div class="col-xs-12 col-sm-1">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
<p>C5</p>
</div>
</div>
</div>
source to share
It seems like you really want a seven column design. Fortunately, Bootstrap is very customizable and they have a nice user interface for creating your own assembly . Once you have a seven-column grid (or let's say you simplify yourself, come up with 1 more image and share the trade-off with an 8-column grid), then use col-xs-8 col-sm-1
which will make the 8-column images wide (mostly full width) on additional small screens and 1 column wide (about 1/8 of the width) on small screens.
source to share