Bootstrap Images

Bootstrap 4 Images

Bootstrap provides several classes for images to make them responsive and also helps to give some style to the images.

Image Shapes

Rounded Corners

Bootstrap 4 offers .rounded class that makes the corners of the image rounded.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Image Example</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">
  </head> 
 <body>
 <div class="container">
 <h2>Rounded Corners</h2>
 <img src="download.jpg" class="rounded" alt="Scenary"> 
 </div>
 <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> 
 </body>
 </html> 

Output

Circle

The .rounded-circle class is used to make the shape of the image circle.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Image Example</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">
 </head>
 <body> 
 <div class="container">
 <h2>Circle Image</h2>
  <img src="download.jpg" class="rounded-circle" alt="Scenary" width="200" height="200"> 
 </div>
   <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>
 </body> 
 </html> 

Output

Thumbnail

Bootstrap 4 offers a .img-thumbnail class that helps to make the 1px rounded-corner border around the image.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Image Example</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"> 
 </head>
 <body>
 <div class="container">
   <h2>Thumbnail Image</h2>
   <img src="download.jpg" class="img-thumbnail" alt="Scenary"> 
 </div>
   <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> 
 </body>
 </html> 

Output

Aligning Image

Bootstrap 4 provides a "float" feature that helps to move the image left or right. The .float-right class float the image to the right, and .float-left class float the image to the left.

Example

<!DOCTYPE html> <html lang="en">
 <head>
   <title>Bootstrap Image Example</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">
 </head> 
 <body>
 <div class="container">
   <h2>Aligning Images</h2>
   <img src="download.jpg" class="float-left" alt="Scenary">
   <img src="download.jpg" class="float-right" alt="Scenary"> 
 </div>
   <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>
 </body>
 </html> 

Output

Centered Image

You can align your image to the center with the help of .mx-auto  (margin: auto) class and .d-block (display: block) class. To create the centered aligned image, add the .mx-auto class along with the .d-block class to the <img> element.

Example

<!DOCTYPE html>
 <html lang="en"> 
 <head>
   <title>Bootstrap Image Example</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"> 
 </head>
 <body>
 <h2 class="text-center">Centered Image</h2>
 <div class="container">
   <img src="download.jpg" class="mx-auto d-block" alt="Scenary">
 </div>
   <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>
 </body>
 </html> 

Output

Responsive Images

 A responsive image is one that does not allow itself to become bigger than its parent element when you resize the browser. Responsive images adjust itself automatically according to their parent element. To provide the responsive behavior to the image, add the .img-fluid class to the <img> element.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Image Example</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">
   </head>
 <body>
 <h2>Responsive Image</h2>
 <div class="container">
   <img src="download.jpg" class="img-fluid" alt="Scenary">
   <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>
 </body>
 </html> 
 </div> 

Output