The layout of recent textbooks often contains remarks, notations, different colours to motivate the students to continue, to give comprehension aids and to show connections to other parts of the book. This kind of layout is a well-considered didactic design.
You can improve the structure of your Moodle course as well with several rail guards to lead the students and to offer a more user-friendly design. The key for this is an element of Bootstrap. It is as easy as copy and paste.

Get the Badge element

Bootstrap!? Maybe you already stumbled over this word in the context with Moodle designs, but still, you don’t know what you can do with it. In a short series of videos, I will show you how to improve your Moodle course by using Bootstrap elements.

In the first part, I am talking about the element badge. You can copy and paste this element to highlight certain parts of your course. Please watch the video.

Make more with Moodle: Structure your courses with Bootstrap elements

The code that I used in the video was taken from the Bootstrap page. You can copy the code from there or, for your convenience, from here:

<span class="badge badge-primary">Your text here</span>

You can substitute the word  primary with the following words:


The substitution as an effect on the colour of the badge:

Change the colour of badges by changing their names
Source: Bootstrap

The function of these different colours is self-explanatory. Of course, you do not have to follow the guidelines. Nevertheless, these colours should be used consistently throughout the whole Moodle course.

Never insert Bootstrap code in text mode

Like I explained in the video, it is important to switch to HTML mode in the texteditor, when pasting Bootstrap code. How to do this I explain in the following paragraph for the text editor ATTO. The editor TinyMCE editor works pretty similar:

1. Make the HTML icon visible:

Make the second row visible by clicking the very left icon
The expand the menu bar click on the icon on the left side

2. Change to the HTML editor

Position of the HTML icon
The code icon is on the far right side

After clicking on the HTML icon you can see your text in HTML mode. Paste the code, which you copied before at the place where the badge should appear. With another click on the HTML icon, you can switch back to the text mode. There you can see your changes immediately.

In the next part of this series, I will show you, how you can present a lot of information or text in a user-friendly way so that your students don’t have to scroll through long texts to see the information at the end.

Weitersagen …