Home » Web programming » Bootstrap

Create a Responsive Image and Image shape | Bootstrap

Here, we are going to learn how to create responsive image and image shape in Bootstrap?
Submitted by Bharti Parmar, on November 22, 2018

Introduction:

In the previous article, we have discussed How to create a table using bootstrap? So, in this article, we will learn bootstrap styles to create a responsive image and image shapes.

Bootstrap Image Shape

Bootstrap provides specific classes that can be used for responsive images when working with the <img> element. We can opt image into receptive behavior; So, they can never come to be larger than their parent elements and we can add lightweight styles to them via classes.

Bootstrap render images with some different classes are:

• Rounded Corner
• Circle
• Thumbnail

1) 1) Rounded Corner

In bootstrap3, .img-rounded class is used but, in bootstrap4 .rounded-*(like .top, .bottom, .right, .left, .circle, .rounded-0) class is used inside the .img element to adds rounded corner to an image.

Viz:

<img src="image.jpg" class="rounded" alt="image">

2) Circle

In bootstrap3, .img-circle class is used but, in bootstrap4 .rounded-circle class is used inside the .img element to give shape the image to a circle.

Viz:

<img src="image.jpg" class="rounded-circle" alt="image">

3) Thumbnail

Bootstrap uses .img-thumbnail class inside the .img element to give 1 pixel bordered (thumbnail) shape to image.

Viz:

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

Aligning Images

You can either use .float classes(.left, .right, .-*-left, .-*-right, .none, .-*-none) to float an image left or right or disable floating, based on current viewport size or text alignment classes to align image horizontally.

Viz:

<img src="image.jpg" class="float-left"> 

Centered Image

In bootstrap .mx-auto (margin: auto) and .d-block class (display: block) is used to center an image.

• Centering Block-level
  In bootstrap4 for block-level image use .mx-auto with .d-block class. For responsive block level you can use .mx-*-auto class. In bootstrap3 .center-block class is used for center block level image.

<img src="image.jpg" class="img-circle mx-auto d-block" alt="image">

• Non-Block-level Image
  In bootstrap for non-block-level image use .text-center and .text-*-center class on parent image. You can also use its helper class .text-left, .text-right, .text-*-left, .text-*right classes.

<div class="text-center">
	<img src="image.jpg" class="img-circle" alt="image">
</div>

Responsive Image

In bootstrap4 .img-fluid class is used to automatically fit the size of the image on screen. .img-fluid class provide max-width:100% and height:auto to make an image scale to the parent element appropriately across devices. bootstrap3 uses .img-responsive class for responsive image which provide max-width:100%, height: auto and display: block.

Viz:

<img class="img-fluid" src="image.jpg" alt="image">
<img class="img-responsive" src="image.jpg" alt="image">

Picture

<picture> element is using to specify multiple .source elements for a specific image. Use .img-* class inside .img tag not in <picture> tag.

Viz:

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

Conclusion:

In this article, we have learned how to create Responsive image and image shape with bootstrap image styles? I hope you understand the concept. Stay tuned for the next article. See you soon in the next article! Happy Learning!