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 : andlt;!DOCTYPE html> andlt;html lang='en' xmlns='http://www.w3.org/1999/xhtml'> andlt;head> and and andlt;meta charset='utf-8'> and and andlt;meta name='viewport' content='width=device-width, initial-scale=1'> and and andlt;link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'> and and andlt;script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'>andlt;/script> and and andlt;script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js'>andlt;/script> and and andlt;script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js'>andlt;/script> and and andlt;title>andlt;/title> andlt;/head> andlt;body> and and andlt;div class='jumbotron'> and and and and andlt;h1>Badgesandlt;/h1> and and and and andlt;span class='badge text-capitalize badge-danger'>dangerandlt;/span> and and and and andlt;span class='badge text-capitalize badge-dark'>darkandlt;/span> and and and and andlt;span class='badge text-capitalize badge-info'>infoandlt;/span> and and and and andlt;span class='badge text-capitalize badge-light'>lightandlt;/span> and and and and andlt;span class='badge text-capitalize badge-pill'>pillandlt;/span> and and and and andlt;span class='badge text-capitalize badge-primary'>primaryandlt;/span> and and and and andlt;span class='badge text-capitalize badge-success'>successandlt;/span> and and and and andlt;span class='badge text-capitalize badge-warning'>warningandlt;/span> and and and and andlt;span class='badge text-capitalize badge-secondary'>secondaryandlt;/span> and and andlt;/div> andlt;/body> andlt;/html> Hope this will help you. Happy Coding!

forum

home / developersection / forums / badges in bootstrap

Ask Question

Badges in Bootstrap

Ethan Karla 224 28-Jul-2021

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

bootstrap

Updated on 28-Jul-2021

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.

Can you answer this question?

Answer

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

Ethan Karla

Can you answer this question?

1 Answers

Liked By