clones/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-09-21 10:37:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add positioned badges example to docs (#34143)

Browse Source 
* Update documentation for badges

* Removes useless changes, as well as fixes an example

* Fixes some text with a badge example

Co-authored-by: Mark Otto <markd.otto@gmail.com>
This commit is contained in:
Joel Johnson 2021-06-03 09:09:13 -07:00 committed by GitHub
parent dbda13d5ef
commit f14d1a4c17
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
site/content/docs/5.0/components/badge.md
View File

@ -6,10 +6,12 @@ group: components
toc: true
---
## Example
## Examples
Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units. As of v5, badges no longer have focus or hover styles for links.
### Headings
{{< example >}}
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
@ -19,6 +21,8 @@ Badges scale to match the size of the immediate parent element by using relative
<h6>Example heading <span class="badge bg-secondary">New</span></h6>
{{< /example >}}
### Buttons
Badges can be used as part of links or buttons to provide a counter.
{{< example >}}
@ -31,10 +35,28 @@ Note that depending on how they are used, badges may be confusing for users of s
Unless the context is clear (as with the "Notifications" example, where it is understood that the "4" is the number of notifications), consider including additional context with a visually hidden piece of additional text.
### Positioned
Use utilities to modify a `.badge` and position it in the corner of a link or button.
{{< example >}}
<button type="button" class="btn btn-primary">
Profile <span class="badge bg-secondary">9</span>
<span class="visually-hidden">unread messages</span>
<button type="button" class="btn btn-primary position-relative">
Inbox
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">unread messages</span>
</span>
</button>
{{< /example >}}
You can also replace the `.badge` class with a few more utilities without a count for a more generic indicator.
{{< example >}}
<button type="button" class="btn btn-primary position-relative">
Profile
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
<span class="visually-hidden">New alerts</span>
</span>
</button>
{{< /example >}}