Bootstrap 5 Badges Pill Badges
Last Updated :
19 Dec, 2022
Bootstrap 5 Badges Pill badges can be made by using the rounded-pill class on the badge component. This is used to give the badges a rounded corner shape.
Bootstrap 5 Badges Pill badge Class:
- rounded-pill: This class is used with the badge class to make badges pill-shaped.
Syntax:
<span class="rounded-pill badge">
...
</span>
Example 1: In this example, we used the rounded-pill class to make the badges pill-shaped. We also used the background color utilities to change the background color of pill badges.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href=
<script src=
</script>
</head>
<body>
<div class="container">
<div class="mt-5">
<h1 class="text-success">
GeeksforGeeks
</h1>
<strong>Bootstrap 5 Badges Pill badges</strong>
</div>
<span class="rounded-pill badge
bg-primary mt-4">
Pill Badge - Primary
</span>
<br>
<span class="rounded-pill badge
bg-warning text-dark mt-3">
Pill Badge - Warning
</span>
<br>
<span class="rounded-pill badge
bg-danger mt-3">
Pill Badge - Danger
</span>
<br>
<span class="rounded-pill badge
bg-secondary mt-3">
Pill Badge - Secondary
</span>
<br>
<span class="rounded-pill badge
bg-success mt-3">
Pill Badge - Success
</span>
<br>
<span class="rounded-pill badge
bg-light text-dark mt-3">
Pill Badge - Light
</span>
<br>
<span class="rounded-pill badge
bg-info text-dark mt-3">
Pill Badge - Info
</span>
</div>
</body>
</html>
|
Output:
Example 2: In this example, we used pill badges with button components with different background colors.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href=
<script src=
</script>
</head>
<body>
<div class="container">
<div class="mt-5">
<h1 class="text-success">GeeksforGeeks</h1>
<strong>Bootstrap 5 Badges Pill badges</strong>
</div>
<br>
<button type="button" class="btn btn-primary mt-4">
Button 1
<span class="rounded-pill badge bg-danger">
Danger Colored Pill Badge
</span>
</button>
<br>
<button type="button" class="btn btn-primary mt-4">
Button 2
<span class="rounded-pill badge bg-warning">
Warning Colored Pill Badge
</span>
</button>
<br>
<button type="button" class="btn btn-primary mt-4">
Button 3
<span class="rounded-pill badge bg-secondary">
Secondary Colored Pill Badge
</span>
</button>
<br>
<button type="button" class="btn btn-primary mt-4">
Button 4
<span class="rounded-pill badge bg-success">
Success Colored Pill Badge
</span>
</button>
</div>
</body>
</html>
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/badge/#pill-badges
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...