Moodle’s latest core theme Boost is built on the popular Boostrap 4 framework. Bootstrap 4 includes lots of useful components you can use in your Boost or Boost-based themes. Tabbed-content is one of the most useful components you can use to build your Moodle courses. However, to use the tabbed content in Boost or Boot-based themes, you need to tweak the code from the official Bootstrap 4 docs. In this blog post we’ll share the tweaked code snippet you can use to build your own tabbed content in Moodle courses.

Boost Theme Tabs

Boost-based Theme Tabs

Below is the code snippet you can just copy and paste to your Moodle course’s HTML editor.

<!-- Nav tabs -------------- -->
<ul style="list-style: outside none none;" class="nav nav-tabs" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#tab1" role="tab" aria-expanded="true">Tab 1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#tab2" role="tab" aria-expanded="false">Tab 2</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#tab3" role="tab" aria-expanded="false">Tab 3</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#tab4" role="tab" aria-expanded="false">Tab 4</a>
    </li>
</ul>

<!-- Tab panes -------------- -->
<div class="tab-content">
    <div class="tab-pane active" id="tab1" role="tabpanel" aria-expanded="true">
        Tab 1 content goes here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Aenean massa. Cum sociis natoque penatibus
        et magnis dis parturient montes, nascetur ridiculus mus. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
    <div class="tab-pane" id="tab2" role="tabpanel" aria-expanded="false">
        Tab 2 content goes here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    </div>
    <div class="tab-pane" id="tab3" role="tabpanel" aria-expanded="false">
        Tab 3 content goes here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    </div>
    <div class="tab-pane" id="tab4" role="tabpanel" aria-expanded="false">
        Tab 4 content goes here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    </div>
</div>

Want to view the tabs in action? Check out our demo here. The demo is using our Boots-based theme Maker.