Navigation

Shortcodes Label, Badges, Alerts and Tooltips

  1. Home
  2. Shortcodes
Labels

Labels

Labels can be added by .label class.

This is Default label

This is Primary label

This is Success label

This is Info label

This is Warning label

This is Danger label


<!-- Labels -->

<p>This is <span class="label label-default">Default</span> label</p>
<p>This is <span class="label label-primary">Primary</span> label</p>
<p>This is <span class="label label-success">Success</span> label</p>
<p>This is <span class="label label-info">Info</span> label</p>
<p>This is <span class="label label-warning">Warning</span> label</p>
<p>This is <span class="label label-danger">Danger</span> label</p>
Badges

Badges

Badges can be added by .badge class.

This is a badge → 42

Badges New Since update v1.1

Border radius of badges can be controlled by the classes .rounded-0x, .rounded, .rounded-2x, .rounded-3x, .rounded-4x and .circular

This is a badge → 42
This is a badge → 42
This is a badge → 42
This is a badge → 42
This is a badge → 42
This is a badge → 42

<!-- Badges -->

<a href="#">This is a badge → <span class="badge">42</span></a>
Alerts

Alerts

Alerts can be used by adding .alert class.

This is success alert
This is info alert
This is warning alert
This is danger alert 

<!-- Alerts -->

<div class="alert alert-success alert-dismissible">
<!-- Button to close alert -->
<button type="button" class="close" data-dismiss="alert"><span>×</span><span class="sr-only">Close</span></button>
<!-- Alert content -->
This is success alert
</div>

<div class="alert alert-info alert-dismissible">
<!-- Button to close alert -->
<button type="button" class="close" data-dismiss="alert"><span>×</span><span class="sr-only">Close</span></button>
<!-- Alert content -->
This is info alert
</div>

<div class="alert alert-warning alert-dismissible">
<!-- Button to close alert -->
<button type="button" class="close" data-dismiss="alert"><span>×</span><span class="sr-only">Close</span></button>
<!-- Alert content -->
This is warning alert
</div>
								  
<div class="alert alert-danger alert-dismissible">
<!-- Button to close alert -->
<button type="button" class="close" data-dismiss="alert"><span>×</span><span class="sr-only">Close</span></button>
<!-- Alert content -->
This is danger alert
</div>
Tooltips

Tooltips

tooltip can be added by just adding the title attribute of element and adding data-toggle='tooltip'. and to control tooltip direction add data-placement attribute


<!-- Tooltips -->

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>