Bootstrap styling guide

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

Navigation

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>