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


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.


<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.


<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.


<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.


<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">

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.


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


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


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


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!

Comments and Discussions!

Load comments ↻

Copyright © 2024 www.includehelp.com. All rights reserved.