Bootstrap Badges: Styling and Usage Guide
☰Fullscreen
Table of Content:
badges with Heading
Badges are used to add additional information to any content. Use the .badge class together with a contextual class (like .badge-secondary) within elements to create rectangular badges. Note that badges scale to match the size of the parent element (if any):
Only Important Code
<div class="container"> <h2>Badges</h2> <h1>Example heading <span class="badge badge-secondary">information</span></h1> <h2>Example heading <span class="badge badge-secondary">information</span></h2> <h3>Example heading <span class="badge badge-secondary">information</span></h3> <h4>Example heading <span class="badge badge-secondary">information</span></h4> <h5>Example heading <span class="badge badge-secondary">information</span></h5> <h6>Example heading <span class="badge badge-secondary">information</span></h6> </div>
Full Code For The Above Example
See Live Preview of the above code<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Badges</h2> <h1>Example heading <span class="badge badge-secondary">infomation</span></h1> <h2>Example heading <span class="badge badge-secondary">infomation</span></h2> <h3>Example heading <span class="badge badge-secondary">infomation</span></h3> <h4>Example heading <span class="badge badge-secondary">infomation</span></h4> <h5>Example heading <span class="badge badge-secondary">infomation</span></h5> <h6>Example heading <span class="badge badge-secondary">infomation</span></h6> </div> </body> </html>
Contextual Badges
Use any of the contextual classes (.badge-*) to change the color of a badge:
Only Important Code
<div class="container"> <h2>Contextual Badges</h2> <span class="badge badge-primary">Primary</span> <span class="badge badge-secondary">Secondary</span> <span class="badge badge-success">Success</span> <span class="badge badge-danger">Danger</span> <span class="badge badge-warning">Warning</span> <span class="badge badge-info">Info</span> <span class="badge badge-light">Light</span> <span class="badge badge-dark">Dark</span> </div>
Full Code For The Above Example
See Live Preview of the above code<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Contextual Badges</h2> <span class="badge badge-primary">Primary</span> <span class="badge badge-secondary">Secondary</span> <span class="badge badge-success">Success</span> <span class="badge badge-danger">Danger</span> <span class="badge badge-warning">Warning</span> <span class="badge badge-info">Info</span> <span class="badge badge-light">Light</span> <span class="badge badge-dark">Dark</span> </div> </body> </html>
Pill Badges
Use the .badge-pill class to make the badges more round:
Only Important Code
<div class="container"> <h2>Pill Badges</h2> <span class="badge badge-pill badge-primary">Primary Badges</span> <span class="badge badge-pill badge-secondary">Secondary Badges</span> <span class="badge badge-pill badge-success">Success Badges</span> <span class="badge badge-pill badge-danger">Danger Badges</span> <span class="badge badge-pill badge-warning">Warning Badges</span> <span class="badge badge-pill badge-info">Info Badges</span> <span class="badge badge-pill badge-light">Light Badges</span> <span class="badge badge-pill badge-dark">Dark Badges</span> </div>
Full Code For The Above Example
See Live Preview of the above code<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Pill Badges</h2> <span class="badge badge-pill badge-primary">Primary Badges</span> <span class="badge badge-pill badge-secondary">Secondary Badges</span> <span class="badge badge-pill badge-success">Success Badges</span> <span class="badge badge-pill badge-danger">Danger Badges</span> <span class="badge badge-pill badge-warning">Warning Badges</span> <span class="badge badge-pill badge-info">Info Badges</span> <span class="badge badge-pill badge-light">Light Badges</span> <span class="badge badge-pill badge-dark">Dark Badges</span> </div> </body> </html>
Badge inside an Element
An example of using a badge inside a button:
Only Important Code
<div class="container"> <h2>Badge inside a Button</h2> <button type="button" class="btn btn-primary"> Messages <span class="badge badge-light">10</span> </button> <button type="button" class="btn btn-danger"> Notifications <span class="badge badge-light">17</span> </button> </div>
Full Code For The Above Example
See Live Preview of the above code<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Badge inside a Button</h2> <button type="button" class="btn btn-primary"> Messages <span class="badge badge-light">10</span> </button> <button type="button" class="btn btn-danger"> Notifications <span class="badge badge-light">17</span> </button> </div> </body> </html>