code.makery

Learning how to code.

Edit on GitHub
More HTML & CSS

Images with Bootstrap

This page has been updated to cover Bootstrap 4.

In this part we will learn some tricks on how to use images with Bootstrap.

If you haven't yet integrated Bootstrap in your project, please read how to use the Bootstrap Framework in the HTML & CSS Tutorial.

The easiest way to include images in a website is as follows.

Insert Images
<img src="my-image.png" alt="My Image">

Responsive Images

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

Image Sizes

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.

Resulution Switching

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 srcset attribute.

Aligning Images

Also see Aligning Images in the official Bootstrap documentation.

Center

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 d-block.

Image Center

Center an image
<img src="..." alt="..." class="mx-auto d-block">
Note: The class mx-auto can also be used to center any HTML elements. But for text and other inline elements you should use text-center instead (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).

Float left
<img src="..." alt="..." class="float-left">

Left Align

Float right
<img src="..." alt="..." class="float-right">

Right Align

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>

Clearfix

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

Gap

Image Shapes

Bootstrap provides ways for some simple image styles. You can round the corners, cut out a circle or add a subtle frame.

Image Shapes

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

The following articles about images might also be interesting to you: