Bootstrap 4 Images

Bootstrap 4 images provide rounded, circular and thumbnail shape for a single image. To achieve these shape you have to apply .rounded,.rounded-circle,.img-thumbnail class to the <img> base class.

Example

Example

General Syntax

		<img src="...." class="rounded" alt="Rounded Image" />
<img src="....." class="rounded-circle" alt="Circular Image" />
<img src="...." class="img-thumbnail" alt="Thumbnail Image" />

Try It Now

Source Code

	
		<div class="container">
  <div class="row">
    <div class="col-12 col-md-4">
      <img src="../code-support/images/bootstrap/bird.jpg" class="rounded img-fluid" alt="Rounded Image" />
    </div>
    <div class="col-12 col-md-4">
      <img src="../code-support/images/bootstrap/lily.jpg" class="rounded-circle img-fluid" alt="Circular Image" />
    </div>
    <div class="col-12 col-md-4">
      <img src="../code-support/images/bootstrap/rose-flower.jpg" class="img-thumbnail img-fluid" alt="Thumbnail Image" />
    </div>
  </div>
</div>

Try it yourself

Source Code : Output

Note:Bootstrap uses .rounded,.rounded-circle,.img-thumbnail to make rounded image,circular image and thumbnail image.This class is applied on the lt;img;gt; base class.

Rounded Corners Image Shape

To achieve rounded corners for a image,you have to add .rounded to the <img> element base class.

Example

General Syntax

		<img src=".." class="rounded" alt="Rounded Image">

Try It Now

Source Code

	
		<div class="container">
  <div class="row">
    <div class="col-12 text-center">
      <img src="../code-support/images/bootstrap/bird.jpg" class="rounded img-fluid" 
           alt="Rounded Image" style="width: 200px; height: 200px;" />
    </div>
  </div>
</div>

Try it yourself

Source Code : Output

Note: Simply apply .rounded to the <img> element base class to make rounded image.

Circle Image Shape

To achieve circle shape of a image,you have to add .rounded-circle to the <img> base class.

General Syntax

		<img src="...." class="rounded-circle" alt="Rounded circle Image">

Try It Now

Source Code

	
		<div class="container">
  <div class="row">
    <div class="col-12 text-center">
      <img src="../code-support/images/bootstrap/bird.jpg" class="rounded-circle img-fluid"
           alt="Rounded circle Image" style="width: 200px; height: 200px;" />
    </div>
  </div>
</div>

Try it yourself

Source Code : Output

Note:In the above example .rounded-circle is applied to the element base class.

Thumbnail Image Shape

To achieve thumbnail image shape ,you have to add .img-thumbnail to the <img> base class.

General Syntax

		<img src="....." class="img-thumbnail" alt="Thumbnail Image">

Try It Now

Source Code

	
		<div class="container">
  <div class="row">
    <div class="col-12 text-center">
      <img src="../code-support/images/bootstrap/bird.jpg" class="img-thumbnail"
        alt="Thumbnail Image" style="width: 200px; height: 200px;" />
    </div>
  </div>
</div>

Try it yourself

Source Code : Output

Note:In the above example,assign .img-thumbnail to the element base class.

Responsive Images

Responsive images adjusts itself with respect to parent container.To create responsive image,you have to apply .img-fluid class to the <img> base class.

General Syntax

		<img src="......" class="rounded img-fluid" alt="Rounded Image">

Try It Now

Source Code

	
		<div class="container">
  <div class="row">
    <div class="col-12 text-center">
      <img src="../code-support/images/bootstrap/bird.jpg" class="rounded img-fluid" alt="Rounded Image" 
           style="width: 200px; height: 200px;" />
    </div>
  </div>
</div>

Try it yourself

Source Code : Output

Note: Please keep in minds that .img-fluid class provides max-width:100%; and height:auto; to the images.

Image Alignment

Image Left Alignment

Bootstrap provides helper classes namely float classes and text alignment classes and margin utility class that plays a vital role to align any image.

The followings are the steps for aligning the image in the left direction.

Std: Any image can be aligned in the left direction by assinging .float-left to the <img> element base class.

General Syntax

		<img src="........." class="img-thumbnail float-left" alt="Thumbnail Image" >

Try It Now

Source Code

	
		<div class="container">
  <div class="row">
    <div class="col-12 text-center">
      <img src="../code-support/images/bootstrap/bird.jpg" class="img-thumbnail float-left"
           alt="Thumbnail Image" style="width: 200px; height: 200px;" />
    </div>
  </div>
</div>

Try it yourself

Source Code : Output

Note:In the above example .float-left is applied to the element base class.

Image:Right Alignment

The image can be aligned in the right direction of the container by just assigning .float-right to the <img> element base class.Therefore image will be shifted in the right direction of the container.To clear float ,you have to assign .clearfix to the parent container of the <img> element.

General Syntax

		<img src="......" class="img-thumbnail float-right" alt="Thumbnail Image">

Try It Now

Source Code

	
		<div class="container">
  <div class="row">
    <div class="col-12 text-center">
      <img src="../code-support/images/bootstrap/bird.jpg" class="img-thumbnail float-right" 
           alt="Thumbnail Image" style="width: 200px; height: 200px;" />
    </div>
  </div>
</div>

Try it yourself

Source Code : Output

Note: In this example,.float-right is assigned to the element base class.

Image:Center Alignment

Image can be aligned center with respect to the parent container. Basically, two techniques are used to aligned any image horizontally center.

Apply .mx-auto & .d-block to the <img> element base class.It will be placed the image horizontally center.

General Syntax

		<img src="......" class="img-thumbnail d-block mx-auto" alt="Thumbnail Image">

Try It Now

Source Code

	
		<div class="container">
  <div class="row">
    <div class="col-12 text-center">
      <img src="../code-support/images/bootstrap/bird.jpg" class="img-thumbnail d-block mx-auto" 
           alt="Thumbnail Image" style="width: 200px; height: 200px;" />
    </div>
  </div>
</div>

Try it yourself

Source Code : Output

Note: Since image is a inline element hence it will be converted into block level element by .d-bloack & then aligned horizontally center by .mx-auto.Please keep in mind that both class will be applied on element base class.

Other Method To Align Image Center

Add.text-center to the image container that contains the image.Therefore image can be easily aligned horizontally center.

General Syntax

		<div class="col-sm-12 col-12 text-center">
  <img src="......" class="img-thumbnail" alt="Thumbnail Image" />
</div>

Try It Now

Source Code

	
		<div class="container">
  <div class="row">
    <div class="col-12 text-center">
      <img src="../code-support/images/bootstrap/bird.jpg" class="img-thumbnail" alt="Thumbnail Image" 
           style="width: 200px; height: 200px;" />
    </div>
  </div>
</div>

Try it yourself

Source Code : Output

Note: In this method,you do not have to assign .mx-auto and .d-block to the image.You have to only put the image inside the container and assign .text-center to the container.

Our Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS