Open In App

How to align pills to center in Bootstrap ?

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. If you are new to Bootstrap we highly recommend going through our Bootstrap 4 introduction.

Pills are a kind of Bootstrap badge with more rounded corners. Pills by default will act as an inline-block element. This behavior is defined in one of Bootstrap’s core style sheets (_badge.scss).

Since the pill is an inline-block element, the alignment of a pill is decided by the alignment mentioned in the parent container of the pill. If the parent container doesn’t have any alignment rules then the styles will be inherited from the closest ancestor of the pill.

We can use Bootstrap’s inbuilt text alignment class text-center to center a pill or a group of pills. If we add the class text-center to the parent container of the pill, we can center align pills.

HTML




<p>
    Center aligned pills in a div by
    adding <i>text-center</i> class
</p>
 
 
<div class="text-center">
    <span class="badge badge-pill badge-primary">
        Primary
    </span>
     
    <span class="badge badge-pill badge-danger">
        Danger
    </span>
</div>


HTML code: The full HTML code will look like below. You can check the working of the below code in our IDE 

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1" />
 
    <!-- Bootstrap CSS library -->
    <link rel="stylesheet" href=
        integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous" />
 
    <!-- jQuery library -->
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous">
    </script>
 
    <!-- JS library -->
    <script src=
        integrity=
"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous">
    </script>
 
    <!-- Latest compiled JavaScript library -->
    <script src=
        integrity=
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous">
    </script>
</head>
 
<body>
    <div class="container">
        <h1>GeeksforGeeks</h1>
         
<p>A computer science portal for geeks</p>
 
 
        <!-- Add pills -->
         
<p>
            Center aligned pills in a div by
            adding <i>text-center</i> class
        </p>
 
 
        <div class="text-center">
            <span class="badge badge-pill badge-primary">
                Primary
            </span>
             
            <span class="badge badge-pill badge-danger">
                Danger
            </span>
        </div>
    </div>
</body>
 
</html>


Output:

Bootstrap pill

Similarly, we can use text-right to right-align the pills and text-left to left-align the pills.

There are some scenarios in which adding the class text-center to the parent is not possible as it will affect other styles of the parent. In these scenarios, the recommended way is to wrap pills with a block-level tag such as div or a paragraph tag



Last Updated : 10 Sep, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads