Moodle theme Material Boost – Useful HTML code for the footer content blocks

  • Last updated on January 11th, 2021

We have released a Moodle theme Material Boost. In this tutorial we will share the HTML code used in our demo site’s footer content blocks. If you are using Material Boost, you can use the code below as a base for your own content blocks.

What the footer content blocks will look like:

material-boost-footer-blocks

HTML code for footer content block 1

<h3 class="title">Footer Links</h3>
<ul class="list-unstyled">
    <li><a href="#" target="_blank"><i class="fa fa-caret-right"></i>About Us</a></li>
    <li><a href="#" target="_blank"><i class="fa fa-caret-right"></i>Moodle Themes</a></li>
    <li><a href="#" target="_blank"><i class="fa fa-caret-right"></i>eLearning Blog</a></li>
    <li><a href="#" target="_blank"><i class="fa fa-caret-right"></i>Contact Us</a></li>
</ul>

HTML code for footer content block 2

<h3 class="title">Footer Links</h3>
<ul class="list-unstyled">
    <li><a href="#" target="_blank"><i class="fa fa-caret-right"></i>FAQs</a></li>
    <li><a href="#" target="_blank"><i class="fa fa-caret-right"></i>Terms</a></li>
    <li><a href="#" target="_blank"><i class="fa fa-caret-right"></i>Privacy</a></li>
    <li><a href="#" target="_blank"><i class="fa fa-caret-right"></i>Support</a></li>
</ul>

HTML code for footer content block 3

<h3 class="title">About Us</h3>
<p>Maecenas ac vehicula velit, nec facilisis elit. Phasellus non porttitor justo, eu bibendum elit. Maecenas pharetra non ligula quis ultricies. Nulla varius vestibulum ligula quis hendrerit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit aenean
    commodo ligula eget dolor. </p>
<p><a class="more" href="#" target="_blank">Learn more <i class="fa fa-long-arrow-right"></i></a></p>

You May Also Like