Bootstrap 4 Images
Bootstrap 4 images having responsive feature, adjust itself with respect to parent container. There are different type of image shape that is created by different pre-defined classes.
Bootstrap 4 Image Styling
Bootstrap provides 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
General Syntax
<img src="url of the image" class="rounded " alt="Rounded Image">
<img src="url of the image" class="img-thumbnail " alt="Thumbnail Image">
<img src="url of the image" class="rounded-circle" alt="Circular Image">
Source Code
<div class="container mt-5 text-center">
<h2 class="mt-4 mb-4">Bootstrap Image</h2>
<div class="row">
<div class="col-sm-4 col-12 mt-5">
<img src="../code-support/images/bootstrap/bird.jpg" class="rounded img-fluid"
alt="Rounded Image" />
</div><!--/first column-->
<div class="col-sm-4 col-12 text-center mt-5">
<img src="../code-support/images/bootstrap/lily.jpg" class="rounded-circle img-fluid"
alt="Circular Image" style="width: 240px; height: 240px;" />
</div><!--/second column-->
<div class="col-sm-4 col-12 mt-5">
<img src="../code-support/images/bootstrap/rose-flower.jpg"
class="img-thumbnail img-fluid" alt="Thumbnail Image" />
</div><!--/third column-->
</div><!--/row-->
</div><!--/container-->
Source Code: Output
Bootstrap Image
Note: Bootstrap uses .rounded, .rounded-circle,.img-thumbnail to make rounded image, circular image and thumbnail image. This class is applied on the <img> element base class.
Rounded Corner Image Shape
To achieve rounded corners for a image, you have to add .rounded to the <img> element base class.
Source Code
<div class="container mt-4 text-center">
<h2 class="mt-4 mb-4">Rounded Image</h2>
<div class="row">
<div class="col-sm-12 col-12">
<img src="../code-support/images/bootstrap/bird.jpg" class="rounded img-fluid"
alt="Rounded Image" style="width: 150px; height: 150px;" />
</div><!--/first column-->
</div><!--/row-->
</div><!--/container-->
Source Code: Output
Rounded Image
Note:Simply apply .rounded to the <img> element's 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.
Source Code
<div class="container mt-4 text-center">
<h2 class="mt-4 mb-4">Circular Image</h2>
<div class="row">
<div class="col-sm-12 col-12">
<img src="../code-support/images/bootstrap/bird.jpg" class="rounded-circle img-fluid"
alt="Rounded Image" style="width: 150px; height: 150px;" />
</div><!--/first column-->
</div><!--/row-->
</div><!--/container-->
Source Code: Output
Circular Image
Note: In the above example .rounded-circle is applied to the <img> 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="path of the image" class="img-thumbnail" alt="Thumbnail Image" >
Source Code
<div class="container mt-4 text-center">
<h2 class="mt-4 mb-4">Bootstrap Thumbnail Image</h2>
<div class="row">
<div class="col-sm-12 col-12">
<img src="../code-support/images/bootstrap/bird.jpg" class="img-thumbnail"
alt="Thumbnail Image" style="width: 150px; height: 150px;" />
</div><!--/first column-->
</div><!--/row-->
</div><!--/container-->
Source Code: Output
Bootstrap Thumbnail Image
Note:In the above example, assign .img-thumbnail to the <img> 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="path of the image" class="rounded img-fluid" alt="Rounded Responsive Image" >
Source Code
<div class="container mt-4 text-center">
<h2 class="mt-4 mb-4">Responsive Images</h2>
<div class="row">
<div class="col-sm-12 col-12">
<img src="../code-support/images/bootstrap/bird.jpg" class="rounded img-fluid"
alt="Rounded Image" style="width: 150px; height: 150px;" />
</div>
</div><!--/row-->
</div><!--/container-->
Source Code: Output
Responsive Images
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 assigning
.float-leftto the<img>element base class.
General Syntax
<img src="path of the image" class="img-thumbnail float-left" alt="Thumbnail Image" >
Source Code
<div class="container mt-4">
<h2 class="mt-6 mb-5">Bootstrap Image Left Alignment</h2>
<div class="row">
<div class="col-sm-12 col-12">
<img src="../code-support/images/bootstrap/bird.jpg" class="img-thumbnail float-left"
alt="Thumbnail Image" style="width: 150px; height: 150px;" />
</div><!--/first column-->
</div><!--/row-->
</div><!--/container-->
Source Code: Output
Bootstrap Image Left Alignment
Note:In the above example .float-left is applied to the <img> 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="path of the image" class="img-thumbnail float-right" alt="Thumbnail Image" >
Source Code
<div class="container mt-4">
<h2 class="mt-4 mb-4">Image Right Alignment</h2>
<div class="row">
<div class="col-sm-12 col-12 mt-4 mb-4">
<img src="https://picsum.photos/seed/picsum/200/200" class="img-thumbnail float-right"
alt="Thumbnail Image" style="width: 150px; height: 150px;" />
</div><!--/first column-->
</div> <!--/row-->
</div><!--/container-->
Source Code: Output
Image Right Alignment
Note: In this example,.float-right is assigned to the
<img> 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="path of the image" class="d-block mx-auto" alt="Image Center Alignment">
Source Code
<div class="container mt-4 mb-4 clearfix">
<h2 class="m5-4 mb-4 text-center">Center Image Alignment</h2>
<div class="row">
<div class="col-sm-12 col-12 mt-5 mb-4">
<img src="https://picsum.photos/seed/picsum/200/300"
class="d-block mx-auto" alt="external image" />
</div>
</div><!--/row-->
</div><!--/container-->
Source Code: Output
Center Image Alignment
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 <img> element base class.
Alternative Method To Align Bootstrap 4 Images In The Center
Bootstrap 4 images can be easily aligned in the center by assigning .text-center to the image container that contains the image. Then the image will be easily aligned horizontally center.
General Syntax
<div class="text-center">
<img src="path of the image" class="img-thumbnail" alt="Thumbnail Image" />
</div>
Source Code
<div class="container mt-4">
<h2 class="mt-4 mb-4">Other Method To Align Image Center</h2>
<div class="row">
<div class="col-sm-12 col-12 text-center">
<img src="https://picsum.photos/seed/picsum/200/200"
class="img-thumbnail" alt="Thumbnail Image" style="width: 150px; height: 150px;" />
</div>
</div>
<!--/row-->
</div>
<!--/container-->
Source Code: Output
Other Method To Align Image Center
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.
Web Tutorials
