Elements

  1. Home
  2. Components

	<h1>Example heading <span class="badge badge-default">New</span></h1>
	<h2>Example heading <span class="badge badge-default">New</span></h2>
	<h3>Example heading <span class="badge badge-default">New</span></h3>
	<h4>Example heading <span class="badge badge-default">New</span></h4>
	<h5>Example heading <span class="badge badge-default">New</span></h5>
	<h6>Example heading <span class="badge badge-default">New</span></h6>

	<!-- Example - 2 -->
	<button type="button" class="btn btn-secondary">Notifications<span class="badge badge-secondary">5</span></button>
	<button type="button" class="btn btn-secondary">Profile<span class="badge badge-secondary">2</span></button>
	<button type="button" class="btn btn-secondary">Message<span class="badge badge-secondary">10</span></button>
How to use

Small and adaptive tag for adding context to just about any content.

  • Use the .badge class with <span> element inside main element.

Example 1

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Example 2

	
	<span class="badge badge-primary">Primary</span>
	<span class="badge badge-secondary">Secondary</span>
	<span class="badge badge-success">Success</span>

	<!-- Pill badge -->
	<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>

	<!-- Link Badge -->
	<a href="#" class="badge badge-primary">Primary</a>
	<a href="#" class="badge badge-secondary">Secondary</a>
	<a href="#" class="badge badge-success">Success</a>
How to use variation
  • To get prestyled badge just use the .badge-default or .badge-primary or .badge-success or .badge-info or .badge-warning or .badge-danger class with .badge class.

Example 01

Primary Secondary Success Danger Warning Info Light Dark

Example 02: Pill badge

Primary Secondary Success Danger Warning Info Light Dark

Example 03: Link badge

Primary Secondary Success Danger Warning Info Light Dark
Accessories
BRANDS
Accessories
Get in Touch

© 2017 Copyright Bigbag Store Bootstrap Template by Abdus.