Skip to content
Related Articles

Related Articles

Improve Article

How to align images in Bootstrap 4 ?

  • Last Updated : 23 Sep, 2021
Geek Week

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-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=
      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=
      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>
  
    <!-- 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=
          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>
  
    <!-- 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=
          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>
  
    <!-- 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=
          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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :