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>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no" />
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"/>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</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>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no" />
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
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=
"https://media.geeksforgeeks.org/wp-content/uploads/20190809013546/gfg_350X350.png"
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>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no" />
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
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=
"https://media.geeksforgeeks.org/wp-content/uploads/20190809013546/gfg_350X350.png"
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>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no" />
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
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=
"https://media.geeksforgeeks.org/wp-content/uploads/20190809013546/gfg_350X350.png"
class="mx-auto d-block"
alt="GeeksforGeeks"
width="300"
height="230" />
</body>
</html>
Output:
Similar Reads
How to align pagination in Bootstrap 4 ?
In this article, we will learn how to align pagination on the website using the Bootstrap classes. The Pagination is a very useful component present in the Bootstrap. Pagination is used to enable navigation between pages in a website as it divides the document into different pages and provides them
8 min read
How to Align Images in CSS?
Aligning images properly is essential for creating visually appealing and well-structured web pages. CSS can provide several methods to achieve this, each suited for the different scenarios. we are going to discuss how can we align images using CSS. Below are the following approaches to align images
6 min read
How to col align right in Bootstrap 5 ?
Bootstrap 5 provides a series of classes that can be used to apply various styling to the tables such as changing the heading appearance, making the rows striped, adding or removing borders, making rows hoverable, etc. In this article, we will learn how we can right align the content in Col. We will
3 min read
How to align two navbars in bootstrap?
Aligning two navbars in Bootstrap involves utilizing its built-in navbar classes and custom CSS styles to create and position navigation bars on a web page. Bootstrap provides predefined classes for navbars that facilitate easy creation and customization. ApproachThe HTML document imports Bootstrap
2 min read
How to Make an Image Rounded in Bootstrap ?
In Bootstrap, you can make an image rounded by applying the rounded class to it. This class sets the border-radius property, giving the image rounded corners for a softer and more visually appealing appearance. Below are the approaches to make an image rounded in Bootstrap: Table of Content Using ro
2 min read
Bootstrap 5 Images Aligning Images
Bootstrap 5 Aligning Images are used to set the alignment to the image. We will use float or text alignment classes to set the alignment of images. We can use the .mx-auto margin utility class to center the block-level images. Aligning Images used Classes: .float-start: This class is used to set the
2 min read
How to Wrap Text Around Image in Bootstrap ?
To wrap text around an image in Bootstrap 5, you can apply the 'float' utility classes along with the 'img-fluid' class for responsive images. This technique involves floating the image to the left or right and creating margins to allow the text to wrap around it. ApproachThe code uses Bootstrap 5 c
3 min read
How to align navbar items to the right in Bootstrap 4 ?
The .ml-auto class in Bootstrap 4 is used to apply an automatic left margin to an element. This moves the element to the right side of its container, which is especially helpful for aligning items when using a flex layout. In this article, we will align the navbar to the right in two different ways,
2 min read
How to align Image in HTML?
Aligning images within a webpage is an essential part of web design. It allows you to control how images are positioned about surrounding content. In HTML, there are several ways to align images using both attributes and CSS techniques, ranging from simple alignment to more advanced responsive layou
4 min read
How to Align Text in Bootstrap Column ?
In Bootstrap Framework, we can align the text within the columns using various utility classes. To align text within a Bootstrap column, use the built-in utility classes such as text-start, text-center, and text-end for the left, center, and right alignment, respectively. Simply apply the desired cl
3 min read