Skip to content
GitLab
    • Explore Projects Groups Snippets
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Merge requests
  • !31802

Improve callout shortcode.

  • Review changes

  • Download
  • Email patches
  • Plain diff
Merged XhmikosR requested to merge main-xmr-docs-callout-shortcode into main 4 years ago
  • Overview 2
  • Commits 2
  • Pipelines 0
  • Changes 35

Remove the markdownify call, and instead rely on Hugo's proper syntax; {{% callout %}} when we want to the content to be rendered.

This allows for stuff like:

{{% callout info %}}
##### I'm an info callout!
.foo {
  color: #fff;
}

{{< example >}}
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
</div>
{{< /example >}}
{{% /callout %}}

Preview: https://deploy-preview-31802--twbs-bootstrap.netlify.app/

Compare
  • main (base)

and
  • latest version
    ffb7206d
    2 commits, 2 years ago

35 files
+ 131
- 131

    Preferences

    File browser
    Compare changes
si‎te‎
content/‎docs/5.0‎
compo‎nents‎
aler‎ts.md‎ +4 -4
badg‎e.md‎ +2 -2
button-‎group.md‎ +2 -2
butto‎ns.md‎ +6 -6
car‎d.md‎ +4 -4
carou‎sel.md‎ +4 -4
colla‎pse.md‎ +4 -4
dropdo‎wns.md‎ +6 -6
list-g‎roup.md‎ +2 -2
moda‎l.md‎ +4 -4
navb‎ar.md‎ +2 -2
nav‎s.md‎ +4 -4
popov‎ers.md‎ +12 -12
scroll‎spy.md‎ +6 -6
spinn‎ers.md‎ +2 -2
toas‎ts.md‎ +4 -4
toolt‎ips.md‎ +12 -12
con‎tent‎
rebo‎ot.md‎ +4 -4
tabl‎es.md‎ +4 -4
cust‎omize‎
compon‎ents.md‎ +6 -6
fo‎rms‎
checks-r‎adios.md‎ +2 -2
fil‎e.md‎ +2 -2
overv‎iew.md‎ +2 -2
valida‎tion.md‎ +2 -2
getting‎-started‎
best-pra‎ctices.md‎ +2 -2
javasc‎ript.md‎ +8 -8
hel‎pers‎
rati‎o.md‎ +2 -2
lay‎out‎
breakpo‎ints.md‎ +2 -2
colum‎ns.md‎ +2 -2
gri‎d.md‎ +2 -2
util‎ities‎
colo‎rs.md‎ +4 -4
interac‎tions.md‎ +2 -2
tex‎t.md‎ +2 -2
visibi‎lity.md‎ +2 -2
layouts/s‎hortcodes‎
callou‎t.html‎ +1 -1
site/content/docs/5.0/components/alerts.md
+ 4
- 4
  • View file @ ffb7206d

  • Edit in single-file editor

  • Open in Web IDE


@@ -22,9 +22,9 @@ Alerts are available for any length of text, as well as an optional close button
{{< /alerts.inline >}}
{{< /example >}}
{{< callout info >}}
{{% callout info %}}
{{< partial "callout-warning-color-assistive-technologies.md" >}}
{{< /callout >}}
{{% /callout %}}
### Link color
@@ -70,9 +70,9 @@ You can see this in action with a live demo:
</div>
{{< /example >}}
{{< callout warning >}}
{{% callout warning %}}
When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document. For this reason, we recommend including additional JavaScript that listens for the `closed.bs.alert` event and programmatically sets `focus()` to the most appropriate location in the page. If you're planning to move focus to a non-interactive element that normally does not receive focus, make sure to add `tabindex="-1"` to the element.
{{< /callout >}}
{{% /callout %}}
## JavaScript behavior
site/content/docs/5.0/components/badge.md
+ 2
- 2
  • View file @ ffb7206d

  • Edit in single-file editor

  • Open in Web IDE


@@ -49,9 +49,9 @@ Use our background utility classes to quickly change the appearance of a badge.
{{< /badge.inline >}}
{{< /example >}}
{{< callout info >}}
{{% callout info %}}
{{< partial "callout-warning-color-assistive-technologies.md" >}}
{{< /callout >}}
{{% /callout %}}
## Pill badges
site/content/docs/5.0/components/button-group.md
+ 2
- 2
  • View file @ ffb7206d

  • Edit in single-file editor

  • Open in Web IDE


@@ -18,13 +18,13 @@ Wrap a series of buttons with `.btn` in `.btn-group`.
</div>
{{< /example >}}
{{< callout warning >}}
{{% callout warning %}}
##### Ensure correct `role` and provide a label
In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate `role` attribute needs to be provided. For button groups, this would be `role="group"`, while toolbars should have a `role="toolbar"`.
In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use `aria-label`, but alternatives such as `aria-labelledby` can also be used.
{{< /callout >}}
{{% /callout %}}
These classes can also be added to groups of links, as an alternative to the [`.nav` navigation components]({{< docsref "/components/navs" >}}).
site/content/docs/5.0/components/buttons.md
+ 6
- 6
  • View file @ ffb7206d

  • Edit in single-file editor

  • Open in Web IDE


@@ -20,9 +20,9 @@ Bootstrap includes several predefined button styles, each serving its own semant
<button type="button" class="btn btn-link">Link</button>
{{< /example >}}
{{< callout info >}}
{{% callout info %}}
{{< partial "callout-warning-color-assistive-technologies.md" >}}
{{< /callout >}}
{{% /callout %}}
## Disable text wrapping
@@ -95,19 +95,19 @@ Disabled buttons using the `<a>` element behave a bit different:
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
{{< /example >}}
{{< callout warning >}}
{{% callout warning %}}
##### Link functionality caveat
The `.disabled` class uses `pointer-events: none` to try to disable the link functionality of `<a>`s, but that CSS property is not yet standardized. In addition, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, in addition to `aria-disabled="true"`, also include a `tabindex="-1"` attribute on these links to prevent them from receiving keyboard focus, and use custom JavaScript to disable their functionality altogether.
{{< /callout >}}
{{% /callout %}}
## Button plugin
The button plugin allows you to create simple on/off toggle buttons.
{{< callout info >}}
{{% callout info %}}
Visually, these toggle buttons are identical to the [checkbox toggle buttons]({{< docsref "/forms/checks-radios#checkbox-toggle-buttons" >}}). However, they are conveyed differently by assistive technologies: the checkbox toggles will be announced by screen readers as "checked"/"not checked" (since, despite their appearance, they are fundamentally still checkboxes), whereas these toggle buttons will be announced as "button"/"button pressed". The choice between these two approaches will depend on the type of toggle you are creating, and whether or not the toggle will make sense to users when announced as a checkbox or as an actual button.
{{< /callout >}}
{{% /callout %}}
### Toggle states
site/content/docs/5.0/components/card.md
+ 4
- 4
  • View file @ ffb7206d

  • Edit in single-file editor

  • Open in Web IDE


@@ -386,9 +386,9 @@ Turn an image into a card background and overlay your card's text. Depending on
</div>
{{< /example >}}
{{< callout info >}}
{{% callout info %}}
Note that content should not be larger than the height of the image. If content is larger than the image the content will be displayed outside the image.
{{< /callout >}}
{{% /callout %}}
## Horizontal
@@ -433,9 +433,9 @@ Use [text and background utilities]({{< docsref "/utilities/colors" >}}) to chan
{{< /card.inline >}}
{{< /example >}}
{{< callout info >}}
{{% callout info %}}
{{< partial "callout-warning-color-assistive-technologies.md" >}}
{{< /callout >}}
{{% /callout %}}
### Border
0 Assignees
None
Assign to
Reviewer
Mark Otto's avatar
Mark Otto
Request review from
Labels
2
docs v5
2
docs v5
    Assign labels
  • Manage project labels

Milestone
No milestone
None
None
Time tracking
No estimate or time spent
Lock merge request
Unlocked
3
3 participants
Mark Otto
Administrator
XhmikosR
Reference: twbs/bootstrap!31802
Source branch: main-xmr-docs-callout-shortcode

Menu

Explore Projects Groups Snippets