Bootstrap Alert Shortcodes
On this page
Please check out the tutorial to
start using Hugo modules.
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
| Position | Name | Type | Required | Default | Description |
|---|---|---|---|---|---|
#0 | style | string | - | primary | primary, secondary, success, danger, warning, info, light and dark. |
Alert Styles
1{{< bs/alert primary >}}
2A simple primary alert—check it out!
3{{< /bs/alert >}}
A simple primary alert—check it out!
1{{< bs/alert secondary >}}
2A simple secondary alert—check it out!
3{{< /bs/alert >}}
A simple secondary alert—check it out!
1{{< bs/alert success >}}
2A simple success alert—check it out!
3{{< /bs/alert >}}
A simple success alert—check it out!
1{{< bs/alert danger >}}
2A simple danger alert—check it out!
3{{< /bs/alert >}}
A simple danger alert—check it out!
1{{< bs/alert warning >}}
2A simple warning alert—check it out!
3{{< /bs/alert >}}
A simple warning alert—check it out!
1{{< bs/alert info >}}
2A simple info alert—check it out!
3{{< /bs/alert >}}
A simple info alert—check it out!
1{{< bs/alert light >}}
2A simple light alert—check it out!
3{{< /bs/alert >}}
A simple light alert—check it out!
1{{< bs/alert dark >}}
2A simple dark alert—check it out!
3{{< /bs/alert >}}
A simple dark alert—check it out!
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 %}}
A simple primary alert with Markdown—check it out!
Alert Link Shortcode
The bs/alert-link allows inserting a styled link to an alert message.
Alert Link Parameters
| Position | Name | Type | Required | Default | Description |
|---|---|---|---|---|---|
#0 | - | string | Y | - | The text. |
#1 | - | string | Y | - | The URL. |
Alert Link Examples
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 >}}
A simple primary alert with an example link. Give it a click if you like.
A simple warning alert with an example link. Give it a click if you like.
Alert Heading Shortcode
The bootstrap/alert-heading shortcode is used to add a heading for alert messages.
Alert Heading Parameters
| Position | Name | Type | Required | Default | Description |
|---|---|---|---|---|---|
#0 | - | string | Y | - | 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 >}}
Well done!
Aww 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.