Bootstrap styling guide

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

Navigation

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