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
< 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" />
< link rel = "stylesheet" href =
integrity =
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin = "anonymous" />
integrity =
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous" >
</ script >
< script src =
integrity =
"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin = "anonymous" >
</ script >
< 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 >
< 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
Share your thoughts in the comments
Please Login to comment...