We know that adding images to a website makes it more attractive and presentable. Sometimes, we need to align the images either at the right or to the left. Most of the time, we place an image at the center. With traditional CSS, we had to write a bunch of code to accomplish this specific task. Bootstrap offers different classes for images to make their appearance better and also to make them responsive. Making an image responsive means it should scale according to its parent element. That is, the size of the image should not overflow its parent element and will grow and shrink according to the change in the size of its parent without losing its aspect ratio. Using Bootstrap 4, it is easy to apply pre-defined bootstrap classes to align the images. In this article, we will learn to align images in Bootstrap 4.
Syntax:
- For Responsive image
<img src=”image_source” class=”img-fluid” …>
- For aligning the image to the left
<img src=”image_source” class=”float-left” …>
- For aligning the image to the right
<img src=”image_source” class=”float-right” …>
- For aligning the image to the center
<img src=”image_source” class=”mx-auto d-block” …>
Approach:
- Place the image at the required line inside the <body> tag.
- Wrap the image element in .float-leftclass for aligning towards left, .float-right to align towards right.
- For aligning at the center, we need to use .mx-autoand .d-block classes of bootstrap.
- In order to create a responsive image, we can use the .img-fluid class within the <img> tag.
We will follow the below steps to make align the images:
Step 1: Include Bootstrap CSS in the HTML <head> section to load the stylesheet.
<link rel=”stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css”integrity=”sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm”crossorigin=”anonymous”>
Add the Bootstrap JavaScript plugin and dependency.
<script src=”https://code.jquery.com/jquery-3.2.1.slim.min.js”integrity=”sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN”crossorigin=”anonymous”></script><script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js”integrity=”sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q”crossorigin=”anonymous”></script><script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js”integrity=”sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl”crossorigin=”anonymous”></script>
Step 2: We can directly copy the Bootstrap starter template as given in the official Bootstrap documentation.
Step 3: Wrap the image element inside .float-left, .float-right or .mx-auto and .d-block classes classes to align it in the desired position.
The following examples will demonstrate the concept of alignment of the image.
Example 1: Aligning image to the left
We can align or float an image to the left with the help of bootstrap’s .float-left class.
Output:
Example 2: Aligning image to the right
We can align or float an image to the right with the help of bootstrap’s .float-right class.
Output:
Example 3: Aligning image at the center
We can align an image at the center with the help of bootstrap’s .mx-auto (which in CSS means margin: auto) and .d-block (which in CSS means display: block) classes.
Output:
