Home >>Bootstrap Tutorial >Bootstrap Images

Bootstrap Images

Bootstraps images provides different types of classes to make their looks better and also there is a class specifically for responsive images. You can make an image responsive using class .img-fluid, it should set the height and width of image according to its parent element.

By using the class .img-fluid, when you resizing the browser you’ll see that the image will grow and shrink according to the change in the size of its parent but it does not overflow its parent element.

These are the following classes of the images:

. rounded –circle – It helps you to make image in a circle shape.
.rounded – It helps you to rounded the corners of image.
.img-thumbnail – It creates a rounded 1px border around the image.

Circle

The .rounded-circle makes the image in a circle shape:

Let's take an Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap images</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Circle</h2>
  <img src="image.jpg" class="rounded-circle" alt="landscape"> 
</div>
</body>
</html>

Output:

Circle

Rounded

The class .rounded makes the corners of the image rounded:

Let's take an Example of Rounded:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap images</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Rounded</h2>
  <img src="image.jpg" class="rounded" alt="landscape"> 
</div>
</body>
</html>

Output:

Rounded

Thumbnail

The class .img-thumbnail makes the border of 1px around the image:

Let's take an example of img-thumbnail:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap images</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>thumbnail</h2>
  <img src="image.jpg" class="img-thumbnail" alt="landscape"> 
</div>
</body>
</html>

Output:

thumbnail

Centered Image

You can also centered the image, by using the class mx-auto (margin: auto) and d-block (display: block) in <img> tag.

Let's take an example of centered image:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap images</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>center image</h2>          
  <img src="image.jpg" class="mx-auto d-block" alt="landscape"> 
</div>
</body>
</html>

Output:

center image

Aligning Images

You can also aligning the images, by using class .float-right and .float-left to float an image right or left.

Let's take an example of aligning images:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap images</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2 class="text-center">Aligning image</h2>          
  <img src="image.jpg" class="float-right" alt="landscape"> 
  <img src="image.jpg" class="float-left" alt="landscape"> 
</div>
</body>
</html>

Output:

Aligning image

Responsive Images

To make image responsive you should use class .img-fluid to the <img> tag.

The class img-fluid makes the image responsive to the different sizes of screen, the image will grow and shrink according to the change in the size of its parent but it does not overflow its parent element. The img-fluid class will automatically applied max-width:100% and height: auto to the image.

Let's take an example of img-fluid:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap images</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2 class="text-center">Responsive image</h2>          
  <img src="image.jpg" class="img-fluid" alt="landscape"> 
</div>
</body>
</html>

Output:

Responsive image

« Previous Next »

Bootstrap Tutorial Bootstrap Introduction Bootstrap Example Bootstrap Container Bootstrap Jumbotron Bootstrap Grid System Bootstrap Alerts Bootstrap Typography Bootstrap Table Bootstrap Colors Bootstrap Forms Bootstrap Images Bootstrap Buttons Bootstrap Button Group Bootstrap Progress Bars Bootstrap Badges Bootstrap Pagination Bootstrap Cards Bootstrap Navs Bootstrap Fixed Navigation Bar Bootstrap Navigation Bar Bootstrap Collapse Bootstrap Carousel Bootstrap Modal Bootstrap Input Groups Bootstrap List Groups Bootstrap Tooltip Bootstrap Popover Bootstrap Flex Bootstrap Utilities Bootstrap Media Objects

Bootstrap Interview Questions

No Sidebar ads