Bootstrap

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: 

Up Next
    Ebook Download
    View all
    CSS by AI
    Read by 3 people
    Download Now!
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs