Bootstrap has classes to make images look better on our web page. These images can be rounded, circle and thumbnails. img-responsive class is used to make image responsive for all screen sizes always use this class for images.
For more on images please refer to official docs.
For more on images please refer to official docs.
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>My Website</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>
<!-- container class of bootstrap make the content of the page centralised -->
<div class="container">
<!-- img-responsive class make the image responsive on all screen sizes. Caption class is used to give a caption to a image-->
<!-- image using img-rounded starts-->
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<img src="img/dog.jpg" alt="" class="img-rounded img-responsive" width="250" />
<div class="caption">
<h4>img-rounded class makes the corners of the image rounded.</h4>
</div>
</div><!-- rounded images ends here -->
<!--image using img-circle starts-->
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<img src="img/dog.jpg" alt="" class="img-circle img-responsive" width="250" />
<div class="caption">
<h4>img-circle class makes a circle around the image.</h4>
</div>
</div><!-- img-circle ends here -->
<!--image using img-thumbnail-->
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<img src="img/dog.jpg" alt="" class="img-thumbnail img-responsive" width="250" />
<div class="caption">
<h4>img-thumbnail class makes image look like a thumbnail.</h4>
</div>
</div><!-- img-thumbnail 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>My Website</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>
<!-- container class of bootstrap make the content of the page centralised -->
<div class="container">
<!-- img-responsive class make the image responsive on all screen sizes. Caption class is used to give a caption to a image-->
<!-- image using img-rounded starts-->
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<img src="img/dog.jpg" alt="" class="img-rounded img-responsive" width="250" />
<div class="caption">
<h4>img-rounded class makes the corners of the image rounded.</h4>
</div>
</div><!-- rounded images ends here -->
<!--image using img-circle starts-->
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<img src="img/dog.jpg" alt="" class="img-circle img-responsive" width="250" />
<div class="caption">
<h4>img-circle class makes a circle around the image.</h4>
</div>
</div><!-- img-circle ends here -->
<!--image using img-thumbnail-->
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<img src="img/dog.jpg" alt="" class="img-thumbnail img-responsive" width="250" />
<div class="caption">
<h4>img-thumbnail class makes image look like a thumbnail.</h4>
</div>
</div><!-- img-thumbnail 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