Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to align pills to center in Bootstrap ?

  • Last Updated : 10 Sep, 2021

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!