Badges in Bootstrap

Ethan Karla 341 28 Jul 2021

What are badges in Bootstrap? Why has it been used? State with the help of example.

Ethan Karla

Student

An enthusiastic, adaptive, and fast-learning person with a broad and acute interest in the discovery of new innovative drugs, I particularly enjoy collaborating with scientists from different disciplines to develop new skills and solve new challenges.

1 Answers

Anonymous User 03 Aug 2021

Badges are used to add additional information to any content. Sometimes, you may see that it is used as a tag in many web pages.

For the better understanding of badges of bootstrap let's have an example :

<!DOCTYPE html>

<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>

<head>

    <meta charset='utf-8'>

    <meta name='viewport' content='width=device-width, initial-scale=1'>

    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'>

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js'></script>

    <script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js'></script>

    <title></title>

</head>

<body>

    <div class='jumbotron'>

        <h1>Badges</h1>

        <span class='badge text-capitalize badge-danger'>danger</span>

        <span class='badge text-capitalize badge-dark'>dark</span>

        <span class='badge text-capitalize badge-info'>info</span>

        <span class='badge text-capitalize badge-light'>light</span>

        <span class='badge text-capitalize badge-pill'>pill</span>

        <span class='badge text-capitalize badge-primary'>primary</span>

        <span class='badge text-capitalize badge-success'>success</span>

        <span class='badge text-capitalize badge-warning'>warning</span>

        <span class='badge text-capitalize badge-secondary'>secondary</span>

    </div>

</body>

</html>

Hope this will help you.

Happy Coding!

forum

Badges in Bootstrap

Can you answer this question?

1 Answers