This tutorial covers Bootstrap 4 images, figures, media objects and embeds with illustrative examples:
In this tutorial we will discuss Bootstrap Responsive images and how to create it, basic Image Shapes i.e. round, circular, thumbnail, and alignment of images. We will also learn Bootstrap background images, media objects, figures, alignment of media objects, etc. At last, we will see Bootstrap Embeds and some frequently asked questions.
Please note that we have used Bootstrap version 4 in all examples.
=> Visit Here To Learn Bootstrap From Scratch
Let’s begin!
Table of Contents:
Images, Figures, Media Objects And Embeds
The following table summarizes the classes that we have used in this tutorial on different categories.
| Class | Usage |
|---|---|
| Images | |
| The .img-fluid class | This class is used to make an image responsive. |
| The .img-thumbnail class | This class is used to shape the image into a (bordered) thumbnail. |
| The .rounded class | This class is used to add rounded corners to an image. |
| The .rounded-circle class | This class is used to shape an image into a circle. |
| The .float-left class | This class is used to float an image to the left. |
| The .float-right class | This class is used to float an image to the right. |
| The .text-left class | This class is used to make an image left-aligned. |
| The .text-right class | This class is used to make an image right-aligned. |
| The .text-center class | This class is used to align an image in the middle. |
| The .d-block and .mx-auto classes | These classes are used to make an image (block-level image) align in the middle. |
| Figures | |
|---|---|
| The .figure class | This class is used to create a figure. |
| The .figure-img class | This class is used to add an image to the figure. |
| The .figure-caption class | This class is used to add a caption to the figure. |
| Media Objects | |
|---|---|
| The .media class | This class is used to create a media object. |
| The .media-body class | This class is used to create the body of the media object |
| The .align-self-start class | This class is used to align a media object at the top. |
| The .align-self-center class | This class is used to align a media object in the middle. |
| The .align-self-end class | This class is used to align a media object at the bottom. |
| Embeds | |
|---|---|
| The .embed-responsive class | This class is used to apply responsive embeds to < iframe >, < embed >, < video >, and < object > elements. |
| The .embed-responsive-item class | This class is used to add the same responsive styles to other elements. |
| The .embed-responsive-21by9 class | This class is used to adjust the responsive embed aspect ratio, 21:9. |
| The .embed-responsive-16by9 class | This class is used to adjust the responsive embed aspect ratio, 16:9. |
| The .embed-responsive-4by3 class | This class is used to adjust the responsive embed aspect ratio, 4:3. |
| The .embed-responsive-1by1 class | This class is used to adjust the responsive embed aspect ratio, 1:1. |
Bootstrap Images
Bootstrap Responsive Images
Bootstrap helps to create responsive images easily. A responsive image automatically adjusts to fit the browser screen size. Therefore, the size of the image will vary depending on the browser screen size. On the other hand, a non-responsive image will not alter its size when the browser screen size varies.
You can also create a Bootstrap image gallery using multiple images.
How to Create Responsive Images
Bootstrap version 3 uses the .img-responsive class for responsive images while version 4 uses the .img-fluid class.
Add the .img-fluid class to the <img> element to make an image responsive. It applies the following styles to the image.
- max-width: 100%
- height: auto
Examples
The below programming code shows examples of responsive and non-responsive images. You can try this example by running the below programming code.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid mt-3 mb-3">
<h3>Responsive Image</h3>
<img src="add_an_img.jpg" class="img-fluid mb-3" alt="Responsive Photo">
<h3>Non-responsive Image</h3>
<img src="add_an_img.jpg" alt="Non-responsive Photo">
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
The below screenshot shows the browser output of the above programming code (for a large browser screen size).
When you reduce the browser screen size, the browser output will be similar to the below screenshot. Notice how the responsive image adjusts according to the browser size but the non-responsive one does not.
Tip: Use a large image for proper visibility of responsiveness.
Basic Image Shapes
Bootstrap provides three basic shapes for images. They are,
- The rounded shape
- The circular shape
- The (bordered) thumbnail shape
Rounded Shape: Add the .rounded class to the <img> element to add rounded corners to an image.
Circular Shape: Add the .rounded-circle class to the <img> element to shape an image into a circle.
(Bordered) Thumbnail Shape: Add the .img-thumbnail class to the <img> element to shape the image into a (bordered) thumbnail.
Examples:
The below programming code shows examples of various image shapes. You can try this example by running the below programming code.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid mt-3">
<h3>Rounded Image</h3>
<img src="add_an_img.jpg" class="rounded mb-4" alt="Rounded Photo">
<h3>Circular Image</h3>
<img src="add_an_img.jpg" class="rounded-circle mb-4" alt="Circular Photo">
<h3>Thumbnail Image</h3>
<img src="add_an_img.jpg" class="img-thumbnail mb-4" alt="Thumbnail Photo">
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
The below screenshot shows the browser output of the above programming code.
Alignments of Images
Horizontal Alignment
You can align images horizontally using float classes. Add the .float-left class and the .float-right class to the <img> elements to left align and right align images, respectively.
Left Alignment
You can align images to the left using text alignment classes. Add the .text-left class to make an image left-aligned.
Right Alignment
You can right align images using text alignment classes as well. Add the .text-right class to make an image right-aligned.
Center Alignment
You can center images using text alignment classes too. Add the .text-center class to make an image align in the middle.
Center Alignment of Block-level Images using Auto Margin
You can center block-level images using auto margin classes. Add the .d-block and .mx-auto classes to make an image (block-level image) align in the middle.
Examples:
The below programming code shows,
- The horizontal alignment of an image using float classes
- The left alignment of an image using text alignment classes
- The right alignment of an image using text alignment classes
- The center alignment of an image using text alignment classes.
- The center alignment of a block-level image using auto margin classes
You can try this example by running the below programming code.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<style>
.box{
padding: 12px;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="container-fluid mt-3">
<h4>Horizontal Alignment of Images</h4>
<div class="box clearfix mb-3">
<img src="add_an_img.jpg" class="float-left" alt="Horizontal (Left-aligned) Photo">
<img src="add_an_img.jpg" class="float-right" alt="Horizontal (Right-aligned) Photo">
</div>
<h4>Left Alignment of an Image</h4>
<div class="box text-left mb-3">
<img src="add_an_img.jpg" alt="Left-aligned Photo">
</div>
<h4>Right Alignment of an Image</h4>
<div class="box text-right mb-3">
<img src="add_an_img.jpg" alt="Right-aligned Photo">
</div>
<h4>Center Alignment of an Image</h4>
<div class="box text-center mb-3">
<img src="add_an_img.jpg" alt="Centered Photo">
</div>
<h4>Center Alignment of a Block-level Image</h4>
<div class="box mb-3">
<img src="add_an_img.jpg" class="d-block mx-auto" alt="Centered Photo">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
The below screenshot shows the browser output of the above programming code.
Bootstrap Background Images
You can add an image to the background.
Example:
The below programming code shows an example of a background image. You can try this example by running the below programming code.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<style>
body, html {
height: 100%;
}
.bg-img {
background-image: url("https://images.pexels.com/photos/547114/pexels-photo-547114.jpeg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<!--Background Image-->
<div class="bg-img">
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
The below screenshot shows the browser output of the above programming code.
Bootstrap Figures
A figure is used to display a piece of content such as an image, caption.
The three main classes used to create a figure are the .figure class, the .figure-img class and the .figure-caption class.
Example:
The below programming code shows an example of a figure. You can try this example by running the below programming code.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid mt-3">
<!--figure-->
<figure class="figure">
<!--image-->
<img src="add_an_img.jpg" class="figure-img img-fluid rounded" alt="sample photo">
<!--figure caption-->
<figcaption class="figure-caption">This is a sample caption for the image.</figcaption>
</figure>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
The below screenshot shows the browser output of the above programming code.
Bootstrap Media Objects
Bootstrap media objects are used to create highly repetitive components such as blog comments, tweets, etc.
Basic Media Objects
The two main classes used to create a media object are the .media class and the .media-body class.
Nested Media Objects
You can create a media object inside another media object. These are called nested media objects.
Alignments of Media Objects
Left Alignment
By default, media object are left-aligned. Therefore, you don’t need any additional classes to make a media object left-aligned.
Right Alignment
To make a media object right-aligned, place the <img> element after the <div class=”media-body”> element. You also don’t need any additional classes to make a media object right-aligned.
Top Alignment
Add the .align-self-start class to make a media object align at the top.
Middle Alignment
Add the .align-self-center class to make a media object align in the middle.
Bottom Alignment
Add the .align-self-end class to make a media object align at the bottom.
Media List
You can easily create media lists using multiple media objects.
Examples
The below programming code shows a basic media object, a nested media object, media objects with right alignment/top alignment/middle alignment/bottom alignment and a media object list.
You can try this example by running the below programming code.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-3">
<h3>Basic Media Object</h3>
<!--Media Object-->
<div class="media border p-3 mb-4">
<img src="user.png" class="mr-3" alt="Sample Photo">
<div class="media-body">
<h5>Bob Smiles<small><i> Last seen on March 10, 2021</i></small></h5>
<p>Hello, I'm Bob from England.</p>
</div>
</div>
<h3>Nested Media Object</h3>
<div class="media border p-3 mb-4">
<img src="user.png" class="mr-3" alt="Sample Photo">
<div class="media-body">
<h5>Bob Smiles<small><i> Last seen on March 10, 2021</i></small></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim mauris, mollis vitae tortor vitae.</p>
<!--Nested Media Object-->
<div class="media mt-2">
<img src="user.png" class="mr-3" alt="Sample Photo">
<div class="media-body">
<h5>Bob Smiles<small><i> Last seen on March 10, 2021</i></small></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim mauris, mollis vitae tortor vitae.</p>
</div>
</div>
</div>
</div>
<h3>Media Object Alignments</h3>
<h4>Media Object Right</h4>
<div class="media border p-3 mb-3">
<div class="media-body">
<h5>Bob Smiles</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices dolor id odio tincidunt scelerisque. Nulla dignissim, elit ut elementum aliquam, diam eros laoreet diam, eu efficitur urna ex mollis mi. Donec finibus egestas ipsum sed imperdiet. Praesent sollicitudin pretium posuere. Nullam ornare libero sed mauris mollis congue. Etiam imperdiet, dolor ac tincidunt porta, leo odio congue leo, a congue nunc dolor nec odio. Cras at tempus nunc.</p>
</div>
<img src="user.png" class="ml-3 mt-3" alt="Sample Photo">
</div>
<h4>Media Object Top</h4>
<div class="media border p-3 mb-3">
<img src="user.png" class="align-self-start mr-3" alt="Sample Photo">
<div class="media-body">
<h5>Bob Smiles</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices dolor id odio tincidunt scelerisque. Nulla dignissim, elit ut elementum aliquam, diam eros laoreet diam, eu efficitur urna ex mollis mi. Donec finibus egestas ipsum sed imperdiet. Praesent sollicitudin pretium posuere. Nullam ornare libero sed mauris mollis congue. Etiam imperdiet, dolor ac tincidunt porta, leo odio congue leo, a congue nunc dolor nec odio. Cras at tempus nunc.</p>
</div>
</div>
<h4>Media Object Middle</h4>
<div class="media border p-3 mb-3">
<img src="user.png" class="align-self-center mr-3" alt="Sample Photo">
<div class="media-body">
<h5 class="mt-0">Bob Smiles</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices dolor id odio tincidunt scelerisque. Nulla dignissim, elit ut elementum aliquam, diam eros laoreet diam, eu efficitur urna ex mollis mi. Donec finibus egestas ipsum sed imperdiet. Praesent sollicitudin pretium posuere. Nullam ornare libero sed mauris mollis congue. Etiam imperdiet, dolor ac tincidunt porta, leo odio congue leo, a congue nunc dolor nec odio. Cras at tempus nunc.</p>
</div>
</div>
<h4>Media Object Bottom</h4>
<div class="media border p-3 mb-5">
<img src="user.png" class="align-self-end mr-3" alt="Sample Photo">
<div class="media-body">
<h5>Bob Smiles</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices dolor id odio tincidunt scelerisque. Nulla dignissim, elit ut elementum aliquam, diam eros laoreet diam, eu efficitur urna ex mollis mi. Donec finibus egestas ipsum sed imperdiet. Praesent sollicitudin pretium posuere. Nullam ornare libero sed mauris mollis congue. Etiam imperdiet, dolor ac tincidunt porta, leo odio congue leo, a congue nunc dolor nec odio. Cras at tempus nunc.</p>
</div>
</div>
<h3>Media Object List</h3>
<ul class="list-unstyled border p-3">
<!--Media Object-->
<li class="media">
<img src="user.png" class="mr-3" alt="Sample Photo">
<div class="media-body">
<h5>List-based Media Object</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim mauris, mollis vitae tortor vitae.</p>
</div>
</li>
<!--Media Object-->
<li class="media">
<img src="user.png" class="mr-3" alt="Sample Photo">
<div class="media-body">
<h5>List-based Media Object</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim mauris, mollis vitae tortor vitae.</p>
</div>
</li>
<!--Media Object-->
<li class="media">
<img src="user.png" class="mr-3" alt="Sample Photo">
<div class="media-body">
<h5>List-based Media Object</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim mauris, mollis vitae tortor vitae.</p>
</div>
</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
The below screenshot shows the browser output of the above programming code.
Bootstrap Embeds
Bootstrap embeds are used to responsively scale media such as videos, slideshows, etc. to their containing block.
The .embed-responsive class is used to apply responsive embeds to <iframe>, <embed>, <video>, and <object> elements. It provides the default responsive embed styles. The .embed-responsive-* class is used to adjust the responsive embed aspect ratio. Optionally, you can add the .embed-responsive-item class to add the same responsive styles to other elements.
Aspect Ratios
There are four classes used to adjust the responsive embed aspect ratio. They are,
- The .embed-responsive-21by9 class – This class is used to adjust the responsive embed to the 21:9 aspect ratio.
- The .embed-responsive-16by9 class – This class is used to adjust the responsive embed to the 16:9 aspect ratio.
- The .embed-responsive-4by3 class – This class is used to adjust the responsive embed to the 4:3 aspect ratio.
- The .embed-responsive-1by1 class – This class is used to adjust the responsive embed to the 1:1 aspect ratio.
Examples
The below programming code shows four examples of embeds.
Example 1 – A responsive video with the 21:9 aspect ratio.
Example 2 – A responsive video with the 16:9 aspect ratio.
Example 3 – A responsive video with the 4:3 aspect ratio.
Example 4 – A responsive video with the 1:1 aspect ratio.
You can try this example by running the below programming code.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid mt-3">
<h3>21:9 aspect ratio<h3>
<div class="embed-responsive embed-responsive-21by9 mb-3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/Yk2Dp43il6M"></iframe>
</div>
<h3>16:9 aspect ratio<h3>
<div class="embed-responsive embed-responsive-16by9 mb-3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/Yk2Dp43il6M"></iframe>
</div>
<h3>4:3 aspect ratio<h3>
<div class="embed-responsive embed-responsive-4by3 mb-3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/Yk2Dp43il6M"></iframe>
</div>
<h3>1:1 aspect ratio<h3>
<div class="embed-responsive embed-responsive-1by1 mb-3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/Yk2Dp43il6M"></iframe>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
The below screenshot shows the browser output of the above programming code.
Frequently Asked Questions
In this section, we are going to look at some of the FAQs about Bootstrap images, figures, media objects and embeds.
Q #1) How do I make an image round?
Answer: Add the .rounded class to make an image round.
Q #2) What does IMG fluid do?
Answer: The .img-fluid class is used to make an image responsive.
Q #3) How do I create a thumbnail image?
Answer: Add the .img-thumbnail class to create a thumbnail image.
Q #4) Which class shapes an image into a circle?
Answer: The .rounded-circle class shapes an image into a circle.
Q #5) How do I center an image?
Answer: Add the .text-center class to center an image.
Q #6) Which aspect ratios are used with responsive videos?
Answer: Four aspect ratios can be used with responsive videos. They are 21by9, 16by9, 4by3, and 1by1.
Q #7) What are media objects?
Answer: Media objects are highly repetitive components like blog comments, tweets, etc.
Q #8) What is an embed?
Answer: An embed is a media such as a video, slideshow, etc. that responsively scale to fit its containing block.
Conclusion
Bootstrap helps you to create responsive images and add different styles. Figures are also somewhat similar to images but use different classes.
Media objects are used to create highly repetitive components such as blog comments, tweets, etc. Embeds are used to responsively scale media such as videos, slideshows, etc. to their containing block.
=> Check ALL Bootstrap Tutorials Here