Bootstrap 4 Images Tutorial With Example

In Bootstrap 4 Images Tutorial With Example, we create responsive images and image shapes with Bootstrap’s image styles. Images are very familiar in modern web design. So styling images and placing it properly on the web pages is very important for upgrading the user experience.

Bootstrap 4 Images Tutorial With Example

In this tutorial, you will learn how to style images, grids of images, creating thumbnails, and so on using Bootstrap 4. Bootstrap 4 provides classes that can be used when working with the <img> element. Most of these classes can be applied to any element. However, there is a class, particularly for responsive images.

#1: Bootstrap 4 Images Shape

Working with Bootstrap 4 built-in classes you can quickly style images such as making the round-cornered or circular images or give them effect like thumbnails.

1) Circle

Using the .rounded-circle class you can shape the image to a circle.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Images Tutorial With 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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Circle</h2>
  <img src="/images/federer.jpg" class="rounded-circle" alt="Federer" width="300" height="230"> 
</div>
</body>
</html>

The output of the example looks like below image.

bootstrap 4 images tutorialbootstrap 4 images tutorial

2) Rounded Corners

Using the .rounded class you can add rounded corners to an image.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Images Tutorial With 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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Rounded Corners</h2>
  <img src="/images/federer.jpg" class="rounded" alt="Federer" width="300" height="230"> 
</div>
</body>
</html>

The output of the example looks like below image.

  

3) Thumbnail

Using the .img-thumbnail class you can shape the image to a thumbnail.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Images Tutorial With 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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Thumbnail</h2>
  <img src="/images/federer.jpg" class="img-thumbnail" alt="Federer" width="300" height="230"> 
</div>
</body>
</html>

The output of the example looks like below image.

bootstrap 4 thumbnail images example

#2: Bootstrap 4 Images Align

Bootstrap 4 provide classes used for aligning images horizontally using the CSS float property. Use Bootstrap’s .float-left and .float-right classes to float an image to the left or right. float-left position an image on the left side of an element and .float-right position it on the right.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Images Tutorial With 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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Aligning images</h2>
  <img src="/images/federer.jpg" class="float-left" alt="Federer" width="300" height="230">
  <img src="/images/federer.jpg" class="float-right" alt="Federer" width="300" height="230"> 
</div>
</body>
</html>

The output of the example looks like below image.

bootstrap 4 alignin images example

#3: Bootstrap 4 Centered Image

Using Bootstrap’s .mx-auto (margin: auto) to center an image with .d-block (display: block) applied.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Images Tutorial With 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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Centered Image</h2>
  <img src="/images/federer.jpg" class="mx-auto d-block" alt="Federer" width="300" height="230">
</div>
</body>
</html>

The output of the example looks like below image.

bootstrap 4 centered image example

#4: Bootstrap 4 Responsive Images

In Bootstrap you can create the images responsive too. Responsive images automatically modify to fit the size of the screen. You can just add the class .img-responsive to the <img> tag. This class applied height: auto and max-width: 100% to the element of this class is used with. 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Images Tutorial With 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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Image</h2>
  <img src="/images/federer.jpg" class="img-fluid" alt="Federer">
</div>
</body>
</html>

The output of the example looks like below image.

bootstrap 4 responsive image example

At last, our Bootstrap 4 Images Tutorial With Example is over.

Post Your Thoughts

This site uses Akismet to reduce spam. Learn how your comment data is processed.