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).

  Minor knowledge of HTML required.

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.

Well done! You've successfully completed the readings for this week.

Blue alerts convey information.

For your information! You can decide to what level you want to explore this aspect of the topic.

Yellow alerts warn you about something that may cause problems later if ignored.

Warning! Remember to prepare for the workshop in week 3.

Red alerts draw attention to a danger or error. Use these sparingly.

Try again! Change a few things and try submitting again.

Some alerts have neutral colours, for other purposes.

This is a primary alert. This alert provides information and can be used in conjunction with the secondary alert.
This is a secondary alert. This alert provides information that is less important than the primary alert.
This is a light alert. This alert is designed for dark backgrounds/night mode.
This is a dark alert. This alert is designed to contrast a light background.

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).

  1. Select and copy all text in the 'Code for alerts' box (below).
  2. 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.
  3. In the HTML editor, paste the text.
  4. Click on Update to go back to the text editor screen, and change the text to what you want it to say.
  5. Click Save changes to view in the module.
Warning! Make sure you check your emails regularly for updates.
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:

  1. 'alert-dismissable' class from the HTML text for the alert (it will now be <div class="alert alert-warning">)
  2. <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-success
  • alert-info
  • alert-warning
  • alert-danger
  • alert-primary
  • alert-secondary  *
  • alert-dark
  • alert-light *

* Dark backgrounds have been added to assist legibility.