How To Add A Call-To-Action Section To Your Moodle’s Front Page (For Boost or Boost Based Themes)

Are you using Boost or a Boost-based theme for your Moodle site? If so, you can take advantage of Moodle’s built-in front page topic block to add a Call-To-Action (CTA) section on your Moodle site’s front page. A typical CTA section contains an information block and a prominent CTA button for your users to take action. It’s useful for important site announcements or information. In this tutorial we’ll show you how to add a simple CTA section to your Moodle site.

A CTA section in our Boost-based Moodle theme Maker:

moodle-boost-add-site-cta-block-maker-theme

A CTA section in Moodle’s default theme Boost:

moodle-boost-theme-add-site-cta-block

Step 1

Log in to your Moodle site as an admin user and go to your site’s front page. Turn editing on as shown in the figure below.

moodle-boost-add-site-cta-block-turn-editing-on

Step 2

Once editing is on you should find a small cog icon for editing the topic section summary. Hover over the cog icon and you can see a small label which says “Edit summary”. Click the cog icon to configure the “Summary of Site” block.

moodle-boost-add-site-cta-block-editing-on-config

moodle-boost-theme-add-site-cta-block-html-editor

Step 3

In the “Summary” input field you can enable Moodle editor’s HTML code mode and copy and paste the following code into the HTML editor. Edit the content, CTA button text and link to suit your own needs. Save your changes.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Pellentesque finibus nunc felis, ac sollicitudin dui imperdiet a. Mauris mattis tincidunt leo, vel sollicitudin ex dignissim ut. In tortor elit, suscipit nec velit ut, feugiat facilisis orci. Aliquamet lorem in orci pulvinar consectetur. Phasellus orci risus, cursus et velit quis, euismod varius leo. </p>

<p>Aenean efficitur <a href="#link">link example</a> justo ut velit dapibus laoreet. Nullam volutpat magna euismod mauris viverra, eu vulputate arcu tempus. Vestibulum ac lectus ut velit hendrerit elementum et ac ipsum. Ut semper, ipsum vitae feugiat consequat, libero sapien porttitor ligula, non commodo arcu ex at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget faucibus tortor. Mauris blandit libero efficitur, dignissim velit in, vestibulum erat.</p>

<div><a class="btn btn-primary" href="#link">Contact Us</a></div>

There you have it. You have successfully added a CTA section to your Moodle’s front page.Want to add a static page to your Moodle site to hold site information? Check out our blog post here.

How To Limit The Number of Moodle Courses Displayed On Your Front Page

If you have configured your Moodle’s front page to display a list of available courses, Moodle will display up to 200 courses by default. This is not a problem if your site only has a few courses but if you have hundreds of courses you might want to limit the number of courses displayed on the front page. You can follow the steps below to limit the front page course numbers.

Step 1

Log in to your Moodle site as an admin user, and navigate to the “Front page settings” page: Site administration > Front page > Front page settings

moodle-front-page-settings

Step 2

Find the “Maximum number of courses” option on the settings page and set your desired number.

moodle-front-page-limit-number-of-courses

That’s it. Now you should have a course list with a limited number of courses. Moodle displays the newest available courses first in the course list. Want to manually pick some courses to display on your front page as featured courses? Check out our premium Moodle theme Maker. In the Maker theme you can manually add up to 20 featured courses and 6 promo blocks with video links.

Moodle Maker theme – featured courses section

moodle-maker-theme-front-page-featured-courses

Moodle Maker theme – promo blocks section

moodle-maker-theme-front-page-promo-blocks

How To Add A Contact Form Page To Your Moodle Site

Want to add a working contact form page to your Moodle site so users can send you messages via the form while they are on your site? We have set up an example page on our Moodle theme demo site (the demo is using our Maker theme). In this tutorial we will show you the simple steps you can take to create the same contact form page on your Moodle site. You can download the example source code at Step 3.

moodle-add-contact-form-page-page-view

Step 1

Download and install two Moodle third party plugins – Static Pages and Contact Form. You can install the plugins by placing the downloaded plugin folders inside of your Moodle site directory’s “local” folder.

moodle-add-contact-form-page-install-plugins

Step 2

Set up your contact form recipient email address in Moodle. This is the default email address for receiving information sent by the contact form. Go to: Site administration > Server > Support contact and enter your preferred recipient email address in the “Support email” input field.

moodle-add-contact-form-page-setup-recipient-email

Step 3

Create a basic contact form HTML file based on the documentation of Static Pages and Contact Form. To save you the work, you can simply download the HTML file we created for our Moodle demo site and use the file for your own Moodle site.

Free Download (3865 downloads)

Below is our contact form HTML file source code. Feel free to use it as a template base to build your own bespoke contact form. You can create a more complicated form if you follow the docs for the Contact Form plugin here.

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Contact Us</title>   
</head> 

<body>   

<div class="staticpage-wrapper container">
	<h1 class="staticpage-title">Contact Form</h1>
    <div class="staticpage-content">
	    <div class="contact-wrapper">
		    <div class="contact-intro mb-5">
			    <p>This is an example of a Moodle contact form page.</p>
			 
		    </div>
	        <div class="contact-form-box rounded p-lg-5 mb-5">
				<form id="contact-form" class="contact-form" action="../contact/index.php" method="post">
					<h2 class="text-center mb-3">How Can We Help?</h2>
					<div class="text-center mb-4">Want to get in touch with us or have a question?  Fill out this form or contact <a href="#">elearning@3rdwavemedia.com</a></div>
					<div class="form-row">                                                           
						<div class="form-group col-12 col-xl-6">
							<label class="sr-only" for="name">Name</label>
							<input type="text" class="form-control" id="name" name="name" placeholder="Name" minlength="2" maxlength="45" required="required" pattern="[A-zÀ-ž]([A-zÀ-ž\s]){2,}">
						</div>                    
						<div class="form-group col-12 col-xl-6">
							<label class="sr-only" for="email">Email</label>
							<input type="email" class="form-control" id="email" name="email" placeholder="Email" required="required">
						</div>
						
						<div class="form-group col-12">
							<label class="sr-only" for="cmessage">Your message</label>
							<textarea class="form-control" id="cmessage" name="message" placeholder="Enter your message" rows="10" required="required"></textarea>
						</div>
						<input type="hidden" id="sesskey" name="sesskey" value="">
                        <script>document.getElementById('sesskey').value = M.cfg.sesskey;</script>
						<div class="form-group col-12">
							<input type="submit" name="submit" id="submit" value="Send" class="btn btn-block btn-primary py-2">
							
						</div>                           
					</div>
				</form>
			</div>
	    </div> 
	</div>
</div>
              
</body>
</html> 

Step 4

Follow our previous tutorial here to upload the contact form HTML file to your Moodle site via the Static Pages plugin.

You can access the Contact Form plugin settings page via: Site administration > Plugins > Local plugins > Contact Form

If you have followed all of the steps above correctly you should have created a working contact form page on your Moodle site. To make the contact page visible to your users you can add the page link to Moodle’s built-in horizontal custom menu. If you’re using our Maker theme for Moodle 3.8+ you can also add the page link to the header dropdown menu for easy access on mobile devices.

Moodle Theme Maker – New Header Dropdown Menu

In the latest Maker theme (for Moodle 3.8+) we have added a mobile-friendly dropdown menu in the header area. You can use this dropdown menu to add up to 40 menu items and a Call-To-Action button at the end of the menu. You can easily configure this dropdown menu to provide your users with quick access to courses, course categories and any internal or external pages.

You can check our Maker theme’s live demo to see the dropdown menu in action:

moodle-maker-theme-header-dropdown-menu-gif

To configure the dropdown menu you need to log in as a site administrator and head to Maker theme’s settings page: Site administration > Appearance > Themes > Maker Settings

On the theme settings page you need to select the “Dropdown Menu” tab and configure the menu items based on your requirements.

moodle-maker-theme-header-dropdown-menu-settings-1

moodle-maker-theme-header-dropdown-menu-settings-3

By default the dropdown menu will display all menu items in a single column. If you have lots of menu items it’s a good idea to display them in multiple columns for desktop view.


Configure column number:

moodle-theme-maker-dropdown-menu-columns-setting

Example of displaying menu items in one, two and three columns:

moodle-theme-maker-dropdown-menu-cols

Want to see what other useful features our Maker theme can offer? Click here to learn more.

Moodle Theme Maker – New Frontpage Data Box Widget Area

In the latest Moodle theme Maker (for Moodle 3.8+) we have added a data box widget area in the frontpage Call-To-Action section. It’s located just below the CTA section content and above the section CTA button. It’s the perfect place to showcase useful site statistical data to your site audience. You can add up to 4 items in the data box.

You can check our Maker theme’s live demo to see the data box design:

moodle-theme-maker-frontpage-data-box-view

You can find all the data box configuration settings just under the frontpage CTA section tab.

moodle-theme-maker-databox-settings

Want to see what other useful features our Maker theme can offer? Click here to learn more.

Moodle Theme Maker – What’s New

We have added more UX/UI features and improvements in our Maker theme (for Moodle 3.8+). You can find all the new features listed in this blog post.

New Frontpage Categories Section

Now you can add up to 20 custom course categories on your Moodle site’s frontpage. Each category item can hold an icon image, a title, a description and a link. Instead of displaying Moodle’s default course categories on your frontpage, you can make a list of your top course categories and then point each item to relevant Moodle course category pages.

You can download free icons from sites such as FontAwesome, Google Material Design Icons and lineicons.

Our demo site uses pro icons from FontAwesome.

Section Admin Settings

Frontpage Categories Section (without description)

moodle-theme-maker-categories-section-without-desc-text

Frontpage Categories Section (with description)

moodle-maker-theme-categories-with-desc-text

New Header Dropdown Menu

You can add a mobile-friendly dropdown menu in the header area. Learn more.

moodle-maker-theme-header-dropdown-menu-gif

New Data Box Widget Area

You can add a data box widget in the frontpage Call-To-Action section. Learn more.

moodle-theme-maker-frontpage-data-box-view

Default Course Image

Now you can set a default course image for all your Moodle courses. You can find the new theme setting under the “Course Settings” tab.

Admin Setting

moodle-theme-maker-default-course-image-settings

Dashboard View

moodle-theme-maker-default-course-image

Hide Logo and Custom Menu For Logged In Users

By default, Maker theme will display the site logo and Moodle custom menu (horizontal menu) for logged in users throughout the site. If it’s not essential to show your logged in users the logo and menu when they’re viewing a Moodle course or dashboard, you can choose to hide them to give your users more screen space.

You can hide the logo and custom menu via the theme settings page. The checkbox is under the “Header” tab as shown in the figure below.

moodle-maker-theme-hide-branding-section

Default Dashboard Page

moodle-maker-theme-login-has-branding-section

Dashboard Page With Hidden Logo and Menu

https://elearning.3rdwavemedia.com/wp-content/uploads/2019/11/moodle-maker-theme-login-branding-section-hidden.png

FrontPage Benefits Section

We have added an option for site admins to use custom images for each benefit item. By default, Maker theme allows you to use built-in Google Material icons for each benefit icon. In the new Maker theme you can choose to use your custom images instead of the built-in icons. You can download free icons from sites such as FontAwesome, Google Material Icons and lineicons.

Section Admin Settings

moodle-maker-theme-benefits-icon-image-settings

FrontPage Slideshow – More slides

Now you can add up to 10 slides to the slideshow.

moodle-maker-theme-slide-10

Moodle Boost and Boost-based Themes – How To Display Side Blocks On The Left Instead of Right

By default, Moodle displays side blocks on the right side of the page in a Boost or Boost-based theme. If your organisation wants to display all side blocks on the left side of the page instead, you can write custom css/scss code to achieve this. In this post we’ll share the code you need to do this.

Side Blocks On The Right (Default Position)

boost-based-theme-sideblocks-right

Step 1

Log in to your Moodle site as an admin user, and navigate to your Boost or Boost-based theme’s settings page. Under the “Advanced Settings” tab you should find an input field called “Raw SCSS”.(see figure below).

moodle-boost-theme-raw-scss-input-field

Step 2

Copy and paste the following code snippet into the “Raw SCSS” input field. Save your changes.



#region-main.has-blocks {float: right}
section[data-region="blocks-column"] {float: left}


Side Blocks On The Left (After Customisation)

boost-based-theme-sideblocks-left

Moodle Theme Maker – Advanced Theme Colour Customisations

Maker is our most popular Boost-based Moodle theme. It comes with 6 built-in colour schemes and options to change the primary and secondary colours to suit your organisation’s branding. For advanced colour customisations you can also write your own custom SCSS/CSS code to fine tune the theme appearance.

In this post we’d like to share some useful SCSS/CSS code snippets you can use to tweak your theme’s colour schemes further. The colours used in the code snippets are there as placeholders. You can change them to your desired colour hex code to make them consistent with your design.

Site Top Bar

Default Styling

moodle-theme-maker-topbar-origin

Custom CSS/SCSS to override the default styling:


/* Top Bar Background Color */
.page-header .top-bar { background: purple; } 

What you get after applying the custom code:

moodle-maker-theme-topbar-change-color

Search Section

Default Styling

Custom CSS/SCSS to override the default styling:


/* Search Section Background Color */
.search-courses-section { background: purple; } 


What you get after applying the custom code:

maker-theme-search-bar-custom

Benefits Section

Default Styling

moodle-theme-maker-benefits-section

Custom CSS/SCSS to override the default styling:


/* Benefits Section */
.benefits-section .icon-holder { color: purple; } /* material icon color */
.benefits-section .item-title { color: purple; } /* title text color */
.benefits-section .item-desc { color: purple; } /* content text color */
.benefits-section .item-desc a { color: white; } /* content text link color */
.benefits-section .item-desc a { text-decoration: underline; } /* content text underline */

What you get after applying the custom code:

moodle-maker-theme-benefits-section-change-color

Promo Section

Default Styling

moodle-theme-maker-promo-section-origin

Custom CSS/SCSS to override the default styling:


/* Promo Section Background Color  */
.promo-section .item-content { background: purple; }

What you get after applying the custom code:

moodle-theme-maker-promo-section-color-change

Call To Action Section

Default Styling

moodle-theme-maker-cta-section-origin

Custom CSS/SCSS to override the default styling:


/* Call To Action Section */
.cta-section .cta-title { color: purple; } /* section title color */
.cta-section .cta-content { color: purple; } /* content text color */
.cta-section .cta-content a { color: white; } /* content text link color */
.cta-section .cta-content a { text-decoration: underline; } /* content text link underline */

What you get after applying the custom code:

moodle-maker-theme-cta-section-color-change

Footer Section

Default Styling

moodle-theme-maker-footer-origin

Custom CSS/SCSS to override the default styling:

/* Footer Section */
#page-footer { background: purple; } /* footer background color */
#page-footer .footer-bottom-bar {background: black} /* bottom copyright bar */

What you get after applying the custom code:

moodle-theme-maker-footer-change-color

Code Snippets

Below are all the code snippets from the examples above:

/* Topbar */
.page-header .top-bar { background: purple; } 

/* Benefits Section */
.benefits-section .icon-holder { color: purple; }
.benefits-section .item-title { color: purple; }
.benefits-section .item-desc { color: purple; }
.benefits-section .item-desc a { color: white; }
.benefits-section .item-desc a { text-decoration: underline; }

/* Promo Section  */
.promo-section .item-content { background: purple; } 

/* Call To Action Section */
.cta-section .cta-title { color: purple; } 
.cta-section .cta-content { color: purple; } 
.cta-section .cta-content a { color: white; } 
.cta-section .cta-content a { text-decoration: underline; } 

/* Footer Section */
#page-footer { background: purple; } 
#page-footer .footer-bottom-bar { background: black; }

Moodle Course Tip: How to make Moodle course admin menu static when scrolled

Please Note:

This tutorial only applies to Moodle 3.x sites. Moodle 4.x has a different course menu system.

By default Moodle’s Boost theme places the course admin menu on a cog icon in the course header. When editing a Moodle course it could make your course admin or teacher’s life easier by making the admin menu icon fixed in the viewport. That way, your course admin/teacher can easily access the menu even they scroll down the page. In this post we’ll share the code snippet you can use to make this optional UX improvement if your site is using Boost theme or any Boost-based Moodle theme.

Here is a screencast of the end result. The theme used in the screencast is our Boost-based theme Maker.

moodle-course-admin-menu-fixed

Step 1

Log in to your Moodle site as an admin user, and navigate to your Boost or Boost-based theme’s settings page. Under the “Advanced Settings” tab you should find an input field called “Raw SCSS” (see figure below).

moodle-boost-theme-raw-scss-input-field

Step 2

Copy and paste the following code snippet into the “Raw SCSS” input field. Save your changes.

.path-course-view #page-header .context-header-settings-menu .action-menu {
    position:fixed;
    right: 30px;
    z-index: 10;
}

moodle-course-action-menu-static-position-css-code

That’s it. Now you’ve made the admin menu fixed in the viewport.

Moodle Boost Theme: How to add Bootstrap 4 tabbed content to your Moodle course

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

moodle-boost-theme-tabbed-content

Boost-based Theme Tabs

moodle-maker-theme-bootstrap-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.

Moodle Theme Maker – Useful Bootstrap 4 Components

Our popularMoodle theme Maker is based on the Moodle Boost theme and you can use lots of great Bootstrap 4 UI components to enhance the design of your Moodle courses. You can easily utilise the components to present your course content in a professional and attractive way.

In this tutorial we will show you how to add the components to your course. Some basic HTML/CSS knowledge is required as you need to know how to edit the code for your own content. You can find a live demo here.

How to add the components in a Moodle course

There are two ways to add the components. You can either add the components code to a course Section Summary or to a Label (Moodle resource). Below are some steps you need to take to add the code.

1. Add code to a Section Summary

1) Log into your course as a teacher and turn editing on.

moodle-theme-maker-turn-editing-on

2) Go to the section settings page

moodle-theme-maker-edit-section-settings

3) Enter the code into the Summary input field. You need to activate the HTML code editor before entering the code.

moodle-theme-maker-add-code-to-section-summary

4) Save changes.

2. Add code to a Label

1) Log into your course as a teacher and turn editing on.

2) Add a Label to the course.

moodle-theme-maker-add-label

3) Enter the code into the Label text input field. You need to activate the HTML code editor before entering the code.

moodle-theme-maker-add-code-to-label

4) Save changes.

Components code

Below are all of the components we used in the live demo. You can simply take the code snippets and start building your course.


Tabs NEW
<!-- Nav tabs -------------- -->
<ul 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.
    </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>

Slideshow

moodle-theme-maker-bootstrap-components-slideshow

Tip: It’s best to give the carousel a max width in the code (eg. style="max-width: 760px"). The value should be equal or lower than the width of your image.

<div id="carousel-1" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-1" data-slide-to="1"></li>
        <li data-target="#carousel-1" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
	        <img class="d-block img-fluid" src="https://3rdwavemedia.com/demo-images/slides/maker-slide-1.jpg" alt="" />
	    </div>
        <div class="carousel-item"><img class="d-block img-fluid" src="https://3rdwavemedia.com/demo-images/slides/maker-slide-2.jpg" alt="" /></div>
        <div class="carousel-item"><img class="d-block img-fluid" src="https://3rdwavemedia.com/demo-images/slides/maker-slide-3.jpg" alt="" /></div>
    </div>
	<a class="carousel-control-prev" href="#carousel-1" role="button" data-slide="prev">
		<span class="carousel-control-prev-icon" aria-hidden="true"></span>
		<span class="sr-only">Previous</span>
	</a>
	<a class="carousel-control-next" href="#carousel-1" role="button" data-slide="next">
		<span class="carousel-control-next-icon" aria-hidden="true"></span>
		<span class="sr-only">Next</span>
	</a>
</div>  
Cards

maker-theme-bootstrap-components-cards

<div class="card" style="width: 400px;">
  <img class="card-img-top" src="https://3rdwavemedia.com/demo-images/slides/maker-card-1.jpg" alt="Card image cap" />
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="https://3rdwavemedia.com/demo-images/slides/maker-card-0.jpg" alt="Card image cap" />
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="https://3rdwavemedia.com/demo-images/slides/maker-card-2.jpg" alt="Card image cap" />
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="https://3rdwavemedia.com/demo-images/slides/maker-card-3.jpg" alt="Card image cap" />
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>
Tabs

maker-theme-bootstrap-components-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">Home</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">Profile</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">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">
	  <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
    </div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
	  <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. </p>
	</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
	  <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.</p>
  </div>
</div>
Jumbotron

maker-theme-bootstrap-components-jumbotron

<!---Jumbotron-->
<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <p class="lead">
    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
  </p>
</div>
Tables

maker-theme-bootstrap-components-tables

<!--//Basic Table-->
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
<!--//Stripped Rows-->
<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
<!--//Table Head Options-->
<table class="table">
  <thead class="thead-inverse thead-dark">
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-default thead-light">
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
Alerts

maker-theme-bootstrap-components-alerts

<div class="alert alert-success" role="alert">
  <strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info" role="alert">
  <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="alert alert-danger" role="alert">
  <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
Buttons

maker-theme-bootstrap-components-buttons

<!--//Basic Buttons-->
<p><a class="btn btn-primary" href="http://elearning.3rdwavemedia.com/">Primary Button</a></p>
<p><a class="btn btn-secondary" href="http://elearning.3rdwavemedia.com/">Secondary Button</a></p>
<p><a class="btn btn-success" href="http://elearning.3rdwavemedia.com/">Success Button</a></p>
<p><a class="btn btn-info" href="http://elearning.3rdwavemedia.com/">Info Button</a></p>
<p><a class="btn btn-warning" href="http://elearning.3rdwavemedia.com/">Warning Button</a></p>
<p><a class="btn btn-danger" href="http://elearning.3rdwavemedia.com/">Danger Button</a></p>
<!--//With Icons-->
<p><a href="http://elearning.3rdwavemedia.com/" class="btn btn-primary has-icon"><i class="fa fa-heart"></i>Primary Button</a></p>
<p><a href="http://elearning.3rdwavemedia.com/" class="btn btn-secondary has-icon"><i class="fa fa-heart"></i>Secondary Button</a></p>
<p><a href="http://elearning.3rdwavemedia.com/" class="btn btn-success has-icon"><i class="fa fa-check-circle"></i>Success Button</a></p>
<p><a href="http://elearning.3rdwavemedia.com/" class="btn btn-info has-icon"><i class="fa fa-info-circle"></i>Info Button</a></p>
<p><a href="http://elearning.3rdwavemedia.com/" class="btn btn-warning has-icon"><i class="fa fa-warning"></i>Warning Button</a></p>
<p><a href="http://elearning.3rdwavemedia.com/" class="btn btn-danger has-icon"><i class="fa fa-exclamation-circle"></i>Danger Button</a></p>

Badges

maker-theme-bootstrap-components-badges

<!--//Contextual variations-->
<span class="badge badge-default">Default</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>
<!--//Pill badges-->
<span class="badge badge-pill badge-default">Default</span>
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-danger">Danger</span>
Modal

maker-theme-bootstrap-components-modal

moodle-theme-bootstrap-components-modal-open

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Woohoo, you're reading this text in a modal!
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
FontAwesome Icons

You can use 600+ FontAwesome icons in your course.

maker-theme-bootstrap-components-fontawesome-icons

Tip: Use classnames fa-1, fa-2, fa-3, fa-4 and fa-5 to control the size of the icon

<div>
    <i class="fa fa-check-square-o fa-1"></i>
    <i class="fa fa-check-square-o fa-2 text-success"></i>
    <i class="fa fa-check-square-o fa-3 text-danger"></i>
    <i class="fa fa-check-square-o fa-4 text-warning"></i>
    <i class="fa fa-check-square-o fa-5 text-info"></i>
</div>
Google Material Design Icons

You can use 900+ Google material design icons in your course.

maker-theme-bootstrap-components-google-material-icons

Tip: Use classnames md-16, md-18, md-24, md-36 and md-48 to control the size of the icon.

<div>
	<i class="material-icons md-16">backup</i>
	<i class="material-icons md-18 text-success">backup</i>
	<i class="material-icons md-24 text-danger">backup</i>
	<i class="material-icons md-36 text-warning">backup</i>
	<i class="material-icons md-48 text-info">backup</i>
</div>