How to align images in Bootstrap 4 ?
Last Updated :
23 Sep, 2021
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:
<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-left class for aligning towards left, .float-right to align towards right.
- For aligning at the center, we need to use .mx-auto and .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.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no" />
<link
rel="stylesheet"
href=
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"/>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<script
src=
integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous">
</script>
<script
src=
integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous">
</script>
<script
src=
integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous">
</script>
</body>
</html>
|
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.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no" />
<link rel="stylesheet"
href=
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous" />
<title>Hello, world!</title>
</head>
<body style="background-color: rgb(15, 57, 33)">
<h1 style="color: white">Image at the Left!</h1>
<img src=
class="float-left"
alt="GeeksforGeeks"
width="300"
height="230" />
</body>
</html>
|
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.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no" />
<link rel="stylesheet"
href=
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous" />
<title>Hello, world!</title>
</head>
<body style="background-color: rgb(15, 57, 33)">
<h1 style="color: white">Image at the Right!</h1>
<img src=
class="float-right"
alt="GeeksforGeeks"
width="300"
height="230" />
</body>
</html>
|
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.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no" />
<link rel="stylesheet"
href=
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous" />
<title>Hello, world!</title>
</head>
<body style="background-color: rgb(15, 57, 33)">
<h1 style="color: white">Image at the Center!</h1>
<img src=
class="mx-auto d-block"
alt="GeeksforGeeks"
width="300"
height="230" />
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...