Bootstrap Images

Here we will study about how what Bootstrap 4 has in store for the image elements of your web pages.

Bootstrap 4 images Shapes

Using Bootstrap, the images can be rendered in the following three shapes:

  • Rounded Corners:
  • Circle
  • Thumbnail

Out of these three, the first two are not supported by IE8 or earlier versions

Bootstrap Rounded Corners images

For rounded corners, you can use the .rounded class with your <img> tag.

For example:

Circle images in bootstrap

Adding the .rounded-circle class to <img> the tag will shape your image into a circle.

For example:

Thumbnail images bootstrap

The thumbnail shape can be achieved using the .img-thumbnail class.

For example:

Bootstrap images responsive

The sizes of the images and screens might not go hand-in-hand more often than you can predict.

We need to have responsive images that can automatically adjust as per the size of the screen.

We can make the images responsive using the class. .img-fluid class with the <img> tag.

Now, the image will, nicely, scale to the parent element.

When using .img-fluid class the display is automatically set to block and max-width to 100%. Similarly, height is set to auto as well.

See the code below for example:

Bootstrap Images Gallery

The image gallery can be created by using Bootstrap’s grid system along with the .thumbnail class.

The code below illustrated the same:

Bootstrap Responsive Embeds

Not only the images but the other embedded media like videos and slideshows can also be made responsive to scale properly on any device.

For this, you need to add the class embed-responsive to any <div> item.

You will also need to add the .embed-responsive-item to your <iframe>, <embed>, <video>, and <object> elements.

What is aspect ratio?

The aspect ratio of any image can be described as the proportional relationship between the image’s width and height.

The most common video aspect ratios we have are 4:3 which was a universal video format of the 20th century and 16:9 that is commonly known for the HD television.

We have two classes for these aspect ratios in Bootstrap:

  • embed-responsive embed-responsive-4by3
  • embed-responsive embed-responsive-16by9

Bootstrap <img> Classes

Bootstrap has the following classes for styling your image elements

  • .rounded: To add rounded corners to the image
  • .rounded-circle: To shapes the image into a circle
  • .img-thumbnail: To shape the image into a thumbnail
  • .img-fluid: To make the image responsive make it scale nicely to the parent element.

Bootstrap center images

Block-level images can be centered using .mx-auto

bootstrap images in a row

Bootstrap image gallery

Good Reference image Gallery
See Multiple Gallery

Bootstrap images side by side

Create a row and divide the row into columns inside column insert image.

This will display images side by side

How to make images responsive in bootstrap

To make images responsive in bootstrap use .img-fluid class

Bootstrap background image

Showing image in background is very simple

use background-image: url(..) css property with url.

Example of background image is as below