Bootstrap Tutorial
Bootstrap with CSS
Bootstrap Layout Components
Bootstrap Plugins
Bootstrap Demos
Bootstrap Useful Resources
Selected Reading
Bootstrap with CSS
- Bootstrap - Responsive utilities
- Bootstrap - Helper Classes
- Bootstrap - Images
- Bootstrap - Buttons
- Bootstrap - Forms
- Bootstrap - Tables
- Bootstrap - Code
- Bootstrap - Typography
- Bootstrap - CSS Overview
- Bootstrap - Grid System
Bootstrap Layout Components
- Bootstrap - Wells
- Bootstrap - Panels
- Bootstrap - List Group
- Bootstrap - Media Object
- Bootstrap - Progress Bars
- Bootstrap - Alerts
- Bootstrap - Thumbnails
- Bootstrap - Page Header
- Bootstrap - Jumbotron
- Bootstrap - Badges
- Bootstrap - Labels
- Bootstrap - Pagination
- Bootstrap - Breadcrumb
- Bootstrap - Navbar
- Bootstrap - Navigation Elements
- Bootstrap - Input Groups
- Bootstrap - Button Dropdowns
- Bootstrap - Button Groups
- Bootstrap - Dropdowns
- Bootstrap - Glyphicons
Bootstrap Plugins
- Bootstrap - Affix Plugin
- Bootstrap - Carousel Plugin
- Bootstrap - Collapse Plugin
- Bootstrap - Button Plugin
- Bootstrap - Alert Plugin
- Bootstrap - Popover Plugin
- Bootstrap - Tooltip Plugin
- Bootstrap - Tab Plugin
- Bootstrap - Scrollspy Plugin
- Bootstrap - Dropdown Plugin
- Bootstrap - Modal Plugin
- Bootstrap - Transition Plugin
- Bootstrap - Plugins Overview
Bootstrap Demos
- Bootstrap - featured Demo
- Bootstrap - Icons Demo
- Bootstrap - Social Icons Demo
- Bootstrap - Calendar Demo
- Bootstrap - Map Demo
- Bootstrap - Caption Demo
- Bootstrap - Tabbed slider Demo
- Bootstrap - Ajax Demo
- Bootstrap - Admin Interface Demo
- Bootstrap - Alert Demo
- Bootstrap - Time line Demo
- Bootstrap - Slider Demo
- Bootstrap - Material Design Demo
- Bootstrap - Blog Demo
- Bootstrap - Navigation Demo
- Bootstrap - Responsive Demo
- Bootstrap - Images Demo
- Bootstrap - Buttons Demo
- Bootstrap - Form Demo
- Bootstrap - Table Demo
- Bootstrap - Grid Demo
Bootstrap Useful Resources
- Bootstrap - Discussion
- Bootstrap - Useful Resources
- Bootstrap - Quick Guide
- Bootstrap - Questions and Answers
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Bootstrap - Badges
Bootstrap - Badges
This chapter will discuss about Bootstrap badges. Badges are similar to labels; the primary difference is that the corners are more rounded.
Badges are mainly used to highpght new or unread items. To use badges just add <span class = "badge"> to pnks, Bootstrap navs, and more.
The following example demonstrates this −
<a href = "#">Mailbox <span class = "badge">50</span></a>
When there are no new or unread items, badges will simply collapse via CSS s :empty selector, provided no content exists within.
Active Nav States
You can place badges in active states of pill and pst navigations. You can achieve this by placing <span class = "badge"> to active pnks, as demonstrated in the following example −
<h4>Example for Active State in Pill </h4> <ul class = "nav nav-pills"> <p class = "active"><a href = "#">Home <span class ="badge">42</span></a></p> <p><a href = "#">Profile</a></p> <p><a href = "#">Messages <span class = "badge">3</span></a></p> </ul> <br> <h4>Example for Active State in navigations</h4> <ul class = "nav nav-pills nav-stacked" style = "max-width: 260px;"> <p class = "active"> <a href = "#"> <span class = "badge pull-right">42</span> Home </a> </p> <p><a href = "#">Profile</a></p> <p> <a href = "#"> <span class = "badge pull-right">3</span> Messages </a> </p> </ul>Advertisements