Bootstrap styling guide
HTML code and instructions for using the styles demonstrated in this 'topic'
Note: the FLO HTML editor provides styles you can use without HTML knowledge (eg Standard block, Readings, Assessment,
Reflection and Key).
What is it?
Using the Alert style, you can provide contextual feedback messages for typical user actions (for example, warning, reminder). See the examples below.
How can I use it?
Create an alert to draw attention to something important or helpful.
If you use the Alert style, be consistent with your message. If you use a particular colour for a particular message, make sure that colour is attached to the same message throughout the site. If you don't do this, students will be confused, and the purpose of these alerts is to flag help or support.
Some colours are designed to convey specific messages:
Green alerts indicate success.
Blue alerts convey information.
Yellow alerts warn you about something that may cause problems later if ignored.
Red alerts draw attention to a danger or error. Use these sparingly.
Some alerts have neutral colours, for other purposes.
Design-wise it is best to use these minimally and stick to one or two colours only. Otherwise, your site will lose its 'clean' look and instead of being helpful your alerts will be a distraction.
How do I set it up?
Alerts are available in a range of colours, and can also include a dismiss button so that users can dismiss the alert from the screen (the example below has a cross to close the alert).
- Select and copy all text in the 'Code for alerts' box (below).
- Select a module and click on the cog to edit it, then click on the HTML icon in the Content box to go to the HTML editor.
- In the HTML editor, paste the text.
- Click on Update to go back to the text editor screen, and change the text to what you want it to say.
- Click Save changes to view in the module.
Code for alerts
<div class="alert alert-warning alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button><strong>Warning!</strong>
Remember to prepare for the workshop in week 3 by selecting three resources to explore in depth. </div>
The example above includes the dismiss button. To remove the dismiss button, delete the:
- 'alert-dismissable' class from the HTML text for the alert (it will now be <div class="alert alert-warning">)
- <button...>x</button> HTML text for the alert
The alert colour can be changed by altering the 'alert-warning' class to one of the following:
- alert-secondary *
- alert-light *
* Dark backgrounds have been added to assist legibility.