Post
Ask Question

Bootstrap For Beginners - Part Six (Bootstrap Images)

Introduction

In this article we will learn about Bootstrap Images, style and shapes of images, by which we can create an interactive and responsive image gallery for web pages.

Bootstrap Image Shapes

By using the Bootstrap classes we can easily style images like making images round, cornered, or circular images, or we can give thumbnail effect on images. We have the following classes for image shapes.
  • Rounded Corners:The .img-rounded class used for adding rounded corners to an image.
  • Circle: The .img-circle class used for shaping the image to a circle.
  • Thumbnail: The .img-thumbnail class used for shaping the image to a thumbnail.
Example 1 : Bootstrap Image Shapes

In this example we will give different shapes of images using the above Bootstrap classes, we will put an image inside images folder where our html page exists. After that, we will give shapes on image: Rounded, Circle,or Thumbnail by using the following code.

Output: Bootstrap Image Shapes

Responsive Images

Responsive images automatically adjust to fit the size of the screen. In Bootstrap we can create responsive images by using .img-responsive class to the <img> tag. This class applies display: block; and max-width: 100%; height: auto; to the image, so that it scales nicely to fit the containing element.

Example 2: Responsive Images

In this example we will make responsive images using .img-responsive class. We will add four images and then apply responsive class by writing the following code.
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part6</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  9. </head>  
  10.   
  11. <body>  
  12.     <div class="container">  
  13.         <h3>Bootstrap Image Responsive</h3>  
  14.         <!--Bootstrap Image Responsive using class .img-responsive-->  
  15.         <h4>Layout1</h4>  
  16.         <img class="img-responsive" src="images/Layout.jpg" alt="Responsive" />  
  17.         <h4>Layout2</h4>  
  18.         <img class="img-responsive" src="images/Layout1.jpg" alt="Responsive1" />  
  19.         <h4>Layout3</h4>  
  20.         <img class="img-responsive" src="images/Layout2.jpg" alt="Responsive2" />  
  21.         <h4>Layout4</h4>  
  22.         <img class="img-responsive" src="images/Layout3.jpg" alt="Responsive3" />  
  23.     </div>  
  24.     <script src="js/jquery-2.1.4.min.js"></script>  
  25.     <script src="js/bootstrap.min.js"></script>  
  26. </body>  
  27.   
  28. </html>  
Output: Image Responsive



Output: Responsive Layout



Responsive Embeds

we can make the video or slideshow embedded in a web page responsive. The Bootstrap responsive embed classes can be applied directly to the <iframe>, <embed>, <video>, and <object> elements.

Example 3: Responsive Embeds

In this example we will create responsive video with two different aspect ratios (16:9 and 4:3) by using classes .embed-responsive-16by9 and .embed-responsive-4by3 to containing <div> element. Then we will add the .embed-responsive-item class to an <iframe> tag by writing the following code. The aspect ratio of an image describes the proportional relationship between its width and its height.
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part6</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  9. </head>  
  10.   
  11. <body>  
  12.     <div class="container">  
  13.         <h3>Bootstrap Image Responsive Embeds</h3>  
  14.         <!--aspect ratio 16:9 with .embed-responsive-16by9 -->  
  15.         <h4>Responsive Embeds aspect ratio 16:9</h4>  
  16.         <div class="embed-responsive embed-responsive-16by9">  
  17.             <!--Bootstrap Image Responsive Embeds using class .embed-responsive-item-->  
  18.             <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/watch?v=ejrwe7a6XIU"></iframe>  
  19.         </div>  
  20.         <br />  
  21.         <!--aspect ratio 4:3 with .embed-responsive-4by3 -->  
  22.         <h4>Responsive Embeds aspect ratio 4:3</h4>  
  23.         <div class="embed-responsive embed-responsive-4by3">  
  24.             <!--Bootstrap Image Responsive Embeds using class .embed-responsive-item-->  
  25.             <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/watch?v=ejrwe7a6XIU"></iframe>  
  26.         </div>  
  27.     </div>  
  28.     <script src="js/jquery-2.1.4.min.js"></script>  
  29.     <script src="js/bootstrap.min.js"></script>  
  30. </body>  
  31.   
  32. </html>  
Output: Bootstrap Image Responsive Embeds



Example 4 : Creating Image Gallery

Now we will create one more example for Image Gallery with Bootstrap's grid system and using .thumbnail class. In this we will create three rows inside each row and we will create four column with column number 3 and then inside each column we will put one image for creating image gallery by writing the following code.
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part6</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  9. </head>  
  10.   
  11. <body>  
  12.     <div class="container">  
  13.         <h2>Bootstrap Image Gallery</h2>  
  14.         <div class="row">  
  15.             <div class="col-md-3">  
  16.                 <a href="#" class="thumbnail">  
  17.                     <img class="img-responsive" src="images/Layout.jpg" alt="image1" />  
  18.                 </a>  
  19.             </div>  
  20.             <div class="col-md-3">  
  21.                 <a href="#" class="thumbnail">  
  22.                     <img class="img-responsive" src="images/Layout1.jpg" alt="image2" />  
  23.                 </a>  
  24.             </div>  
  25.             <div class="col-md-3">  
  26.                 <a href="#" class="thumbnail">  
  27.                     <img class="img-responsive" src="images/Layout2.jpg" alt="image3" />  
  28.                 </a>  
  29.             </div>  
  30.             <div class="col-md-3">  
  31.                 <a href="#" class="thumbnail">  
  32.                     <img class="img-responsive" src="images/Layout3.jpg" alt="image4" />  
  33.                 </a>  
  34.             </div>  
  35.         </div>  
  36.         <div class="row">  
  37.             <div class="col-md-3">  
  38.                 <a href="#" class="thumbnail">  
  39.                     <img class="img-responsive" src="images/Layout3.jpg" alt="image1" />  
  40.                 </a>  
  41.             </div>  
  42.             <div class="col-md-3">  
  43.                 <a href="#" class="thumbnail">  
  44.                     <img class="img-responsive" src="images/Layout2.jpg" alt="image2" />  
  45.                 </a>  
  46.             </div>  
  47.             <div class="col-md-3">  
  48.                 <a href="#" class="thumbnail">  
  49.                     <img class="img-responsive" src="images/Layout1.jpg" alt="image3" />  
  50.                 </a>  
  51.             </div>  
  52.             <div class="col-md-3">  
  53.                 <a href="#" class="thumbnail">  
  54.                     <img class="img-responsive" src="images/Layout.jpg" alt="image4" />  
  55.                 </a>  
  56.             </div>  
  57.         </div>  
  58.         <div class="row">  
  59.             <div class="col-md-3">  
  60.                 <a href="#" class="thumbnail">  
  61.                     <img class="img-responsive" src="images/Layout1.jpg" alt="image1" />  
  62.                 </a>  
  63.             </div>  
  64.             <div class="col-md-3">  
  65.                 <a href="#" class="thumbnail">  
  66.                     <img class="img-responsive" src="images/Layout3.jpg" alt="image2" />  
  67.                 </a>  
  68.             </div>  
  69.             <div class="col-md-3">  
  70.                 <a href="#" class="thumbnail">  
  71.                     <img class="img-responsive" src="images/Layout.jpg" alt="image3" />  
  72.                 </a>  
  73.             </div>  
  74.             <div class="col-md-3">  
  75.                 <a href="#" class="thumbnail">  
  76.                     <img class="img-responsive" src="images/Layout2.jpg" alt="image4" />  
  77.                 </a>  
  78.             </div>  
  79.         </div>  
  80.     </div>  
  81.     <script src="js/jquery-2.1.4.min.js"></script>  
  82.     <script src="js/bootstrap.min.js"></script>  
  83. </body>  
  84.   
  85. </html>  
Output



In this article we focused on Bootstrap Images. In upcoming articles we will understand all the components of Bootstrap step by step.
 
Read more articles on Bootstrap: 


Similar Articles