Bootstrap5 - How do i create a Badge with CSS (Contextual,Button badge)

Published September 24, 2021

Badges are small buttons that are used to promote particular content. It is the small count and labeling component that are mostly used in documentation or built-in website

 

To create badges with bootstrap we need to first inclus bootstrap5 css and js files inside our file, then we can apply badge class to our widgets.

Let's create an html file badge.html

Let's include bootstrap5 css and js file file

 

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

 

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

 

Add badge to file

To add badge to file we need to use badge class of bootstrap

<h2>Badge</h2>
<h1>Welcome to <span class = "badge bg-secondary">RRTutors - Bootstrap5</span></h1>
<h2>Welcome to <span class = "badge bg-secondary">RRTutors - Bootstrap5</span></h2>
<h3>Welcome to <span class = "badge bg-secondary">RRTutors - Bootstrap5</span></h3>
<h4>Welcome to <span class = "badge bg-secondary">RRTutors - Bootstrap5</span></h4>
<h5>Welcome to <span class = "badge bg-secondary">RRTutors - Bootstrap5</span></h5>
<h6>Welcome to <span class = "badge bg-secondary">RRTutors - Bootstrap5</span></h6>

 

Now run file in your browser it will show below output

Bootstrap5 badge

 

 

Create contextual badges

To create contextual and pill badges we will use the class bg-pill.

<div class = "container">
    <h2>Contextual Badges</h2>
    <span class = "badge bg-primary">Primary Badge</span>
    <span class = "badge bg-secondary">Secondary Badge</span>
    <span class = "badge bg-success">Success Badge</span>
    <span class = "badge bg-danger">Danger Badge</span>
    <span class = "badge bg-warning">Warning Badge</span>
    <span class = "badge bg-info">Info Badge</span>
    <span class = "badge bg-light">Light Badge</span>
    <span class = "badge bg-dark">Dark Badge</span>
</div>


</br>
<div class = "container">
    <h2>Pill Badges</h2>
    <span class = "badge bg-pill bg-primary">Primary Badge</span>
    <span class = "badge bg-pill bg-secondary">Secondary Badge</span>
    <span class = "badge bg-pill bg-success">Success Badge</span>
    <span class = "badge bg-pill bg-danger">Danger Badge</span>
    <span class = "badge bg-pill bg-warning">Warning Badge</span>
    <span class = "badge bg-pill bg-info">Info Badge</span>
    <span class = "badge bg-pill bg-light">Light Badge</span>
    <span class = "badge bg-pill bg-dark">Dark Badge</span>
</div>

 

css create contextual badges

 

How can we create badge inside a button?

To add badge inside button we will first create a button then add span class inside button text with badge type  bg-danger, bg-light classes.

<div class = "container">
    <h2>Badge inside a Button</h2>
    <button type = "button" class = "btn btn-info">
        Home <span class = "badge bg-danger">26</span>
    </button>

    <button type = "button" class = "btn btn-info">
        Messages <span class = "badge bg-light">19</span>
    </button>

    <button type = "button" class = "btn btn-info">
        Messages <span class = "badge bg-danger border border-light rounded-circle">9</span>
    </button>
</div>

 

 

Create badge inside button

 

Complete Example code

<html lang = "en">
<head>
    <!-- Meta tags -->
    <meta charset = "utf-8">
    <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Bootstrap 5 Badge Example</title>
</head>

<body>
<div class = "container">
    <h2>Badge</h2>
    <h1>Welcome to <span class = "badge bg-secondary">RRTutors - Bootstrap5</span></h1>
    <h2>Welcome to <span class = "badge bg-secondary">RRTutors - Bootstrap5</span></h2>
    <h3>Welcome to <span class = "badge bg-secondary">RRTutors - Bootstrap5</span></h3>
    <h4>Welcome to <span class = "badge bg-secondary">RRTutors - Bootstrap5</span></h4>
    <h5>Welcome to <span class = "badge bg-secondary">RRTutors - Bootstrap5</span></h5>
    <h6>Welcome to <span class = "badge bg-secondary">RRTutors - Bootstrap5</span></h6>
</div>


</br>
</br>
</br>
<div class = "container">
    <h2>Contextual Badges</h2>
    <span class = "badge bg-primary">Primary Badge</span>
    <span class = "badge bg-secondary">Secondary Badge</span>
    <span class = "badge bg-success">Success Badge</span>
    <span class = "badge bg-danger">Danger Badge</span>
    <span class = "badge bg-warning">Warning Badge</span>
    <span class = "badge bg-info">Info Badge</span>
    <span class = "badge bg-light">Light Badge</span>
    <span class = "badge bg-dark">Dark Badge</span>
</div>


</br>
<div class = "container">
    <h2>Pill Badges</h2>
    <span class = "badge bg-pill bg-primary">Primary Badge</span>
    <span class = "badge bg-pill bg-secondary">Secondary Badge</span>
    <span class = "badge bg-pill bg-success">Success Badge</span>
    <span class = "badge bg-pill bg-danger">Danger Badge</span>
    <span class = "badge bg-pill bg-warning">Warning Badge</span>
    <span class = "badge bg-pill bg-info">Info Badge</span>
    <span class = "badge bg-pill bg-light">Light Badge</span>
    <span class = "badge bg-pill bg-dark">Dark Badge</span>
</div>

</br>
</br>
<div class = "container">
    <h2>Badge inside a Button</h2>
    <button type = "button" class = "btn btn-info">
        Home <span class = "badge bg-danger">26</span>
    </button>

    <button type = "button" class = "btn btn-info">
        Messages <span class = "badge bg-light">19</span>
    </button>

    <button type = "button" class = "btn btn-info">
        Messages <span class = "badge bg-danger border border-light rounded-circle">9</span>
    </button>
</div>
</br>
</br>

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

</body>
</html>

 

Conclusion: We created different types of Badges using css and bootstrap5 classes.

Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

846 Views