Open In App

Bootstrap 5 Columns Horizontal Alignment

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap5 Columns Horizontal alignment is used to align the columns horizontally so that we can define how the columns will be displayed in a single line.

Column Horizontal Alignment classes used: 

  • justify-content-start: This class is used to align columns from start.
  • justify-content-center: This class is used to align columns from the center.
  • justify-content-end:  This class is used to align columns in the end.
  • justify-content-around: This class is used to make equal spacing between 2 columns.
  • justify-content-between: This class is used to add space between the columns elements.
  • justify-content-evenly: This class is used to make equal spacing between right and left of 2 columns.

Syntax:

<div class="row justify-content-*">
    <div class="col-4">
        ...
    </div>
    <div class="col-4">
        ...
    </div>
</div>

 

Example 1: In this example, we will learn about horizontal alignment from start and center.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link href=
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
    <title>Columns Horizontal alignment</title>
</head>
  
<body>
    <div class="container text-center col-8 ">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2>
            Bootstrap5 Columns Horizontal alignment
        </h2>
        <div class="row justify-content-start 
                    text-white bg-success">
            <div class="col-2 mt-3">
                Start 1
            </div>
            <div class="col-2 mt-3">
                Start 2
            </div>
            <div class="col-2 mt-3">
                Start 3
            </div>
        </div>
        <div class="row justify-content-center 
                    bg-success text-white mt-3">
            <div class="col-2 mt-3">
                Center 1
            </div>
            <div class="col-2 mt-3">
                Center 2
            </div>
            <div class="col-2 mt-3">
                Center 3
            </div>
        </div>
    </div>
</body>
  
</html>


Output

 

Example 2: In this example, we will learn about horizontal alignment from the end and even alignment.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link href=
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous">
    <title>Columns Horizontal alignment</title>
</head>
  
<body>
    <div class=" container text-center col-8 ">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2>
            Bootstrap5 Columns Horizontal alignment
        </h2>
        <div class="row justify-content-end 
                    text-white bg-success">
            <div class="col-2 mt-3">
                End 1
            </div>
            <div class="col-2 mt-3">
                End 2
            </div>
            <div class="col-2 mt-3">
                End 3
            </div>
        </div>
        <div class="row justify-content-evenly 
                    bg-success text-white mt-3">
            <div class="col-2 mt-3">
                Even 1
            </div>
            <div class="col-2 mt-3">
                Even 2
            </div>
            <div class="col-2 mt-3">
                Even 3
            </div>
        </div>
    </div>
</body>
  
</html>


Output

 

Reference: https://getbootstrap.com/docs/5.0/layout/columns/#horizontal-alignment



Last Updated : 07 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads