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.
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.
For more details, see Best Practices for Responsive Web Design.
In this article:
- Understanding the Prerequisites for Bootstrap Responsive Images
- Creating Responsive Images With Bootstrap
- Automating Responsive Images With Cloudinary
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:
- 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">
- 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
doctypedeclaration and adds aviewport meta tag for responsive behaviors. - Switches out the Bootstrap CSS link at the top and the
scripttag 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="...">
Pro Tip
Consider Cloudinary’s Digital Asset Management
Looking for a centralized location to manage all your media assets? Cloudinary’s Media Library makes it easy to upload, store, manage, and deliver images and videos efficiently.
<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:
- Dynamically transform images — Generates transformed (e.g., resized or cropped) versions of images on the fly with Cloudinary dynamic URLs. This capability is especially useful in conjunction with the HTML srcset attribute and <picture> element, enabling the browser to choose which image version to display.
- Automating responsive images with JavaScript front-end frameworks (client side) — Programmatically sets the <img> src URL to a Cloudinary dynamic URL that delivers the optimal image for the available image width.
- Automating responsive images with the cloudinary-core JS library (client side) — Programmatically sets the <img> src URL to a Cloudinary dynamic URL that delivers the optimal image for the available image width and the device’s DPR.
- Automating responsive images with Client Hints (mobile Chrome only) — Delivers the optimal image for the available width and the device’s DPR as specified in the Client Hints request header.
- Combining responsive automation with other Cloudinary features — Implements advanced RWD and art-directed, responsive images by leveraging Cloudinary’s other automation features.