Image Grids

v3.x

Image grids juxtapose multiple images for comparison/contrast, creating a catalogue effect.

BBootstrap 3.x | Images




<div class="row image-grid">
	<div class="col-sm-4 col-md-4">
		<div class="panel panel-default">
			<div class="panel-body">
				<a href="" target="_blank">
					<img alt="" class="img-responsive center-block" src="https://unsplash.it/300/300">
				</a>
			</div>
			<div class="panel-footer">
				<i class="fa fa-camera-retro" aria-hidden="true"></i>
				Image caption
			</div>
		</div>
	</div>
	<div class="col-sm-4 col-md-4">
		<div class="panel panel-default">
			<div class="panel-body">
				<a href="" target="_blank">
					<img alt="" class="img-responsive center-block" src="https://unsplash.it/300/300">
				</a>
			</div>
			<div class="panel-footer">
				<i class="fa fa-camera-retro" aria-hidden="true"></i>
				Image caption
			</div>
		</div>
	</div>
	<div class="col-sm-4 col-md-4">
		<div class="panel panel-default">
			<div class="panel-body">
				<a href="" target="_blank">
					<img alt="" class="img-responsive center-block" src="https://unsplash.it/300/300">
				</a>
			</div>
			<div class="panel-footer">
				<i class="fa fa-camera-retro" aria-hidden="true"></i>
				Image caption
			</div>
		</div>
	</div>
</div>

Custom CSS

You may wish to set a bottom margin to the images with the following CSS.

View all custom Bootstrapr.io CSS
/* Adds margin bottom to the images NOT IN panels */
.image-grid img {
   margin-bottom: 1rem;
}