Hey and welcome to the 5th day of Bootstrap 4 🤓 Today we will learn about Bootstrap 4 images. Images are an essential part of designing a website. If fitted properly into your design, images will bring your website to life and increase engagement. Beside learning about classes built specifically for images, this is also an opportunity to learn about more Bootstrap 4 utilities: sizing, border radius and shadows.
This article is divided into the following parts:
- Bootstrap 4 Images
- Border Radius Utilities
- Shadow Utilities
- Bootstrap 4 Figures
- Bootstrap 4 Image Overlays
- Further Reading
Bootstrap 4 Images
Bootstrap 4 lets you easily position and style images via classes. We will go through their classes one by one. I will be using sheep pictures from Unsplash throughout the article. I think they are pretty photogenic animals. Let’s get started!
Photo credit to Sylvia van Ommen for her shot.
Responsive Images
When dealing with images one of the main concerns is displaying them with a desired width and not their own. The default option is their own width and it usually breaks the responsive layout. One option is to set their width and height via CSS, but this will prove time-consuming in the long run. Another option is telling the images to have the width of their parent element (not letting them go beyond their container). To achieve this you need to use the class .img-fluid. This makes the image responsive. It is the equivalent of writing the CSS properties: width: 100%;and height: auto;.
Here is an example:
dark
<div class="image-parent">
<img src="..." class="img-fluid" alt="Sheep">
</div>
I have set the background for the image parent to grey so you can easily see it. The fluid image occupies the whole width of the parent and the height is set to auto. Due to this the image doesn’t stretch to cover the height of the parent.
Sizing Images
Using Bootstrap 4 Flex
You may want the Bootstrap 4 image to take a certain percentage of your width. One way to solve this is to use rows and columns, as we have learnt in the second day of Bootstrap 4. You will tell the image how many columns it should stretch to by setting its parent col class to that size.
Here is an example with an image taking the first 4 columns and another one taking the last 4 columns.
dark
<div class="row">
<div class="col-4">
<img src="#" class="img-fluid" alt="Sheep 2">
</div>
<div class="col-4 offset-4">
<img src="#" class="img-fluid" alt="Sheep 3">
</div>
</div>
Using Sizing Utilities
If you want to size an image independently of the Bootstrap 4 grid, you can use the sizing utilities. There are 2 types of sizing utilities in Bootstrap 4:
- for width you need to use the class
.w-[percentage], where the percentage can be 25, 50, 75, 100 or auto and will make the element have 25%, 50%, 75%, 100% of its parent width or its natural width; - and for height you need to use the class
.h-percentage, where the percentage can be 25, 50, 75, 100 or auto with the same results as with width.
Here is what happens if you add the classes directly to the image tag. Let’s take for example the .w-25 utility:
dark
<div class="container">
<img src="..." class="w-25" alt="...">
</div>
You can see that the image takes a quarter of its parent width (the container) and the height default to auto (so the image doesn’t get distorted).
Another way to use the sizing utilities is to add them to the parent div and have the image take the .img-fluid class.
Let’s see an example with the width utilities applied on the parent div:
dark
<div class="container">
<div class="w-25">
<img src="..." class="img-fluid" alt="...">
</div>
</div>
You can see the result is the same. The parent takes a quarter of the width of the container and the image takes 100% of its parent div. This may seem like adding an extra tag for no good reason, but we will see why this is handy when aligning images.
Aligning Images
The simplest way to align images is to use the Bootstrap 4 Flex. Because images are inline-block elements, they don’t act like normal flex items. That means that even though you put them in a flex container, they will not align. You can go around this if you wrap the image in a <div>(this will behave like a block). Here is an example:
dark
<div class="d-flex justify-content-around">
<div class="w-25">
<img src="..." class="img-fluid" alt="...">
</div>
<div class="w-25">
<img src="..." class="img-fluid" alt="...">
</div>
</div>
You can see why the sizing utilities come in handy here. I have added them to the parent <div> and it easy to align these <div>s inside the flex (the images will follow them).
Here is another example that shows how to center an image using flexbox:
dark
<div class="d-flex justify-content-center">
<div class="w-25">
<img src="..." class="img-fluid" alt="...">
</div>
</div>
And here is an example on how to use the margin utilities inside the Bootstrap 4 flex container to pull an image to the right:
dark
<div class="d-flex">
<div class="w-25">
<img src="..." class="img-fluid" alt="...">
</div>
<div class="w-25">
<img src="..." class="img-fluid" alt="...">
</div>
<div class="w-25 ml-auto">
<img src="..." class="img-fluid" alt="...">
</div>
</div>
You can try for yourself to use some of the Bootstrap 4 flex examples from the 3rd day of Bootstrap 4 with images to see how they align and size. It is not necessary to use the sizing utilities when working with flex. You can see a max-width for the parent div of the images and that will work.
Border Radius Utilities
Rounding the corners for Bootstrap 4 images is very easy with the border utilities. You can go for a border-radius of 0px, 4px or 50% (round image). Here are some examples:
dark
<img src="..." class="rounded" alt="..."> <img src="..." class="rounded-top" alt="..."> <img src="..." class="rounded-right" alt="..."> <img src="..." class="rounded-bottom" alt="..."> <img src="..." class="rounded-left" alt="..."> <img src="..." class="rounded-circle" alt="..."> <img src="..." class="rounded-0" alt="...">
There is another class that can be useful called .img-thumbnail. This class adds a rounded border of 1px to the image. Here is an example:
dark
<img src="..." class="img-thumbnail" alt="..." >
Shadow Utilities
You can quickly add or remove shadows for images with the shadow utilities. The options to choose from are a small shadow with the .shadow-sm class, a regular shadow with the .shadow class and a bigger shadow with.shadow-lg. Here are some examples to show you how each one looks:
dark
<img src="..." class="img-thumbnail shadow-none" alt="..." > <img src="..." class="img-thumbnail shadow-sm" alt="..." > <img src="..." class="img-thumbnail shadow" alt="..." > <img src="..." class="img-thumbnail shadow-lg" alt="..." >
Bootstrap 4 Figures
If you want to display a caption under the picture, you can use the <figure> HTML5 tag along with the Bootstrap 4 figure classes. The image must have the .img-fluid class (so it doesn’t overflow the parent) and the .figure-img class. And the caption needs the .figure-caption class. You can use the utilities mentioned above on the image (you can add a shadow, for example) and you can use the text utilities for the caption (to center, style it, etc).
The figure element is a block so it naturally covers 100% of its parent width. If you want it to act differently, you can modify the width via CSS or using the sizing utilities.
Here is an example:
dark
<div class="d-flex justify-content-center">
<figure class="figure w-25">
<img src="..." class="figure-img img-fluid rounded shadow-lg" alt="...">
<figcaption class="figure-caption text-center font-weight-bold">A sheep.</figcaption>
</figure>
</div>
Bootstrap 4 Image Overlays
Adding text over an image
If you want to add text over an image, you can do this by making use of the card classes from Bootstrap 4. We will inspect the full capabilities of the Bootstrap 4 cards in a later day. Today, we will just see how to add text on top of an image and customise the overlay.
To add an overlay to an image, you need to position the image inside a card with the classes .card. The image will need the class .img-card. The layer that sits on top of the image is an element with the class .card-img-overlay. This is where you will put your text.
dark
<div class="card">
<img class="card-img" src="..." alt="...">
<div class="card-img-overlay text-white d-flex justify-content-center align-items-end">
<p>More sheep.</p>
</div>
</div>
The default color for text is black so I added the .text-white utility class to make the text for the overlay white. I have also used flexbox utilties to position the text in the middle horizontally with the class .justify-content-center and down vertically with the class .align-items-end.
Coloring the filter for the overlay
For the example above the text is readable but you may have images that are lighter and the contrast is not high enough. To fix this you can darken the overlay background with CSS. I prefer to add classes instead of overwriting the default Bootstrap classes. So, instead of adding CSS for the .card-img-overlay class, I will create a new class .overlay-dark and add it to the overlay.
Here are the changes in code:
//html
<div class="card">
<img class="card-img" src="..." alt="...">
<div class="card-img-overlay overlay-dark text-white d-flex justify-content-center align-items-end">
<p>More sheep.</p>
</div>
</div>
//css
.overlay-dark {
background-color: rgba(black, 0.4);
}
And the result:
dark
Of course you don’t need to use black for the background filter. You can add any color you want or a gradient. Here are some examples:
dark
//html
<div class="row">
<div class="col-3">
<div class="card">
<img class="card-img" src="..." alt="...">
<div class="card-img-overlay overlay-grey text-white d-flex justify-content-center align-items-end">
<p>More sheep.</p>
</div>
</div>
</div>
<div class="col-3">
<div class="card">
<img class="card-img" src="..." alt="...">
<div class="card-img-overlay overlay-yellow text-white d-flex justify-content-center align-items-end">
<p>More sheep.</p>
</div>
</div>
</div>
<div class="col-3">
<div class="card">
<img class="card-img" src="..." alt="...">
<div class="card-img-overlay overlay-orange text-white d-flex justify-content-center align-items-end">
<p>More sheep.</p>
</div>
</div>
</div>
<div class="col-3">
<div class="card">
<img class="card-img" src="..." alt="...">
<div class="card-img-overlay overlay-blue-gradient text-white d-flex justify-content-center align-items-end">
<p>More sheep.</p>
</div>
</div>
</div>
</div>
//css
.overlay-grey {
background-color: rgba(#596164, 0.4);
}
.overlay-yellow {
background-color: rgba(#fee140, 0.4);
}
.overlay-orange {
background-color: rgba(#c43a30, 0.4);
}
.overlay-blue-gradient {
background-image: linear-gradient(135deg, rgba(#96deda, 0.5) 0%, rgba(#537895, 0.7) 100%);
}
This is a wrap for today’s Bootstrap 4 tutorial. You can see that as we advance with our knowledge, we will use the previous days. It is important to go through the days in consecutive order so you can make the most out of these articles. If there is something unclear please let me know in the comments below 🙂
Further Reading
All the code in this article is available via the CodePens linked on every section. You can play around and edit them. If you have some time left on your hands, be sure to check out the official Bootstrap 4 documentation:
- Images Documentation
- Sizing Utilities
- Border Utilities
- Figures Documentation
- Bootstrap 4 Cards with Image Overlays
See you tomorrow!
