Advanced Bootstrap Components for Moodle Theme Impression/Labland/Herald/Gourmet/Element

This tutorial was originally written for the Impression theme but it also applies to the themes Herald, Gourmet, Labland and Element.

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

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

Tabs

<div class="overflow-hidden">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist" style="margin-bottom: 0;">
    <li role="presentation" class=""><a href="#tab-1" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="false">Tab 1</a></li>
    <li role="presentation"><a href="#tab-2" aria-controls="profile" role="tab" data-toggle="tab">Tab 2</a></li>
    <li role="presentation"><a href="#tab-3" aria-controls="messages" role="tab" data-toggle="tab">Tab 3</a></li>
    <li role="presentation" class="active"><a href="#tab-4" aria-controls="settings" role="tab" data-toggle="tab" aria-expanded="true">Tab 4</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane" id="tab-1">Tab 1 content goes here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
    <div role="tabpanel" class="tab-pane" id="tab-2">Tab 2 content goes here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
    <div role="tabpanel" class="tab-pane" id="tab-3">Tab 3 content goes here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
    <div role="tabpanel" class="tab-pane active" id="tab-4">Tab 4 content goes here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
  </div>

</div>

Thumbnails

<div class="row overflow-hidden">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="http://dummyimage.com/171x180/5cb85c/fff.png&amp;text=thumbnail" alt="image" style="width:100%;">
    </a>
  </div>
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="http://dummyimage.com/171x180/5bc0de/fff.png&amp;text=thumbnail" alt="image" style="width:100%">
    </a>
  </div>
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="http://dummyimage.com/171x180/f0ad4e/fff.png&amp;text=thumbnail" alt="image" style="width:100%">
    </a>
  </div>
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="http://dummyimage.com/171x180/d9534f/fff.png&amp;text=thumbnail" alt="image" style="width:100%">
    </a>
  </div>
</div>

<div class="row overflow-hidden">
  <div class="col-sm-6 col-md-3">
    <div class="thumbnail">
      <img src="http://dummyimage.com/242x200/5cb85c/fff.png&amp;text=thumbnail" alt="image" style="width:100%">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-md-3">
    <div class="thumbnail">
      <img src="http://dummyimage.com/242x200/5bc0de/fff.png&amp;text=thumbnail" alt="image" style="width:100%">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-md-3">
    <div class="thumbnail">
      <img src="http://dummyimage.com/242x200/f0ad4e/fff.png&amp;text=thumbnail" alt="image" style="width:100%">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-md-3">
    <div class="thumbnail">
      <img src="http://dummyimage.com/242x200/d9534f/fff.png&amp;text=thumbnail" alt="image" style="width:100%">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

Media object

<h3>Default Example</h3>
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="http://dummyimage.com/64x64/5cb85c/fff.png" alt="image">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    
  </div>
</div>

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="http://dummyimage.com/64x64/5cb85c/fff.png" alt="image">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    
  </div>
</div>

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="http://dummyimage.com/64x64/5cb85c/fff.png" alt="image">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    <div class="media">
      <div class="media-left">
        <a href="#">
          <img class="media-object" src="http://dummyimage.com/64x64/5bc0de/fff.png" alt="image">
        </a>
      </div>
      <div class="media-body">
        <h4 class="media-heading">Media heading</h4>
        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        
      </div>
    </div>
    
  </div>
</div>

<h3>Alignment Example</h3>
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="http://dummyimage.com/64x64/5cb85c/fff.png" alt="image">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Top aligned media</h4>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>

    <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="http://dummyimage.com/64x64/5bc0de/fff.png" alt="image">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>

    <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>

<div class="media">
  <div class="media-left media-bottom">
    <a href="#">
      <img class="media-object" src="http://dummyimage.com/64x64/f0ad4e/fff.png" alt="image">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Bottom aligned media</h4>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>

    <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>

Panels

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
        luctus pharetra faucibus. Cras leo dui, tempor vitae lacus sit
        amet, lacinia porta eros. Aliquam et mauris vitae arcu sollicitudin
        vehicula quis ac nisl. Pellentesque sapien sapien, pharetra nec
        metus vel, tincidunt pretium elit.
    </div>
</div>
<div class="panel panel-theme">
    <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
        luctus pharetra faucibus. Cras leo dui, tempor vitae lacus sit
        amet, lacinia porta eros. Aliquam et mauris vitae arcu sollicitudin
        vehicula quis ac nisl. Pellentesque sapien sapien, pharetra nec
        metus vel, tincidunt pretium elit.
    </div>
</div>
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
        luctus pharetra faucibus. Cras leo dui, tempor vitae lacus sit
        amet, lacinia porta eros. Aliquam et mauris vitae arcu sollicitudin
        vehicula quis ac nisl. Pellentesque sapien sapien, pharetra nec
        metus vel, tincidunt pretium elit.
    </div>
</div>
<div class="panel panel-success">
    <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
        luctus pharetra faucibus. Cras leo dui, tempor vitae lacus sit
        amet, lacinia porta eros. Aliquam et mauris vitae arcu sollicitudin
        vehicula quis ac nisl. Pellentesque sapien sapien, pharetra nec
        metus vel, tincidunt pretium elit.
    </div>
</div>
<div class="panel panel-info">
    <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
        luctus pharetra faucibus. Cras leo dui, tempor vitae lacus sit
        amet, lacinia porta eros. Aliquam et mauris vitae arcu sollicitudin
        vehicula quis ac nisl. Pellentesque sapien sapien, pharetra nec
        metus vel, tincidunt pretium elit.
    </div>
</div>
<div class="panel panel-warning">
    <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
        luctus pharetra faucibus. Cras leo dui, tempor vitae lacus sit
        amet, lacinia porta eros. Aliquam et mauris vitae arcu sollicitudin
        vehicula quis ac nisl. Pellentesque sapien sapien, pharetra nec
        metus vel, tincidunt pretium elit.
    </div>
</div>
<div class="panel panel-danger">
    <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
        luctus pharetra faucibus. Cras leo dui, tempor vitae lacus sit
        amet, lacinia porta eros. Aliquam et mauris vitae arcu sollicitudin
        vehicula quis ac nisl. Pellentesque sapien sapien, pharetra nec
        metus vel, tincidunt pretium elit.
    </div>
</div>

List Group

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

<ul class="list-group"> 
    <li class="list-group-item"> <span class="badge">8</span> Porta ac consectetur ac</li> 
    <li class="list-group-item"> <span class="badge badge-success">14</span> Cras justo odio </li> 
    <li class="list-group-item"> <span class="badge badge-info">2</span> Dapibus ac facilisis in </li> 
    <li class="list-group-item"> <span class="badge badge-warning">1</span> Morbi leo risus </li> 
    <li class="list-group-item"> <span class="badge badge-danger">5</span> Lorem Ipsum</li> 
</ul>

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>

Dropdown Buttons

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>


<div class="btn-group"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>

<div class="btn-group"> <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>

<div class="btn-group"> <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>

<div class="btn-group"> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>

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

<div>
    <i class="fa fa-hand-o-right fa-1 color-success">&nbsp;</i>
    <i class="fa fa-hand-o-right fa-2 color-danger">&nbsp;</i>
    <i class="fa fa-hand-o-right fa-3 color-warning">&nbsp;</i>
    <i class="fa fa-hand-o-right fa-4 color-theme">&nbsp;</i>
    <i class="fa fa-hand-o-right fa-5 color-info">&nbsp;</i>
</div>

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!

1500+ students enrolled

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

2000+ students enrolled