hazza/hinode
1
0
Fork 0
mirror of https://github.com/gethinode/hinode.git synced 2025-10-17 23:13:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refine badge documentation

Browse Source
This commit is contained in:
mark
2023-01-02 07:52:16 +01:00
parent 8e65ad0d9b
commit ac36334e46
1 changed files with 15 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
content/en/blog/bootstrap.md
View File

@@ -37,18 +37,27 @@ A simple danger alert—check it out!
## Badge
Badges can be added to headings and buttons. The following two sections illustrate how to use them.
### Headings
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
Use HTML code to display a badge for a heading. See the Bootstrap [documentation][bs_badge_heading] for more options. The following example displays a badge for a heading of size six.
```html
<h6>Example heading <span class="badge bg-secondary">New</span></h6>
```
The result looks like this.
<h6>Example heading <span class="badge bg-secondary">New</span></h6>
### Buttons
The badge for a button is available via a [custom shortcode]({{< ref "custom-shortcodes#button" >}} "custom shortcode").
The badge for a button is available via a [custom shortcode]({{< ref "custom-shortcodes#button" >}} "custom shortcode"). The following example displays a light button with a badge.
{{< button color="light" href="#" badge="3" >}}
Button
{{< /button >}}
## Breadcrumb