How to align pills to center in Bootstrap ?

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 code: The full HTML code will look like below.

Output:

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