Bootstrap - Images

This chapter will discuss various classes provided by Bootstrap, as a support to the images. Images play a vital role in capturing the attention of a visitor on a website. Apart from making the content interesting and engaging, the images help in planning the content strategy of any website.

Responsive Images

Images can be made responsive in Bootstrap using the class .img-fluid. This class applies max-width: 100%; and height: auto; to the image so that it scales with the parent width. The responsive images automatically fit as per the size of the screen.

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
     <head>
         <title>Bootstrap - Images</title>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
     </head>
     <body>
       <div class="container mt-3 p-2">
        <h2 class="text-start">Responsive Image</h2>
        <img src="/bootstrap/images/tutimg.png" class="img-fluid" alt="Responsive Image">
       </div>
     </body>
</html>

Image as Thumbnail

An image to be displayed as a thumbnail with a border and some padding, use the class .img-thumbnail on the image element.

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
     <head>
         <title>Bootstrap - Images</title>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
     </head>
     <body>
       <div class="container mt-3 p-2">
        <h2 class="text-start">Thumbnail Image</h2>
        <img src="/bootstrap/images/scenery.jpg" class="img-thumbnail" alt="Thumbnail Image">
       </div>
     </body>
</html>

Image with Rounded Corners

An image to be displayed with rounded corners, use the class .rounded on the image element.

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
     <head>
         <title>Bootstrap - Images</title>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
     </head>
     <body>
       <div class="container mt-3 p-2">
        <h2 class="text-start">Image with rounded corners</h2>
        <img src="/bootstrap/images/scenery2.jpg" class="rounded" alt="Image with rounded corners">
       </div>
     </body>
</html>

Alignment of Images

The images that are added to the webpage can be aligned as per our choice and that can be left, right or centred. In order to place an image:

  • to the left, use the class .float-start

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap - Images</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
     <div class="container mt-3 p-2">
      <h2 class="text-start">Image aligned to left</h2>
      <img src="/bootstrap/images/scenery3.jpg" class="float-start" alt="Left aligned Image">
     </div>
   </body>
</html>
  • to the right use the class .float-end

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
   <head>
   <title>Bootstrap - Images</title>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <div class="container mt-3 p-2">
   <h2 class="text-center">Image aligned to right</h2>
   <img src="/bootstrap/images/tutimg.png" class="float-end" alt="Right aligned Image">
  </div>
</body>
</html>
  • to the center, use the utility classes .mx-auto (margin:auto) and .d-block (display:block)

Example

You can edit and try running this code using theEdit & Run option.

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Bootstrap - Images</title>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container">
     <h2 class="text-center">Image aligned to centre</h2>
     <img src="/bootstrap/images/profile.jpg" width="500" height="500" class="mx-auto d-block" alt="Centre aligned Image">
    </div>
  </body>
</html>

Picture

When multiple <source> elements are used for a specific image <img> element under a <picture> element/tag, then we must add the .img-* classes to the <img> element and not to the <picture> element/tag.

Example

You can edit and try running this code using theEdit & Run option.

<!DOCTYPE html>
<html lang="en">
     <head>
          <title>Bootstrap - Images</title>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
          <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
      </head>
     <body>
       <h1>Use of Picture tag</h1>
       <picture>
         <img class="img-fluid img-thumbnail" alt="alt text for all sources" src="/bootstrap/images/tutimg.png">
       </picture>
     </body>
</html>
Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements