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>