Bootstrap styling guide

Site: Flinders Learning Online
Topic: Bootstrap styles in FLO
Book: Bootstrap styling guide
Printed by: Guest user
Date: Saturday, 31 July 2021, 10:29 PM

Description

HTML code and instructions for using the styles demonstrated in this 'topic'

About this guide

This resource demonstrates each advanced styling technique in FLO and the code required to create each style.

Each item has a difficulty level to represent the complexity required to implement.

  Minor knowledge of HTML required.
  Medium complexity – some knowledge of HTML required.
    HTML and javascript knowledge required.

Resources

FLO style guide for authors – good practice guidelines for the development of FLO sites for topic coordinators and other staff setting up and/or maintaining FLO sites. 

Navigation

Navigation helps students find what they need within 3 clicks, and should be as intuitive as possible.

If a site looks uncluttered ('clean'), particularly at the top level (section 0), students will find it welcoming and usable. 

Tips

  • Does your site look professional? First impressions count (like a print document, the site should have a consistent look and feel)
  • Can content be seen at a glance? Students are accustomed to weekly modules, but you may want to navigate them to particular elements of the site key to their learning (for example, resources or links they need repeatedly during the topic)
  • Will students get lost in your site? This usually occurs when you bury content or don't organise it logically – keep the navigation as 'flat' as possible. 

Buttons

  Medium complexity – some knowledge of HTML required.

What is it?

Buttons can be created in FLO using a variety of colours and sizes, and with advanced features such as dropdown list buttons. 

How can I use it?

Group a series of buttons together on a single line with the button group.

This feature is useful for navigational purposes. FLO is arranged in modules/weeks, and doesn't have 'contents' links. Use the button series to help students move quickly through your site.

Limitations: you would want to restrict a button group to less than 10 items (6–8 links is ideal). 

How do I set it up?

The following examples display a group of buttons and the HTML code required to create the buttons. Select and copy the code into the HTML editor in the module/place where you want to use this feature in FLO.

Basic button group
Code for basic button group
<div class="btn-group" role="group" aria-label="Basic example">
<a role="button" class="btn btn-default" href="LINK_GOES_HERE" target="_blank">Button 1</a>
<a role="button" class="btn btn-default" href="LINK_GOES_HERE" target="_blank">Button 2</a>
<a role="button" class="btn btn-default" href="LINK_GOES_HERE" target="_blank">Button 3</a>
<a role="button" class="btn btn-default" href="LINK_GOES_HERE" target="_blank">button 4</a>
</div>


Buttons with dropdowns

Dropdowns can extend the default behaviour of a button.

Code for buttons with dropdown
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Coloured buttons

To add a colour to the button, replace 'btn-default' with one of the following:

  • btn-info
  • btn-success
  • btn-warning
  • btn-danger
  • btn-primary
  • btn-secondary
  • btn-light
  • btn-dark

Tabs

  Medium complexity – some knowledge of HTML required.

What is it?

This feature is useful for navigational purposes. With tabs, you can organise information so that users move across the page rather than down it, which minimalises scrolling. 

How can I use it?

Add tabs to a module to transition through panes of local content. You can also use dropdown menus.

This feature is particularly useful if you have a lot of information to convey, but first ask yourself: Can it be conveyed just as or more effectively in a book format? If you use tabs in one module but not in others, it may be confusing for students, and it is unlikely you will use tabs across your whole site. If you think you will need to use them across your whole site, you may need to think about the design of your site in general and what will work best.

How do I set it up?

See the example below for what tabs would look like in a module in your site. To get the same effect:

  1. Select and copy all text in the 'Code example for tabs' box (below).
  2. Select a module and click on the cog to edit it, then click on the HTML button to go to the HTML editor. 
  3. In the HTML editor, change the tab headings to ones you want – type over the [[ ]] brackets.
  4. In the HTML editor, add content for each tab, work within the <div> </div> tags, but typing over the [[ ]] brackets.
  5. Save your changes and review your work.
Tab 1 Content

A leafLorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lectus lacus, vestibulum at vestibulum vel, luctus sit amet turpis. Aliquam sed neque fringilla, lacinia purus ac, bibendum diam. Suspendisse eget mi sit amet justo interdum malesuada vel quis magna. Vestibulum fermentum, magna eu cursus convallis, magna elit fermentum elit, nec facilisis justo nibh id felis. Suspendisse eu diam metus. Proin ultrices, leo a sollicitudin dictum, dolor mauris congue nisi, sit amet sollicitudin est tortor sed purus. Etiam tempor molestie leo non faucibus. Phasellus in lacinia metus. Ut libero nibh, egestas sit amet consectetur vitae, vestibulum eget quam. Cras et porta odio, non euismod dolor. In nulla quam, aliquam auctor mauris eget, pellentesque commodo mi. Nunc vitae ipsum tempor, facilisis orci ut, dignissim ante. Aenean lacinia nisl et consequat scelerisque. Fusce vitae ipsum nisl.

Cras neque nisi, luctus vitae egestas et, hendrerit quis nisi. Nulla sodales sagittis nibh id hendrerit. Cras in feugiat eros. In feugiat consectetur urna. Etiam a turpis dapibus, placerat nunc vitae, facilisis tellus. Fusce faucibus accumsan gravida. Aliquam pretium enim dolor, sit amet aliquam tortor vehicula quis. Integer eget faucibus dolor, nec rutrum lectus. Donec varius nibh non lorem ultricies, ac malesuada orci pellentesque. Sed odio massa, gravida ac quam sit amet, semper iaculis dui. Fusce sagittis lacus at porta ultricies.

Tab 2 Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lectus lacus, vestibulum at vestibulum vel, luctus sit amet turpis.

and so on ...

Tab 3 Content

More content.


Code example for tabs
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">[[Tab 1 name]]</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">[[Tab 2 name]]</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">[[Tab 3 name]]</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade active show" id="home" role="tabpanel" aria-labelledby="home-tab">
<p>[[Tab 1 content]]</p>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<p>[[Tab 2 content]]</p>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<p>[[Tab 3 content]]</p>
</div>
</div>

Display

Consistent formatting and layout is helpful to users, as they know what to expect and look for. If different colours, sizes and types are used for fonts, the site will start to look 'busy' (cluttered) and become confusing for students. 

The features in this section will help make your site more usable and attractive for the user.

Tips

  • Do you want to emphasise important information? Use an alert
  • Do you want to draw attention to key concepts or other points? Use a well
  • Do you want to add extra information without taking up space? Use a tooltip

Quotes

  Minor knowledge of HTML required.

A simple way to create a quote is to use the indent icon, but if you want to create a quote that is more attention-grabbing, you could use the blockquote tags and classes to distinguish the quote from other text. For example:

Have you ever observed that we pay much more attention to a wise passage when it is quoted, than when we read it in the original author?

Philip Gilbert Hamerton, The Intellectual Life, 1873

For the style in the quote above, this is the HTML code:

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite>, date</footer>
</blockquote>

Select and copy this HTML code, then click on the Edit HTML source icon Edit HTML source icon in the HTML editor where you want to place your quote, and paste the HTML code in. Update with your own quote and source.

Alerts

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.

Icons

  Minor knowledge of HTML required.

You can use icons to draw attention to special information in FLO. The icons in Font Awesome 4.7.0 are available to use in FLO, with a slight modification.

What can you do with Font Awesome?

You can use icons to draw attention to links

Draw attention to specific information

Don't give your patients nicknames unless they prefer it

Watch your patient's body language for cues about their mood

Use as an alternative to images

Remember to bring your student ID card to your placement, or you will be refused entry!


How to modify Font Awesome for use in FLO

When you select an icon in Font Awesome you are given HTML code to put in FLO's HTML editor.

<i class="fa fa-id-card" aria-hidden="true"></i>

When putting into FLO, change the i at the beginning and end to em.

<em class="fa fa-id-card" aria-hidden="true"></em>


Styling your icons

To add a colour to your icon, add one of the following classes to the <em> tag

text-success

text-danger

text-warning

text-info

text-primary

To change the size of an icon, add one of the following classes to the <em> tag

Normal size
fa-lg
fa-2x
fa-3x
fa-4
fa-5x
<em class="fa fa-camera-retro"></em> Normal size
<em class="fa fa-camera-retro fa-lg"></em> fa-lg
<em class="fa fa-camera-retro fa-2x"></em> fa-2x
<em class="fa fa-camera-retro fa-3x"></em> fa-3x
<em class="fa fa-camera-retro fa-4x"></em> fa-4
<em class="fa fa-camera-retro fa-5x"></em> fa-5x

Tooltips

  HTML and javascript knowledge required.

What is it?

Tooltips can provide additional information to text or a button. They are an advanced element and require some javascript knowledge to correctly activate.

How can I use it?

Use a tooltip to add pop up information to text (viewable when the cursor is over the text or button).

You might want to say something about a term or other text, or use a button with a tooltip to let the user know why they would click on it. Note that a tooltip is text only – you cannot hyperlink.

How do I set it up?

Javascript first
  1. Select and copy all javascript in the 'Code for tooltip' javascript box (below).
  2. Select a module / resource 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 javascript at the top.
  4. Click on Update to go back to the text editor screen.
  5. Click Save changes (you won't see anything different – javascript is 'invisible').
HTML code second
  1. Select the HTML code in the  'Code for tooltip' HTML box for either text or a button (below).
  2. Go back to the module / resource where you placed the javascript (instructions above). 
  3. In the HTML editor, paste the HTML code where you want the tooltip to appear.
  4. In the HTML editor, change the text to what you want it to say.
  5. Click on Update to go back to the text editor screen. 
  6. Click Save changes to view in the module / resource.
  7. Refresh the browser screen (browser toolbar) so the tooltip feature displays correctly.
Tooltip examples
Text example

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

Button example

Code for tooltip

Tooltips require both HTML and javascript. An example of the HTML / javascript is given below.

HTML (for text)
<a href="#" data-toggle="tooltip" title="Tooltip text here" data-original-title="Default tooltip">text prompt for tooltip here</a>
HTML (for a button)
<div class="tooltip-demo">
<div class="bs-example-tooltips"> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip text here" data-original-title="Tooltip on left">Button title here
</button> </div>
</div>
Javascript (all tooltip styles)

The following javascript enables tooltips for anything within a container (a <div> in the example above) with a class of '.tooltip-demo'. The javascript also specifies that the tooltip text can be found in a 'data-toggle' parameter.

<script type="text/javascript">// <![CDATA[
$('.tooltip-demo').tooltip({
selector: "[data-toggle=tooltip]",
container: "body" }) // ]]></script>

Information organisation

Students will find it easier to view and use online resources if they are organised effectively and meaningfully. 

If you have a lot of information, resources and/or links in your site, you will need to think carefully about how you organise the content. You may want to plan the structure before putting content online. However, you can move content around in FLO (depending on the format) so you should be able to redesign fairly easily once you know what the site contains and how it looks for the user.

Tips

  • Is the content consistently organised? If you have a variety of organisational mechanisms (books, pages, urls) think about whether one organisational principle might work (eg pages which include urls)
  • Is the content readable on screen? Remember too that students are likely to use mobile devices to view content. so test this yourself

Media objects

  HTML and javascript knowledge required.

A media object is an image to the left, with written content to the right that does not wrap around the image (which is what most images in FLO do). Media objects are highly customisable and can be easily altered as per the code example below.

Generic placeholder image
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Code example

<div class="media">
  <img class="mr-3" src="..." alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
</div>


Media objects can be nested, by placing nested .media within the .media-body of a parent media object.

Generic placeholder image
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Generic placeholder image
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Code example

<div class="media">
<img class="mr-3" src="..." alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

<div class="media mt-3">
<a class="pr-3" href="#">
<img src="..." alt="Generic placeholder image">
</a>
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
</div>
</div>