Bootstrap 5 Images Aligning Images

Last Updated : 18 Nov, 2022

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 position of an element to left.
.float-end: This class is used to set the position of an element to right.
.float-none: This class is used to set the position of an element to none.
.text-start: This class is used to set the position of the text element to left.
.text-center: This class is used to set the position of the text element to the center.
.text-end: This class is used to set the position of the text element to right.
.mx-auto: This class is used with .d-block class to set the position of the element to the center.

Syntax:

// Float utility class
<img src="..." class="rounded float-*" alt="...">

// Text align utility class
<div class="text-*">
  <img src="..." class="rounded" alt="...">
</div>

// mx-auto margin utility class
<img src="..." class="rounded mx-auto d-block" alt="...">

Example 1: In this example, we will use .float-start and .float-end classes to set the image alignment.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap 5 Images Aligning Images</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous">
    </script>
</head>

<body>
    <div class="container text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>

        <h2>Bootstrap 5 Images Aligning Images</h2>

        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
            class="rounded float-start" alt="GFG">

        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
            class="rounded float-end" alt="GFG">
    </div>
</body>

</html>

Output:

Example 2: In this example, we will use .text-start, .text-center, and .text-end classes to set the image alignment.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap 5 Images Aligning Images</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous">
    </script>
</head>

<body>
    <div class="container">

        <div class="text-center">
            <h1 class="text-success">
                GeeksforGeeks
            </h1>

            <h2>Bootstrap 5 Images Aligning Images</h2>
        </div>

        <div class="text-start">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
                class="rounded" alt="GFG">
        </div>

        <div class="text-center">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
                class="rounded text-end" alt="GFG">
        </div>

        <div class="text-end">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
                class="rounded text-end" alt="GFG">
        </div>
    </div>
</body>

</html>

Output:

Example 3: In this example, we will use .mx-auto and .d-block classes to set the image alignment.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap 5 Images Aligning Images</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous">
    </script>
</head>

<body>
    <div class="container">

        <div class="text-center">
            <h1 class="text-success">
                GeeksforGeeks
            </h1>

            <h2>Bootstrap 5 Images Aligning Images</h2>
        </div>

        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
            class="rounded mx-auto d-block" alt="GFG">
    </div>
</body>

</html>