Badge : with heading

Example heading New

Badge : with notification

Badge : with Positioned

Badge : with Positioned Dot

Badge : with bg color

Success

Badge : with pill shape

Danger

Bootstrap Badge Classes

Read More Read More

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, consequatur est illum numquam repellat sapiente sed dicta saepe, velit, consectetur deserunt culpa aliquid ducimus itaque ullam eaque distinctio earum. Sint, autem, ab. Tenetur illum, magni, voluptatum vitae atque provident ea nemo alias minus dolorem nam ipsum, maiores dolores deleniti at.

Exported from Notepad++
<!DOCTYPR html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BootStrap</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> <style> .container{ border: 5px solid #000; margin-bottom:3px; } </style> </head> <body> <!-- Badge with heading --> <div class="container mb-5"> <h2 class="py-2 text-center">Badge : with heading</h2> <div class="row py-2"> <div class="col"> <h1>Example heading <span class="badge bg-secondary">New</span></h1> </div> </div> </div> <!-- Badge with notification --> <div class="container mb-5"> <h2 class="py-2 text-center">Badge : with notification</h2> <div class="row py-2"> <div class="col"> <button type="button" class="btn btn-primary"> Notifications <span class="badge bg-secondary">4</span> </button> </div> </div> </div> <!-- Badge with Positioned --> <div class="container mb-5"> <h2 class="py-2 text-center">Badge : with Positioned</h2> <div class="row py-2"> <div class="col"> <button type="button" class="btn btn-primary position-relative"> Inbox <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger"> 99+ <span class="visually-hidden">unread messages</span> </span> </button> </div> </div> </div> <!-- Badge with Positioned Dot --> <div class="container mb-5"> <h2 class="py-2 text-center">Badge : with Positioned Dot </h2> <div class="row py-2"> <div class="col"> <button type="button" class="btn btn-primary position-relative"> Profile <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle"> <span class="visually-hidden">New alerts</span> </span> </button> </div> </div> </div> <!-- Badge with bg color--> <div class="container mb-5"> <h2 class="py-2 text-center">Badge : with bg color</h2> <div class="row py-2"> <div class="col"> <span class="badge bg-success">Success</span> </div> </div> </div> <!-- Badge with pill shape--> <div class="container mb-5"> <h2 class="py-2 text-center">Badge : with pill shape</h2> <div class="row py-2"> <div class="col"> <span class="badge rounded-pill bg-danger">Danger</span> </div> </div> </div> <!-- Bootstrap Badge Classes --> <div class="container mb-5"> <h2 class="py-2 text-center">Bootstrap Badge Classes</h2> <div class="row py-2"> <div class="col"> <button class="btn btn-primary">Notifications <span class="badge badge-light">5</span> </button> <a href="" class="badge badge-info">Read More</a> <a href="" class="badge badge-pill badge-danger p-2">Read More</a> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, consequatur est illum numquam repellat <span class="badge bg-warning"> sapiente sed dicta saepe</span>, velit, consectetur deserunt culpa aliquid ducimus itaque ullam eaque distinctio earum. Sint, autem, ab. Tenetur illum, magni, voluptatum vitae atque provident ea nemo alias minus dolorem nam ipsum, maiores dolores deleniti at. </p> </div> </div> </div> </body> </html>