4 Techniques for Creating Responsive Images With Bootstrap

Responsive image with bootstrap

What Is Bootstrap?

Bootstrap is an open-source CSS framework, mostly for building responsive websites and mobile-first apps. The framework features global CSS settings; a responsive grid system; prebuilt components, e.g., carousels, forms, and navbars; and optional JavaScript plugins, which speed up development by means of classes.

You can create components by adding Bootstrap classes to elements. Those classes also style images and optimize them for responsive behavior, i.e., scaling along with the image container when a browser window is resized.

Responsive web design (RWD) contains webpages and apps that detect visitors’ screen size and orientation so that the browser can automatically adapt the display accordingly. A mobile-first approach assumes that tablets, task-specific mobile apps, and smartphones are the primary tools for getting work done, addressing their requirements in the design.

responsive images with bootstrap

What Are Responsive Images?

As a critical component of flexible layouts, responsive images adjust the image size, orientation, and resolution based on the end-user’s device, enabling webpages to detect and respond to the screen conditions of visitors.

As a rule, responsive images offer multiple options for an image. Depending on the screen size, the website sends a smaller or larger version of a visually sharp image so that the browser can then download the appropriately-sized version. The responsive-image process occurs before the image reaches the browser.

“Optimise

For more details, see Best Practices for Responsive Web Design

In this article:

Understanding the Prerequisites for Bootstrap Responsive Images

Before setting up responsive images for your page, have in place the Bootstrap CSS and JavaScript bundles by downloading their latest compiled files.

Alternatively, add the required Bootstrap scripts to your pages with the free JSDeliver content delivery network (CDN). No downloads are required. Follow the steps below:

  1. Add this code to the HTML document’s head:
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  2. Add this JS file to the end of the <body> tag:
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

The code for both Bootstrap and Popper is now bundled into one file.

For the latest version of Bootstrap, visit this getbootstrap.com page.

Starter Template

The template below gets your pages up and running with Bootstrap. Note that this template:

  • Starts with an HTML5 doctype declaration and adds a viewport meta tag for responsive behaviors.
  • Switches out the Bootstrap CSS link at the top and the script tag at the bottom with the latest version of Bootstrap.
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Bootstrap JS –->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Bootstrap offers several important global styles and settings for normalizing compatibility of cross-browser styles. See more details below.

HTML5 Doctype

Bootstrap requires the HTML5 doctype declaration, without which some styling operations do not work properly.

<!doctype html>
<html lang="en">
  ...
</html>

Responsive meta Tag

Bootstrap takes a mobile-first approach by first optimizing code for mobile devices and then scaling with CSS media queries for larger screen sizes. Be sure to add the meta tag to your page header to ensure proper responsive rendering, like this:

<meta name="viewport" content="width=device-width, initial-scale=1">

box-sizing

To size images more easily in CSS and prevent padding from affecting the final width of an element, Bootstrap switches the box-sizing value from the default content-box to border-box. However, that switch might conflict with some third-party stylesheets. As an override, set box-sizing to the content-box value:

.example-selector {
  box-sizing: content-box;
}

Creating Responsive Images With Bootstrap

The subsections below describe the four Bootstrap classes with which you can correctly display images and make them responsive to various screen sizes. Subsequently, those images do not overflow their parent element. Instead, they grow and shrink as the parent changes size while retaining the aspect ratio.

Responsive Images with .img-fluid class

The .img-fluid class makes an image responsive by automatically applying max-width: 100%; and height: auto; to it. As a result:

  • The image scales with the parent element’s width.
  • The browser does not make the image larger than its container.
  • The image does not grow to be larger than its original size, which can reduce quality.
  • The image scales down if the viewport becomes narrower than the specified width.

To set up the .img-fluid class in your images, simply define the <img> tag like this:

<img src="..." class="img-fluid" alt="...">

Source for this image and the ones below: Bootstrap documentation

An alternative approach, especially in older versions of Bootstrap, is the .img-responsive class. This class achieves a similar result, ensuring images are responsive by applying max-width: 100% and height: auto to the image, making it scale accordingly with the parent element. To use the .img-responsive class, you would set up the <img> tag in this manner:

<img src="..." class="img-responsive" alt="...">

<picture> Element

You can combine the Bootstrap .img-* classes, such as img-fluid, with the <picture> element to specify multiple images for responsive design or other purposes. Add those classes to the specific <img> tag and not to the <picture> tag, as in this example:

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>

Image Thumbnails

Bootstrap’s border-radius utilities are handy for styling borders for elements, in particular for images and buttons. An example is the class .img-thumbnail, which gives the image a rounded border with a one-pixel width for a professional thumbnail look:

<img src="..." class="img-thumbnail" alt="...">

Alignment of Images

Bootstrap’s float classes align text or images, which then always appear at the start or at the end of the parent element:

<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">

To center block-level images, use the .mx-auto margin-utility class:

<img src="..." class="rounded mx-auto d-block" alt="...">

To center an image in a <div> element, use the text-center class:

<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

Automating Responsive Images With Cloudinary

A cloud-based service for managing images and videos, Cloudinary offers a generous free-forever subscription plan. While on that platform, you can upload images and apply built-in effects, filters, and modifications. You can also create image effects that are difficult or impossible to produce with just CSS.

Cloudinary makes it simple to deliver responsive images by doing the following:

Last updated: Jun 5, 2024