Bootstrap 4 thumbnail gallery

This will create a simple thumbnail gallery who respond on the width of the users screen.
Resize your screen to see the results.

Example:


First we have to setup Bootstrap and jquery, Putt this in your section:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

And off course the css:

.thumb{
  margin-top: 5px;
  margin-bottom: 5px;
}

And finally the bootstrap code, putt this in your BODY of your page:

<div class="container-fluid">
	<div class="row">

		<div class="col-lg-2 col-md-3 col-sm-4 col-6 thumb">
			<a class="thumbnail" href="#">
				<img class="img-thumbnail" src="http://scripts.friendsinwar.com/demo_scripts/FiW%20IG%20v1.0/images/uploads/view/cars_traffic_night_light.jpg" alt="HTML tutorial">
			</a>
		</div>
			
		<div class="col-lg-2 col-md-3 col-sm-4 col-6 thumb">
			<a class="thumbnail" href="#">
				<img class="img-thumbnail" src="http://scripts.friendsinwar.com/demo_scripts/FiW%20IG%20v1.0/images/uploads/view/clouds_sky_abstract.jpg" alt="HTML tutorial">
			</a>
		</div>

		<div class="col-lg-2 col-md-3 col-sm-4 col-6 thumb">
			<a class="thumbnail" href="#">
				<img class="img-thumbnail" src="http://scripts.friendsinwar.com/demo_scripts/FiW%20IG%20v1.0/images/uploads/view/code_coding_binary_code_abstract_patterns.jpg" alt="HTML tutorial">
			</a>
		</div>
			
		<div class="col-lg-2 col-md-3 col-sm-4 col-6 thumb">
			<a class="thumbnail" href="#">
				<img class="img-thumbnail" src="http://scripts.friendsinwar.com/demo_scripts/FiW%20IG%20v1.0/images/uploads/view/dark_patterns_background_circles.jpg" alt="HTML tutorial">
			</a>
		</div>
			
		<div class="col-lg-2 col-md-3 col-sm-4 col-6 thumb">
			<a class="thumbnail" href="#">
				<img class="img-thumbnail" src="http://scripts.friendsinwar.com/demo_scripts/FiW%20IG%20v1.0/images/uploads/view/dragon_classical_light_luster_surface_background.jpg" alt="HTML tutorial">
			</a>
		</div>
			
		<div class="col-lg-2 col-md-3 col-sm-4 col-6 thumb">
			<a class="thumbnail" href="#">
				<img class="img-thumbnail" src="http://scripts.friendsinwar.com/demo_scripts/FiW%20IG%20v1.0/images/uploads/view/dragon_pattern_neon_shadows.jpg" alt="HTML tutorial">
			</a>
		</div>
			
		<div class="col-lg-2 col-md-3 col-sm-4 col-6 thumb">
			<a class="thumbnail" href="#">
				<img class="img-thumbnail" src="http://scripts.friendsinwar.com/demo_scripts/FiW%20IG%20v1.0/images/uploads/view/face_paint_background.jpg" alt="HTML tutorial">
			</a>
		</div>
			
		<div class="col-lg-2 col-md-3 col-sm-4 col-6 thumb">
			<a class="thumbnail" href="#">
				<img class="img-thumbnail" src="http://scripts.friendsinwar.com/demo_scripts/FiW%20IG%20v1.0/images/uploads/view/flight_balloon_sky.jpg" alt="HTML tutorial">
			</a>
		</div>

		<div class="col-lg-2 col-md-3 col-sm-4 col-6 thumb">
			<a class="thumbnail" href="#">
				<img class="img-thumbnail" src="http://scripts.friendsinwar.com/demo_scripts/FiW%20IG%20v1.0/images/uploads/view/flower_background_dark_lines_shine.jpg" alt="HTML tutorial">
			</a>
		</div>
			
		<div class="col-lg-2 col-md-3 col-sm-4 col-6 thumb">
			<a class="thumbnail" href="#">
				<img class="img-thumbnail" src="http://scripts.friendsinwar.com/demo_scripts/FiW%20IG%20v1.0/images/uploads/view/minimalism_triangle_lines_shades.jpg" alt="HTML tutorial">
			</a>
		</div>
			
		<div class="col-lg-2 col-md-3 col-sm-4 col-6 thumb">
			<a class="thumbnail" href="#">
				<img class="img-thumbnail" src="http://scripts.friendsinwar.com/demo_scripts/FiW%20IG%20v1.0/images/uploads/view/rotation_light_background_dark.jpg" alt="HTML tutorial">
			</a>
		</div>
			
	</div>
</div>

You can download the complete code below:

Download: Bootstrap 4 thumbnail gallery
Clicks: 125, Filesize: 70 B, Date: 02 Sep. 2018


One thought on “Bootstrap 4 thumbnail gallery

Leave a Reply

Your email address will not be published. Required fields are marked *