HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Badges are used to add additional information to any content
Badges are used to add additional information to any content:
Example heading New
Example heading New
Example heading New
Example heading New
Use the .badge
class together with a
contextual class (like .bg-secondary
) within <span>
elements to create rectangular badges. Note that badges scale to match the size of the
parent element (if any):
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>
Use any of the contextual classes (.bg-*
) to change the color of a badge:
<span class="badge bg-primary">Primary</span>
<span class="badge
bg-secondary">Secondary</span>
<span class="badge
bg-success">Success</span>
<span class="badge
bg-danger">Danger</span>
<span class="badge
bg-warning">Warning</span>
<span class="badge bg-info">Info</span>
<span class="badge bg-light">Light</span>
<span class="badge
bg-dark">Dark</span>
Use the .rounded-pill
class to make the badges more round:
<span class="badge rounded-pill
bg-primary">Primary</span>
<span
class="badge rounded-pill bg-secondary">Secondary</span>
<span
class="badge rounded-pill bg-success">Success</span>
<span class="badge
rounded-pill bg-danger">Danger</span>
<span class="badge
rounded-pill
bg-warning">Warning</span>
<span class="badge rounded-pill
bg-info">Info</span>
<span class="badge rounded-pill
bg-light">Light</span>
<span class="badge rounded-pill
bg-dark">Dark</span>
An example of using a badge inside a button:
<button type="button" class="btn btn-primary">
Messages <span
class="badge bg-danger">4</span>
</button>