How to align pills to center in Bootstrap ?
Last Updated :
05 May, 2025
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.
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=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous" />
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<!-- JS library -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity=
"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous">
</script>
<!-- Latest compiled JavaScript library -->
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
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 pillSimilarly, 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
Similar Reads
How to Align Modal to Center of the Screen in Bootstrap? Aligning a modal to the center of the screen in Bootstrap means positioning the modal window vertically and horizontally at the center of the viewport. This can be achieved using Bootstrap's classes like modal-dialog-centered, which ensures the modal appears in the middle, providing a balanced and u
1 min read
How to Align Text in Bootstrap Column ? In Bootstrap Framework, we can align the text within the columns using various utility classes. To align text within a Bootstrap column, use the built-in utility classes such as text-start, text-center, and text-end for the left, center, and right alignment, respectively. Simply apply the desired cl
3 min read
How to col align right in Bootstrap 5 ? Bootstrap 5 provides a series of classes that can be used to apply various styling to the tables such as changing the heading appearance, making the rows striped, adding or removing borders, making rows hoverable, etc. In this article, we will learn how we can right align the content in Col. We will
3 min read
How to col align right in Bootstrap 5 ? Bootstrap 5 provides a series of classes that can be used to apply various styling to the tables such as changing the heading appearance, making the rows striped, adding or removing borders, making rows hoverable, etc. In this article, we will learn how we can right align the content in Col. We will
3 min read
How to align two navbars in bootstrap? Aligning two navbars in Bootstrap involves utilizing its built-in navbar classes and custom CSS styles to create and position navigation bars on a web page. Bootstrap provides predefined classes for navbars that facilitate easy creation and customization. ApproachThe HTML document imports Bootstrap
2 min read
How to Center the Text in Bootstrap ? To center text in Bootstrap, you can use the class "text-center" on the parent element of the text you want to center. This class aligns the text horizontally in the center of its container, providing a simple and effective way to achieve centered text styling within Bootstrap layouts. Table of Cont
2 min read