Examples

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>
Part of links or buttons
<button type="button" class="btn btn-primary">
    Notifications <span class="badge badge-light">4</span>
</button>

<button type="button" class="btn btn-primary">
    Profile <span class="badge badge-light">9</span>
    <span class="sr-only">unread messages</span>
</button>
Contextual variations
PRIMARY SECONDARY SUCCESS DANGER WARNING INFO LIGHT DARK

<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>
Pill badges
PRIMARY SECONDARY SUCCESS DANGER WARNING INFO LIGHT DARK

<span class="badge badge-pill badge-primary">PRIMARY</span>

<span class="badge badge-pill badge-secondary">SECONDARY</span>

<span class="badge badge-pill badge-success">SUCCESS</span>

<span class="badge badge-pill badge-danger">DANGER</span>

<span class="badge badge-pill badge-warning">WARNING</span>

<span class="badge badge-pill badge-info">INFO</span>

<span class="badge badge-pill badge-light">LIGHT</span>

<span class="badge badge-pill badge-dark">DARK</span>
Links

<a href="#" class="badge badge-primary">PRIMARY</a>

<a href="#" class="badge badge-secondary">SECONDARY</a>

<a href="#" class="badge badge-success">SUCCESS</a>

<a href="#" class="badge badge-danger">DANGER</a>

<a href="#" class="badge badge-warning">WARNING</a>

<a href="#" class="badge badge-info">INFO</a>

<a href="#" class="badge badge-light">LIGHT</a>

<a href="#" class="badge badge-dark">DARK</a>
TODAY
Friday
5 th May
Events

Group Meeting

In 32 Minutes, Room 1B

Public Beta Release

11:00 PM

Dinner with David

17:30 PM

Q&A Session

20:30 PM

Notes

Best songs to listen while working

Last edit: May 8th, 2015

Useful subreddits

Last edit: January 12th, 2015

Quick Settings

Notifications

Cloud Sync

Retro Thrusters