Bootstrap Image Classes: What Are They & How Do They Work?

Bootstrap is an open-source CSS framework for quickly building responsive websites and mobile-first web projects. It comes with a responsive grid system, global CSS settings, optional JavaScript plugins, and extensive pre-built components including carousels, navbars, and forms to speed up the development process.

You can create these components by adding the appropriate Bootstrap classes to elements. If you want to create a Bootstrap button, for example, then you use the .btn class to define a button element (or an anchor or input element). This will make the element clickable, with rounded edges, like a button. Adding a modifier class like .btn-primary or .btn-warning will style the element even further, changing its background and text color. Take a look at the different styles of these classes below.

Image Source

Using Bootstrap classes, you can also style images and opt them into responsive behavior so they scale to their parent elements. That means they’ll scale as their container does when the browser window is resized. Without the Bootstrap framework, you’d have to code a bunch of lines of code to achieve this. With Bootstrap, you only need a class name or two.

Let’s take a closer look at these classes below.

Bootstrap Responsive Image

In Bootstrap 3, the .img-responsive class made an image responsive. It has been replaced by the .img-fluid class in the latest version of Bootstrap.

The .img-fluid class means the following properties and property values are defined for the image:

• max-width: 100%
• height: auto

This tells the browser not to expand the image larger than its container or original size, and to scale down the image if the browser gets narrower than the set width of the image.

Here’s the syntax of the .img-fluid class.

Here’s an example:

See the Pen Bootstrap Responsive Image by Christina Perricone (@hubspot) on CodePen.

Compare this with the image below, which is not defined with the Bootstrap .img-fluid class.

See the Pen Image without Bootstrap Responsive Class by Christina Perricone (@hubspot) on CodePen.

Bootstrap Rounded Image

In Bootstrap 3, the .img-rounded class adds rounded edges to the image. It has been replaced by the .rounded class in the latest version of Bootstrap. This is a border-radius utility that can be applied to images and other elements.

Here’s the syntax of the .rounded class.

Here’s an example:

See the Pen Bootstrap Rounded Image by Christina Perricone (@hubspot) on CodePen.

Bootstrap Circle Image

In Bootstrap 3, the .img-circle class makes an image into a circle. It has been replaced by the .rounded-circle class in the latest version of Bootstrap. Like the .rounded class, this is a border-radius utility that can be applied to images and other elements.

Here’s the syntax of the .rounded-circle class.

Here’s an example:

See the Pen Bootstrap Circle Image by Christina Perricone (@hubspot) on CodePen.

Bootstrap Image Thumbnail

Unlike the .rounded and .rounded-circle classes, the .img-thumbnail class is not a border-radius utility. Rather than shape the edges of an image, the .img-thumbnail class adds a rounded 1px border to the image to make it look like a thumbnail.

Here’s the syntax of the .img-thumbnail class:

Here’s an example:

See the Pen Bootstrap Image Thumbnail by Christina Perricone (@hubspot) on CodePen.

Styling Images with Bootstrap Classes

With Bootstrap classes, you can make your images responsive so that they scale to their parent element. You can also add lightweight styles, like rounded edges or borders, to them via classes. This is just one way Bootstrap saves you time and lines of code when developing web pages.