Bootstrap Images

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

<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

<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

<!-- 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

<!-- 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>