Badges in Bootstrap

Ethan Karla 409 28 Jul 2021

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

Ask by Ethan Karla

Updated 28 Jul 2021

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!

Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md

forum

Badges in Bootstrap

Can you answer this question?

1 Answers