From 97ab2837f0a17edfe620815020a2cb27aecfb64c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 19 Apr 2021 09:02:25 -0700 Subject: [PATCH 1/3] Add Bootstrap Icons to alerts docs --- 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..76a51e487fb0 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]() 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: From 6334408c7fd2c75ab1907ba8b9af515c30cf3297 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 20 Apr 2021 12:13:32 -0700 Subject: [PATCH 2/3] Update site/content/docs/5.0/components/alerts.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Gaël Poupard --- site/content/docs/5.0/components/alerts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/5.0/components/alerts.md b/site/content/docs/5.0/components/alerts.md index 76a51e487fb0..849cf04780ea 100644 --- a/site/content/docs/5.0/components/alerts.md +++ b/site/content/docs/5.0/components/alerts.md @@ -51,7 +51,7 @@ Alerts can also contain additional HTML elements like headings, paragraphs and d ### Icons -Similarly, you can use [flexbox utilities]({{< docsref "/utilities/flex" >}}) and [Bootstrap Icons]() to create alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles. +Similarly, you can use [flexbox utilities]({{< docsref "/utilities/flex" >}}) and [Bootstrap Icons]({{ .Site.Params.blog }}) to create alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles. {{< example >}}