Looking for a Boost-based Moodle theme? Checkout our new products.
In our latest Bootstrap-based Moodle theme “Impression”, there are more advanced components you can use to design your courses. In this tutorial we will list all of the relevant HTML code snippets used in the theme demo.
Demo: Link
Level: Intermediate
Pre-requirement: Basic HTML/CSS knowledge
Related tutorial: Useful Bootstrap Components for Moodle themes
Jumbotron
Tabs
Thumbnails
Media object
Panels
List Group
Dropdown Buttons
FontAwesome Icons
There are 600+ fontAwesome icons you can use in the theme.
Icon colour related classnames:
Theme colour: color-theme
Blue: color-info
Green: color-success
Orange: color-warning
Red: color-danger
Icon size related classnames:
size 1: fa-1
size 2: fa-2
size 3: fa-3
size 4: fa-4
size 5: fa-5
Tooltips

<button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button> <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
Popovers

<button type="button" class="btn btn-warning" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on top </button> <button type="button" class="btn btn-danger" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on bottom </button>
Want to master Moodle?
Moodle 3.0x Masterclass: Complete Educator's Guide to Moodle
Moodle Tutorial for Educators - Learn Moodle to create WORLD CLASS online courses. Leverage Moodle 3 like a BOSS!

Are you a Moodle admin?
Moodle Administration Tutorial: Beginner, Intermediate Guide
Learn World Class Moodle LMS Admin, Configure, Theme, Manage Courses, Users, Permissions, Roles, Security, Plugins...
