Hello everybody,
Michael here, and today’s post will cover the use of images in Bootstrap.
Basics of Bootstrap Images
So, how do we work with images in Bootstrap? Honestly, the process is quite similar to working with regular HTML images. Let’s take a look at this code below, which uses one of the tables from my previous Bootstrap lesson:
<!DOCTYPE html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<head>
<body>
<h1>Fall 2022 Movies</h1>
<div class="container">
<img src="cinema.jpg" class="rounded" alt="Stock photo of a cinema">
</div>
<div class="table">
<table class="table">
<tr>
<th>Movie</th>
<th>Release Date</th>
<th>Genre</th>
</tr>
<tr>
<td>Don't Worry Darling</td>
<td>September 23</td>
<td>Mystery</td>
</tr>
<tr>
<td>Black Panther Wakanda Forever</td>
<td>November 11</td>
<td>Superhero</td>
</tr>
<tr>
<td>Halloween Ends</td>
<td>October 14</td>
<td>Horror</td>
</tr>
</table>
</div>
</body>
</head>
Pay attention to the section of code highlighted in red, as that’s the section that adds the image onto the HTML site. In this example, I added a stock photo of a cinema below the Fall 2022 Movies header and above the table.
However, there’s something else that you’ll notice about the image-the corners are rounded. How did I do that? Well, in the image tag I specified a value for class–rounded. Bootstrap 5 has seven different image classes you can utilize-rounded, rounded-top, rounded-end, rounded-bottom, rounded-start, rounded-circle and rounded-pill. Now, how do each of these image classes work? Let me explain:
rounded-all corners of the image are roundedrounded-top-only the top corners of the image are roundedrounded-end-only the right corners of the image are roundedrounded-bottom-only the bottom corners of the image are roundedrounded-start-only the left corners of the image are roundedrounded-circle-the image turns into a circlerounded-pill-the image turns into an oval
- You don’t really need to wrap the image inside a
<div class="container">tag, but it helps if you want to center your image. - It helps to place your image in the same directory as your HTML code-otherwise, you’ll need to write the full file path in the
srcparameter. - In case you forgot or didn’t know, the
altparameter gives the user a description for an image incase the user can’t view the image itself for whatever reason (e.g. internet is down, the user is visually impaired and uses a screen reader)
Now, let’s see what happens when we give the image a new style-in this case, let’s go with a rounded-pill styling:
<!DOCTYPE html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<head>
<body>
<h1>Fall 2022 Movies</h1>
<div class="container">
<img src="cinema.jpg" class="rounded-pill" alt="Stock photo of a cinema" height=100 width=300>
</div>
<div class="table">
<table class="table">
<tr>
<th>Movie</th>
<th>Release Date</th>
<th>Genre</th>
</tr>
<tr>
<td>Don't Worry Darling</td>
<td>September 23</td>
<td>Mystery</td>
</tr>
<tr>
<td>Black Panther Wakanda Forever</td>
<td>November 11</td>
<td>Superhero</td>
</tr>
<tr>
<td>Halloween Ends</td>
<td>October 14</td>
<td>Horror</td>
</tr>
</table>
</div>
</body>
</head>
In the example above, I gave the image a rounded pill styling to make it look like an oval. As for the size, I added the optional height and width parameters to the oval to change the image’s size.
- Keep in mind that
heightandwidthare both measured in pixels.
Responsive Bootstrap Images
Now, aside from the seven different Bootstrap image classes I mentioned above, there are also two other image stylings in Bootstrap-responsive images and thumbnails.
Responsive images auto-size to match the width of their parent element. Let’s take a look at the code below (paying attention to the highlighted line) to see how responsive images work:
<!DOCTYPE html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<head>
<body>
<h1>Fall 2022 Movies</h1>
<div class="container">
<img src="cinema.jpg" class="img-fluid" alt="Stock photo of a cinema">
</div>
<div class="table">
<table class="table">
<tr>
<th>Movie</th>
<th>Release Date</th>
<th>Genre</th>
</tr>
<tr>
<td>Don't Worry Darling</td>
<td>September 23</td>
<td>Mystery</td>
</tr>
<tr>
<td>Black Panther Wakanda Forever</td>
<td>November 11</td>
<td>Superhero</td>
</tr>
<tr>
<td>Halloween Ends</td>
<td>October 14</td>
<td>Horror</td>
</tr>
</table>
</div>
To make the image responsive, I applied the img-fluid Bootstrap image class to the image. Doing so allows the image to match the width of its parent element-in this case, the Fall 2022 Movies header.
- Look, I know the image doesn’t quite align with the
Fall 2022 Moviesheader, but that’s beacuse I wrapped it inside a<div class="container">tag, which moves the image away from the edge of the browser.
Thumbnail images
The other Bootstrap image styling I wanted to discuss is thumbnail images. In case you’re wondering what thumbnail images are, go to YouTube and type in anything in the search bar (like I did in the picture below):
The image I circled (along with all other images on this page) is a thumbnail, as it functions as a placeholder/hyperlink for other media-in this case the trailer for Black Panther 2.
How can we create a thumbnail image? It’s really quite simple-take a look at the highlighted line of code in the example below:
<!DOCTYPE html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<head>
<body>
<h1>Fall 2022 Movies</h1>
<div class="container">
<img src="cinema.jpg" class="img-thumbnail" alt="Stock photo of a cinema">
</div>
<div class="table">
<table class="table">
<tr>
<th>Movie</th>
<th>Release Date</th>
<th>Genre</th>
</tr>
<tr>
<td>Don't Worry Darling</td>
<td>September 23</td>
<td>Mystery</td>
</tr>
<tr>
<td>Black Panther Wakanda Forever</td>
<td>November 11</td>
<td>Superhero</td>
</tr>
<tr>
<td>Halloween Ends</td>
<td>October 14</td>
<td>Horror</td>
</tr>
</table>
</div>
</body>
</head>
In this example, all I needed to do to give the image a thumbnail styling is to change the value of the class parameter to img-thumbnail and voila!-your image has a nice 1-pixel-thick rounded border.
- As you might have noticed, the image kept the same size it had in the responsive images example-this is because applying the thumbnail styling to your image won’t change its previous size.
- You might have also noticed that the thumbnail images in the YouTube screenshot I shared have no rounded border-the rounded border styling is a Bootstrap thing (many websites don’t use rounded borders for their thumbnail images).
Thanks for reading,
Michael