diff options
Diffstat (limited to 'docs/components')
| -rw-r--r-- | docs/components/badges.md | 56 |
1 files changed, 0 insertions, 56 deletions
diff --git a/docs/components/badges.md b/docs/components/badges.md deleted file mode 100644 index 324053fec..000000000 --- a/docs/components/badges.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -layout: page -title: Badges ---- - -Badges are indicators for new or unread activity and include support for the active states of our [navigation components](/components/navs/), links, buttons, and more. - -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - -{% example html %} -<a href="#">Inbox <span class="badge">42</span></a> -{% endexample %} - -### Self collapsing - -When there are no new or unread items, badges will simply collapse (via CSS's `:empty` selector) provided no content exists within. - -### Active nav - -Built-in styles are included for placing badges in active states in pill navigations. - -{% example html %} -<ul class="nav nav-pills" role="tablist"> - <li class="nav-item active" role="presentation"> - <a class="nav-link" href="#">Home <span class="badge">42</span></a> - </li> - <li class="nav-item" role="presentation"> - <a class="nav-link" href="#">Profile</a> - </li> - <li class="nav-item" role="presentation"> - <a class="nav-link" href="#">Messages <span class="badge">3</span></a> - </li> -</ul> -{% endexample %} - -### Buttons - -Like active nav links, badges in Bootstrap buttons automatically restyle to better blend into the background. - -{% example html %} -<button class="btn btn-primary btn-lg" type="button"> - Large button <span class="badge">4</span> -</button> -<button class="btn btn-primary" type="button"> - Button <span class="badge">4</span> -</button> -<button class="btn btn-primary btn-sm" type="button"> - Small button <span class="badge">4</span> -</button> -<button class="btn btn-primary btn-xs" type="button"> - Extra small <span class="badge">4</span> -</button> -{% endexample %} |
