Bootstrap 5 Badges Pill Badges
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" > <!-- Bootstrap CSS --> < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" /> < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" > </ script > </ head > < body > < div class = "container" > < div class = "mt-5" > < h1 class = "text-success" > w3wiki </ 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" > <!-- Bootstrap CSS --> < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" /> < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" > </ script > </ head > < body > < div class = "container" > < div class = "mt-5" > < h1 class = "text-success" >w3wiki</ 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
Contact Us