Bootstrap Images
In this tutorial you will learn how to style images, as well as how to create responsive images and videos using Bootstrap.
Styling Images with Bootstrap
Images are very common in modern web design. So styling images and placing it properly on the web pages is very important for improving the user experience.
Using the Bootstrap built-in classes you can easily style images such as making the round cornered or circular images, or give them effect like thumbnails.
Example
Try this code »<img src="images/avatar.svg" class="rounded" alt="Rounded Image">
<img src="images/avatar.svg" class="rounded-circle" alt="Circular Image">
<img src="images/avatar.svg" class="img-thumbnail" alt="Thumbnail Image">
— The output of the above example will look something like this:
Creating Responsive Images and Videos
With Bootstrap you can make the images responsive too. Just add the class .img-fluid
to the <img>
tag. This class mainly applies the styles max-width: 100%;
and height: auto;
to the image so that it scales nicely to fit the containing element — in case if the width of the image is larger than the containing element itself. Check out the following example to see how it works:
Example
Try this code »<img src="images/kites.jpg" class="img-fluid" alt="Flying Kites">
<img src="images/sky.jpg" class="img-fluid" alt="Cloudy Sky">
<img src="images/balloons.jpg" class="img-fluid" alt="Hot Air Balloons">
Note: When making the responsive layouts consider making your images responsive too, otherwise if an image width is larger than the parent element's width in any case, it will overflow and may break your web page layout.
You can also make the video or slideshow embedded in a web page responsive without affecting its original aspect ratio. To do this wrap any embed like an <iframe>
, or <video>
in a <div>
element and apply the class .embed-responsive
, and an aspect ratio class such as .embed-responsive-16by9
.
You can optionally apply an explicit descendant class .embed-responsive-item
on the embedded element to match the styling for other attributes. Here's is an example:
Example
Try this code »<!-- 21:9 aspect ratio -->
<div class="ratio ratio-21x9">
<iframe src="//www.youtube.com/embed/YE7VzlLtp-4" title="YouTube video" allowfullscreen></iframe>
</div>
<!-- 16:9 aspect ratio -->
<div class="ratio ratio-16x9">
<iframe src="//www.youtube.com/embed/YE7VzlLtp-4" title="YouTube video" allowfullscreen></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="ratio ratio-4x3">
<iframe src="//www.youtube.com/embed/YE7VzlLtp-4" title="YouTube video" allowfullscreen></iframe>
</div>
<!-- 1:1 aspect ratio -->
<div class="ratio ratio-1x1">
<iframe src="//www.youtube.com/embed/YE7VzlLtp-4" title="YouTube video" allowfullscreen></iframe>
</div>
In the above example, we've created the 4 responsive embedded videos with 4 different aspect ratios (21:9, 16:9, 4:3, and 1:1) by using the classes .ratio-21x9
, .ratio-16x9
, .ratio-4x3
, and .ratio-1x1
, respectively in addition to the base class .ratio
on the wrapper element.
Tip: The aspect ratio of an image describes the proportional relationship between its width and its height. Two common videographic aspect ratios are 16:9 and 4:3.
Horizontal Alignment of Images
You can use the text alignment classes such as .text-center
, and .text-end
on the parent container to align the inline images horizontally center and right. You can also align images to the left and right within a larger box using the classes .float-start
and .float-end
.
However, to center align the block-level images you need to use the .mx-auto
margin utility class. Let's try out the following example to understand how it really works:
Example
Try this code »<!-- Center alignment using text alignment classes -->
<div class="text-center">
<img src="images/avatar.svg" alt="Sample Image">
</div>
<!-- Right alignment using text alignment classes -->
<div class="text-end">
<img src="images/avatar.svg" alt="Sample Image">
</div>
<!-- Horizontal alignment using float classes -->
<div class="clearfix">
<img src="images/avatar.svg" class="float-start" alt="Sample Image">
<img src="images/avatar.svg" class="float-end" alt="Sample Image">
</div>
<!-- Center alignment of block-level image using auto margin -->
<div>
<img src="images/avatar.svg" class="d-block mx-auto" alt="Sample Image">
</div>