Bootstrap Alert Shortcodes

Bootstrap Alert Shortcodes

The article describe how to use the bs/alert* shortcodes to generate alert messages.

Alert Shortcode

Alert Syntax

1{{< bs/alert >}}
2MESSAGE.
3{{< /bs/alert >}}

Alert Parameters

PositionNameTypeRequiredDefaultDescription
#0stylestring-primaryprimary, secondary, success, danger, warning, info, light and dark.

Alert Styles

1{{< bs/alert primary >}}
2A simple primary alert—check it out!
3{{< /bs/alert >}}
1{{< bs/alert secondary >}}
2A simple secondary alert—check it out!
3{{< /bs/alert >}}
1{{< bs/alert success >}}
2A simple success alert—check it out!
3{{< /bs/alert >}}
1{{< bs/alert danger >}}
2A simple danger alert—check it out!
3{{< /bs/alert >}}
1{{< bs/alert warning >}}
2A simple warning alert—check it out!
3{{< /bs/alert >}}
1{{< bs/alert info >}}
2A simple info alert—check it out!
3{{< /bs/alert >}}
1{{< bs/alert light >}}
2A simple light alert—check it out!
3{{< /bs/alert >}}
1{{< bs/alert dark >}}
2A simple dark alert—check it out!
3{{< /bs/alert >}}

Alert with Markdown Content

We could achieve this by combining the bs/alert and markdownify shortcodes.

1{{% bs/alert style=primary %}}
2A simple *primary alert* with Markdown—**check it out**!
3{{% /bs/alert %}}

The bs/alert-link allows inserting a styled link to an alert message.

PositionNameTypeRequiredDefaultDescription
#0-stringY-The text.
#1-stringY-The URL.
1{{< bs/alert >}}
2A simple primary alert with {{< bs/alert-link "an example link" "#alert-link" >}}. Give it a click if you like.
3{{< /bs/alert >}}

Alert Heading Shortcode

The bootstrap/alert-heading shortcode is used to add a heading for alert messages.

Alert Heading Parameters

PositionNameTypeRequiredDefaultDescription
#0-stringY-The heading.

Alert Heading Examples

1{{< bs/alert success >}}
2{{< bs/alert-heading "Well done!" >}}
3Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
4{{< /bs/alert >}}