Perhaps one of my favourite elements in the Twitter Bootstrap library is that of Alert and Block Messages.
With little effort you can create coloured boxes to alert the user of important notices.
They’re neat and don’t detract from the site.
In this article, I’m going to run through the basics of using
block messages, and their differences.
First Up, Twitter Bootstrap Alert Messages
Alert messages are typically used for one-liner messages on your pages or posts.
Perhaps you have made a significant update to a post you wrote some time ago and you want to alert the user to the updated information.
Here’s how you do it…
The following line of text:
[TBS_ALERT class="warning"]This is a warning notice[/TBS_ALERT]
would produce the following alert notice
They are as follows:
As you can see, there are many options to suit the type of alert message you want to convey.
Next, Twitter Bootstrap Block Messages
Similar to Alert messages, the shortcode for block messages takes all the same parameters but displays slightly differently.
They are designed to display more than a single line of text.
Here is the shortcode:
An example use of the shortcode is as follows:
[TBS_BLOCK class="info"]The differences between Topic A and Topic B: <ol> <li>Topic A is xyz.</li> <li>Topic B is abc.</li> </ol> [/TBS_BLOCK]
This would produce the following message block:Warning: You are using a deprecated shortcode. Please replace your [TBS_BLOCK] with [TBS_ALERT class="alert-block"]
Again, as with alert messges, you can change the style by changing the
class. You have the options of:
Parameters Accepted by both TBS_ALERT and TBS_BLOCK
As with all the other shortcodes presented so far, these shortcodes also accept the following parameters
This means you have full control over how the block or alert message will appear if you want to deviate from the default.
[TBS_ALERT] is only available from version 0.8.4 onwards – it was a late addition to the plugin.