Bootstrap Images

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

Bootstrap Image Shapes

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

  • Rounded Corners:
  • Circle
  • Thumbnail

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

Bootstrap Rounded Corners images

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

For example:

Bootstrap Circle Image

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

For example:

Bootstrap Thumbnail

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

For example:

Bootstrap Responsive Images

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-responsive class with the <img> tag.

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

When using .img-responsive 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 Image Gallery

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

The code below illustrated the same:

Bootstrap Responsive Embeds

Not only the images, the other embedded media like videos and slideshows can 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 ration in Bootstrap:

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

Bootstrap <img> Classes

Bootstrap has following classes for styling your image elements

  • .img-rounded: To add rounded corners to the image (not supported by IE8)
  • .img-circle: To shapes the image into a circle (not supported by IE8)
  • .img-thumbnail: To shape the image into a thumbnail
  • .img-responsive: To make the image responsive make it scale nicely to the parent element.