WHY SMARTY?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.

RECENTLY VISITED
CONTACT INFO
  • Address: PO Box 21132, Here Weare St,
    Melbourne, Vivas 2355 Australia
  • Phone: 1-800-565-2390
  • Email: support@yourname.com

LABELS & BADGES

  1. Home
  2. Shortcodes
  3. Labels & Badges

Labels

Default Primary Success Info Warning Danger
blue sea yellow purple aqua brown dark blue light green light dark
Show Code 
<!--
	Available label colors:
		label-default
		label-primary
		label-success
		label-info
		label-danger
		label-warning
		
		label-blue
		label-sea
		label-yellow
		label-purple
		label-aqua
		label-brown
		label-dark-blue
		label-light-green
		label-light
		label-dark
-->
<span class="badge badge-default">Default</span>
<span class="badge badge-primary">Primary</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>

<span class="badge badge-blue">blue</span>
<span class="badge badge-sea">sea</span>
<span class="badge badge-yellow">yellow</span>
<span class="badge badge-purple">purple</span>
<span class="badge badge-aqua">aqua</span>
<span class="badge badge-brown">brown</span>
<span class="badge badge-dark-blue">dark blue</span>
<span class="badge badge-light-green">light green</span>
<span class="badge badge-light">light</span>
<span class="badge badge-dark">dark</span>

Badges

1 2 2 2 2 3 4 5 6 7 8 9 10 11
1 2 2 2 2 3 4 5 6 7 8 9 10 11
Show Code 
<!--
	Available badge colors:
		badge-default
		badge-orange
		badge-red
		badge-green
		badge-blue
		badge-sea
		badge-yellow
		badge-purple
		badge-aqua
		badge-brown
		badge-dark-blue
		badge-light-green
		badge-light
		badge-dark
-->

<!-- Rounded -->
<span class="badge badge-default">1</span>
<span class="badge badge-red">2</span>
<span class="badge badge-orange">2</span>
<span class="badge badge-green">2</span>
<span class="badge badge-blue">2</span>
<span class="badge badge-sea">3</span>
<span class="badge badge-yellow">4</span>
<span class="badge badge-purple">5</span>
<span class="badge badge-aqua">6</span>
<span class="badge badge-brown">7</span>
<span class="badge badge-dark-blue">8</span>
<span class="badge badge-light-green">9</span>
<span class="badge badge-light">10</span>
<span class="badge badge-dark">11</span>

<!-- Squared -->
<span class="badge badge-default radius-0">1</span>
<span class="badge badge-red radius-0">2</span>
<span class="badge badge-orange radius-0">2</span>
<span class="badge badge-green radius-0">2</span>
<span class="badge badge-blue radius-0">2</span>
<span class="badge badge-sea radius-0">3</span>
<span class="badge badge-yellow radius-0">4</span>
<span class="badge badge-purple radius-0">5</span>
<span class="badge badge-aqua radius-0">6</span>
<span class="badge badge-brown radius-0">7</span>
<span class="badge badge-dark-blue radius-0">8</span>
<span class="badge badge-light-green radius-0">9</span>
<span class="badge badge-light radius-0">10</span>
<span class="badge badge-dark radius-0">11</span>



2 Messages 3 Notification 8 Inbox 8 Info
8 8 8 8
8 12 3 7
Show Code 
<a href="#" class="btn btn-success btn-sm relative">
	<span class="badge badge-dark badge-corner radius-0">2</span>
	Messages
</a>
<a href="#" class="btn btn-danger btn-sm relative">
	<span class="badge badge-dark badge-corner radius-0">3</span>
	Notification
</a>
<a href="#" class="btn btn-info btn-sm relative">
	<span class="badge badge-dark badge-corner radius-0">8</span>
	Inbox
</a>
<a href="#" class="btn btn-warning btn-sm relative">
	<span class="badge badge-dark badge-corner radius-0">8</span>
	Info
</a>



<a href="#" class="btn btn-clean relative">
	<span class="badge badge-dark btn-sm badge-corner">8</span>
	<i class="fa fa-envelope fs-20"></i>
</a>
<a href="#" class="btn btn-clean relative">
	<span class="badge badge-aqua btn-sm badge-corner">8</span>
	<i class="fa fa-globe fs-20"></i>
</a>
<a href="#" class="btn btn-clean relative">
	<span class="badge badge-purple btn-sm badge-corner">8</span>
	<i class="fa fa-warning fs-20"></i>
</a>
<a href="#" class="btn btn-clean relative">
	<span class="badge badge-yellow btn-sm badge-corner">8</span>
	<i class="fa fa-cog fs-20"></i>
</a>



<a href="#" class="btn btn-default radius-0 relative">
	<span class="badge badge-dark btn-sm badge-corner radius-3">8</span>
	<i class="fa fa-envelope fs-20 p-0"></i>
</a>
<a href="#" class="btn btn-default radius-0 relative">
	<span class="badge badge-green btn-sm badge-corner radius-3">12</span>
	<i class="fa fa-globe fs-20 p-0"></i>
</a>
<a href="#" class="btn btn-default radius-0 relative">
	<span class="badge badge-red btn-sm badge-corner radius-3">3</span>
	<i class="fa fa-warning fs-20 p-0"></i>
</a>
<a href="#" class="btn btn-default radius-0 relative">
	<span class="badge badge-warning btn-sm badge-corner radius-3">7</span>
	<i class="fa fa-cog fs-20 p-0"></i>
</a>

Example heading Label

Example heading Label

Example heading Label

Example heading Label

Example heading Label
Example heading Label
Show Code 
<!--
	Available label colors:
		label-default
		label-success
		label-info
		label-danger
		label-warning
-->>
<h1>Example heading <span class="badge badge-default">Label</span></h1>
<h2>Example heading <span class="badge badge-info">Label</span></h2>
<h3>Example heading <span class="badge badge-success">Label</span></h3>
<h4>Example heading <span class="badge badge-warning">Label</span></h4>
<h5>Example heading <span class="badge badge-danger">Label</span></h5>
<h6>Example heading <span class="badge badge-default">Label</span></h6>

Badges

Show Code 
<ul class="nav nav-pills">
	<li class="active"><a href="#">Home <span class="badge">42</span></a></li>
	<li><a href="#">Profile</a></li>
	<li><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
Show Code 
<ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
	<li class="active">
		<a href="#">
			<span class="badge float-right">21</span>
			Home
		</a>
	</li>
	<li><a href="#">Profile</a></li>
	<li>
		<a href="#">
			<span class="badge float-right">4</span>
			Messages
		</a>
	</li>
</ul>
Show Code 
<button class="btn btn-primary" type="button">
	Messages <span class="badge">4</span>
</button>

<button class="btn btn-success" type="button">
	Messages <span class="badge">4</span>
</button>

<button class="btn btn-danger" type="button">
	Messages <span class="badge">4</span>
</button>

<button class="btn btn-warning" type="button">
	Messages <span class="badge">4</span>
</button>

<button class="btn btn-info" type="button">
	Messages <span class="badge">4</span>
</button>

<button class="btn btn-default" type="button">
	Messages <span class="badge">4</span>
</button>