In this post, we are learning about Bootstrap Badge.
In previous post I wrote about what is Bootstrap?,
How to setup Bootstrap?,
Bootstrap Grid System,
Bootstrap Container Class ,
Bootstrap Nested column,
Bootstrap Offset Columns,
Bootstrap Button and
Bootstrap Label.
Badge is similar to Label but the primary difference is that the corners are more rounded and
a self collapsing nature. This means that when there is no content inside a badge, it will not
appear in the HTML page.Badge is used to create a notification icon.It is mostly used for displaying
numbers. Badge do not have color variants unlike label.
Badge is mainly used to show new or unread items. To use badge just add <span class="badge"> to
links, Bootstrap navs, and more.
The following example demonstrates how to use Badge:
<a href="#">Notification <span class="badge">12 </span> </a>
Badge can place in active states of pill and list navigations. We can achieve this by placing <span class="badge"> to active links, as demonstrated in the following example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Tutorial</title>
<!-- CSS -->
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Add Custom CSS below -->
</head>
<body style="margin: 5;" >
<h4>
Example for Active State in Pill
</h4>
<ul class="nav nav-pills">
<li class="active"><a href="#">Home <span class="badge">12</span></a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages <span class="badge">2</span></a></li>
</ul>
<br />
<h4>
Example for Active State in navigations</h4>
<ul class="nav nav-pills nav-stacked" style="max-width: 300px;">
<li class="active"><a href="#"><span class="badge pull-right">12</span> Home </a>
</li>
<li><a href="#">Profile</a></li>
<li><a href="#"><span class="badge pull-right">2</span> Messages </a></li>
</ul>
</body>
</html>
Output
In the above output, we can clearly see that how to use Bootstap Badge class.
Bootstrap Badge >>>>> Download Now
ReplyDelete>>>>> Download Full
Bootstrap Badge >>>>> Download LINK
>>>>> Download Now
Bootstrap Badge >>>>> Download Full
>>>>> Download LINK gc