Skip to content

Commit

Permalink
Merge branch 'master' into master-xmr-update-hugo
Browse files Browse the repository at this point in the history
  • Loading branch information
XhmikosR committed Oct 22, 2019
2 parents 9dfe90d + 3b876be commit fa2dba1
Show file tree
Hide file tree
Showing 5 changed files with 35 additions and 93 deletions.
6 changes: 3 additions & 3 deletions site/content/docs/4.3/components/alerts.md
Expand Up @@ -11,7 +11,7 @@ toc: true

## Examples

Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts JavaScript plugin](#dismissing).
Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts JavaScript plugin](#dismissing).

{{< example >}}
{{< alerts.inline >}}
Expand Down Expand Up @@ -58,8 +58,8 @@ Alerts can also contain additional HTML elements like headings, paragraphs and d
Using the alert JavaScript plugin, it's possible to dismiss any alert inline. Here's how:

- Be sure you've loaded the alert plugin, or the compiled Bootstrap JavaScript.
- Add a dismiss button and the `.alert-dismissible` class, which adds extra padding to the right of the alert and positions the `.close` button.
- On the dismiss button, add the `data-dismiss="alert"` attribute, which triggers the JavaScript functionality. Be sure to use the `<button>` element with it for proper behavior across all devices.
- Add a [close button]({{< docsref "/components/close-button" >}}) and the `.alert-dismissible` class, which adds extra padding to the right of the alert and positions the close button.
- On the close button, add the `data-dismiss="alert"` attribute, which triggers the JavaScript functionality. Be sure to use the `<button>` element with it for proper behavior across all devices.
- To animate alerts when dismissing them, be sure to add the `.fade` and `.show` classes.

You can see this in action with a live demo:
Expand Down
@@ -1,7 +1,7 @@
---
layout: docs
title: Close icon
description: Use a generic close icon for dismissing content like modals and alerts.
title: Close button
description: A generic close button for dismissing content like modals and alerts.
group: components
---

Expand Down

0 comments on commit fa2dba1

Please sign in to comment.