From 0fa8cb0bd3b4ccf09dd59bfc0d8fb9abeb31d9dc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 24 Apr 2021 20:59:13 -0700 Subject: [PATCH] Add Bootstrap Icons to alerts docs (#33690) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Add Bootstrap Icons to alerts docs * Update site/content/docs/5.0/components/alerts.md Co-authored-by: Gaël Poupard * Update alerts.md Co-authored-by: Gaël Poupard Co-authored-by: XhmikosR --- site/content/docs/5.0/components/alerts.md | 56 ++++++++++++++++++++++ 1 file changed, 56 insertions(+) diff --git a/site/content/docs/5.0/components/alerts.md b/site/content/docs/5.0/components/alerts.md index 3ef2e62cf8bd..42853f2e0ca4 100644 --- a/site/content/docs/5.0/components/alerts.md +++ b/site/content/docs/5.0/components/alerts.md @@ -49,6 +49,62 @@ Alerts can also contain additional HTML elements like headings, paragraphs and d {{< /example >}} +### Icons + +Similarly, you can use [flexbox utilities]({{< docsref "/utilities/flex" >}}) and [Bootstrap Icons]({{ .Site.Params.icons }}) to create alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles. + +{{< example >}} + +{{< /example >}} + +Need more than one icon for your alerts? Consider using more Bootstrap Icons and making a local SVG sprite like so to easily reference the same icons repeatedly. + +{{< example >}} + + + + + + + + + + + + + + + + +{{< /example >}} + ### Dismissing Using the alert JavaScript plugin, it's possible to dismiss any alert inline. Here's how: