Thumbnail class is used to make the images look better. It can use to make various image galleries.
Requirements:
- Download bootstrap files from here
- Place them into your html templates folder or where you want to use.
- Basic knowledge of HTML, CSS and JAVASCRIPT.
*****SOURCE CODE*****
<!doctype html>
<html>
<!-- head starts here -->
<head>
<meta charset="utf-8">
<title>Thumbnail of Images</title>
<!-- bootstrap use this meta to make our web page responsive by calculating the device size -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap linking to our html page -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
</head><!-- head ends here -->
<body>
<!-- thumbnail class helps us to make the images look better. it can use for making various type of image gallery.-->
<!-- container class of bootstrap make the content of the page centralised -->
<div class="container" style="border: 3px groove; margin-top: 7px;">
<h1 style="color: green;">Image gallery using thumbnail class:</h1>
<!-- row 1 starts -->
<div class="row">
<!-- column 1 of row 1 starts -->
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
<!-- thumbnail div starts -->
<div class="thumbnail">
<img src="img/dog.jpg" alt="dog-img" class="img-responsive">
<!-- caption div for image starts-->
<div class="caption">
<p>Caption about image is here.</p>
<button class="btn btn-primary">Button</button>
<button class="btn btn-success">Button</button>
</div><!-- caption div for image ends-->
</div><!-- thumbnail div ends -->
</div><!-- column 1 ends here -->
<!-- column 2 of row 1 starts -->
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
<!-- thumbnail div starts -->
<div class="thumbnail">
<img src="img/dog.jpg" alt="dog-img" class="img-responsive">
<!-- caption div for image starts-->
<div class="caption">
<p>Caption about image is here.</p>
<button class="btn btn-primary">Button</button>
<button class="btn btn-success">Button</button>
</div><!-- caption div for image ends-->
</div><!-- thumbnail div ends -->
</div><!-- column 2 ends here -->
<!-- column 3 of row 1 starts -->
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
<!-- thumbnail div starts -->
<div class="thumbnail">
<img src="img/dog.jpg" alt="dog-img" class="img-responsive">
<!-- caption div for image starts-->
<div class="caption">
<p>Caption about image is here.</p>
<button class="btn btn-primary">Button</button>
<button class="btn btn-success">Button</button>
</div><!-- caption div for image ends-->
</div><!-- thumbnail div ends -->
</div><!-- column 3 ends here -->
<!-- column 4 of row 1 starts -->
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
<!-- thumbnail div starts -->
<div class="thumbnail">
<img src="img/dog.jpg" alt="dog-img" class="img-responsive">
<!-- caption div for image starts-->
<div class="caption">
<p>Caption about image is here.</p>
<button class="btn btn-primary">Button</button>
<button class="btn btn-success">Button</button>
</div><!-- caption div for image ends-->
</div><!-- thumbnail div ends -->
</div><!-- column 4 ends here -->
</div><!-- row 1 ends here -->
</div><!-- End Of div Container-->
<!-- javascript files of bootstrap. always include them at the bottom of the page this will improves the speed of our webpage-->
<!-- jquery file -->
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
<html>
<!-- head starts here -->
<head>
<meta charset="utf-8">
<title>Thumbnail of Images</title>
<!-- bootstrap use this meta to make our web page responsive by calculating the device size -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap linking to our html page -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
</head><!-- head ends here -->
<body>
<!-- thumbnail class helps us to make the images look better. it can use for making various type of image gallery.-->
<!-- container class of bootstrap make the content of the page centralised -->
<div class="container" style="border: 3px groove; margin-top: 7px;">
<h1 style="color: green;">Image gallery using thumbnail class:</h1>
<!-- row 1 starts -->
<div class="row">
<!-- column 1 of row 1 starts -->
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
<!-- thumbnail div starts -->
<div class="thumbnail">
<img src="img/dog.jpg" alt="dog-img" class="img-responsive">
<!-- caption div for image starts-->
<div class="caption">
<p>Caption about image is here.</p>
<button class="btn btn-primary">Button</button>
<button class="btn btn-success">Button</button>
</div><!-- caption div for image ends-->
</div><!-- thumbnail div ends -->
</div><!-- column 1 ends here -->
<!-- column 2 of row 1 starts -->
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
<!-- thumbnail div starts -->
<div class="thumbnail">
<img src="img/dog.jpg" alt="dog-img" class="img-responsive">
<!-- caption div for image starts-->
<div class="caption">
<p>Caption about image is here.</p>
<button class="btn btn-primary">Button</button>
<button class="btn btn-success">Button</button>
</div><!-- caption div for image ends-->
</div><!-- thumbnail div ends -->
</div><!-- column 2 ends here -->
<!-- column 3 of row 1 starts -->
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
<!-- thumbnail div starts -->
<div class="thumbnail">
<img src="img/dog.jpg" alt="dog-img" class="img-responsive">
<!-- caption div for image starts-->
<div class="caption">
<p>Caption about image is here.</p>
<button class="btn btn-primary">Button</button>
<button class="btn btn-success">Button</button>
</div><!-- caption div for image ends-->
</div><!-- thumbnail div ends -->
</div><!-- column 3 ends here -->
<!-- column 4 of row 1 starts -->
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
<!-- thumbnail div starts -->
<div class="thumbnail">
<img src="img/dog.jpg" alt="dog-img" class="img-responsive">
<!-- caption div for image starts-->
<div class="caption">
<p>Caption about image is here.</p>
<button class="btn btn-primary">Button</button>
<button class="btn btn-success">Button</button>
</div><!-- caption div for image ends-->
</div><!-- thumbnail div ends -->
</div><!-- column 4 ends here -->
</div><!-- row 1 ends here -->
</div><!-- End Of div Container-->
<!-- javascript files of bootstrap. always include them at the bottom of the page this will improves the speed of our webpage-->
<!-- jquery file -->
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
No comments:
Post a Comment