In this part we will learn some tricks on how to use images with Bootstrap.
- Responsive Images - automatically fit the screen size
- Aligning Images - center, left align, right align
- Image Shapes - Round edges, etc.
The easiest way to include images in a website is as follows.
<img src="my-image.png" alt="My Image">
When a web page is displayed on different screens you will have to shrink images on smaller screens.
Bootstrap provides a CSS class
img-fluid that will automatically adjusts images to fit the container size (read about responsive images in the Bootstrap documentation).
Insert a responsive image
<img src="my-image.png" alt="My Image" class="img-fluid" >
Although, you can shrink or enlarge the image with a CSS rule like
width: 200px;, this is often not what you want. You should always try to optimize the download size of your web page. If you let the user download a 400px wide image and display it at 200px it might be a waste of bandwidth.
If you want to optimize further, you could server small images to small screens while serving large images to large screens. This is called resolution switching for responsive images. In this article on responsive images you can learn how this can be done using the
Also see Aligning Images in the official Bootstrap documentation.
With the CSS class
mx-auto you can center images in Bootstrap. Images are inline elements by default. They can only be centered if we make it a block element by adding the class
Center an image
<img src="..." alt="..." class="mx-auto d-block">
mx-autocan also be used to center any HTML elements. But for text and other inline elements you should use
text-centerinstead (see horizontal centering and text alignment).
Left and Right Align
Images can be aligned to the left or to the right. The text will then flow around the image. To do this we use the so-called floats (read about floats in the Bootstrap documentation).
<img src="..." alt="..." class="float-left">
<img src="..." alt="..." class="float-right">
New Line after Float (Clearfix)
When floating to the left or right all following elements are displayed next to the image. If you want to start on a new line, you have to use the
clearfix class. This class is usually added on a parent
<div> element (more info about clearfix in the Bootstrap documentation).
<div class="clearfix"> <img src="..." alt="..." class="float-left"> <p>This text appears next to the image.</p> </div> <p>This text appears below the image.</p>
Margin Around Image
Usually you will want some margin between the image and text or other content. A simple way to do this is to use the Bootstrap Spacing Classes like
mr-2. But you could also define
margins in your CSS.
HTML for Gap Right
<img src="..." alt="..." class="pull-left mr-2">
You can add the following CSS classes to your images:
Image Shapes with Bootstrap
<img src="..." alt="..." class="rounded"> <img src="..." alt="..." class="rounded-circle"> <img src="..." alt="..." class="img-thumbnail">
Other Articles for Images
The following articles about images might also be interesting to you: