Skip to content

Commit

Permalink
toasts.md: Remove useless divs.
Browse files Browse the repository at this point in the history
Instead pass the class to the example include.
  • Loading branch information
XhmikosR committed Feb 11, 2019
1 parent 2bfe581 commit adf16da
Showing 1 changed file with 7 additions and 21 deletions.
28 changes: 7 additions & 21 deletions site/docs/4.2/components/toasts.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ To encourage extensible and predictable toasts, we recommend a header and body.

Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your "toasted" content and strongly encourage a dismiss button.

<div class="bg-light">
{% capture example %}
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
Expand All @@ -41,14 +40,12 @@ Toasts are as flexible as you need and have very little required markup. At a mi
</div>
</div>
{% endcapture %}
{% include example.html content=example %}
</div>
{% include example.html content=example class="bg-light" %}

### Translucent

Toasts are slightly translucent, too, so they blend over whatever they might appear over. For browsers that support the `backdrop-filter` CSS property, we'll also attempt to blur the elements under a toast.

<div class="bg-dark">
{% capture example %}
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
Expand All @@ -64,14 +61,12 @@ Toasts are slightly translucent, too, so they blend over whatever they might app
</div>
</div>
{% endcapture %}
{% include example.html content=example %}
</div>
{% include example.html content=example class="bg-dark" %}

### Stacking

When you have multiple toasts, we default to vertically stacking them in a readable manner.

<div class="bg-light">
{% capture example %}
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
Expand Down Expand Up @@ -101,14 +96,12 @@ When you have multiple toasts, we default to vertically stacking them in a reada
</div>
</div>
{% endcapture %}
{% include example.html content=example %}
</div>
{% include example.html content=example class="bg-light" %}

## Placement

Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle. If you're only ever going to show one toast at a time, put the positioning styles right on the `.toast`.

<div class="bg-dark">
{% capture example %}
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
<div class="toast" style="position: absolute; top: 0; right: 0;">
Expand All @@ -126,12 +119,10 @@ Place toasts with custom CSS as you need them. The top right is often used for n
</div>
</div>
{% endcapture %}
{% include example.html content=example %}
</div>
{% include example.html content=example class="bg-dark" %}

For systems that generate more notifications, consider using a wrapping element so they can easily stack.

<div class="bg-dark">
{% capture example %}
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
<!-- Position it -->
Expand Down Expand Up @@ -168,12 +159,10 @@ For systems that generate more notifications, consider using a wrapping element
</div>
</div>
{% endcapture %}
{% include example.html content=example %}
</div>
{% include example.html content=example class="bg-dark" %}

You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.

<div class="bg-dark">
{% capture example %}
<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;">
Expand All @@ -194,8 +183,7 @@ You can also get fancy with flexbox utilities to align toasts horizontally and/o
</div>
</div>
{% endcapture %}
{% include example.html content=example %}
</div>
{% include example.html content=example class="bg-dark" %}

## Accessibility

Expand All @@ -215,7 +203,6 @@ As the content you're displaying changes, be sure to update the [`delay` timeout

When using `autohide: false`, you must add a close button to allow users to dismiss the toast.

<div class="bg-light">
{% capture example %}
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
<div class="toast-header">
Expand All @@ -231,8 +218,7 @@ When using `autohide: false`, you must add a close button to allow users to dism
</div>
</div>
{% endcapture %}
{% include example.html content=example %}
</div>
{% include example.html content=example class="bg-light" %}

## JavaScript behavior

Expand Down

0 comments on commit adf16da

Please sign in to comment.