Clarity - Responsive Minimalist Bootstrap 4 HTML Template

General

The badge element is designed to highlight new or unread messages. You can use it together with links, navs, etc.

Primary Secondary Success Info Warning Danger

<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-info">Info</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>

Usage

Below are just some examples of using badges on your site.

h4. heading New

h5. heading New

h6. heading New

Show Code

<div class="h4">h4. heading <span class="badge badge-secondary">New</span></div>
<div class="h5">h5. heading <span class="badge badge-secondary">New</span></div>
<div class="h6">h6. heading <span class="badge badge-secondary">New</span></div>

Example: Buttons

Show Code

<button type="button" class="btn btn-primary">
    You have a new unread messages <span class="ml-2 badge badge-light">7</span>
</button>

Example: List Group

Inbox

3

Starred

Important

Sent mail

Drafts

Show Code

<div class="list-group">
    <div class="list-group-item">Inbox <div class="badge badge-primary float-right mt-1 mb-0">3</div></div>
    <div class="list-group-item">Starred</div>
    <div class="list-group-item">Important</div>
    <div class="list-group-item">Sent mail</div>
    <div class="list-group-item">Drafts</div>
</div>

Purchase $8.00 only!

Do you like our template? Updates, new pages and widgets every week.

Purchase Cleathin