Moodle Best Practice Guide
Layout
Spending a small amount of time making sure your content is laid out in the best possible way can make a real difference to those who end up consuming what you've written. If the width of a column is too wide, a reader can lose track of where they are as they jump to the next line. As you'll see below, you can use Moodle to restrict the maximum width of your content to try to tackle this. In addition to this, there are also a number of other tricks and tips for laying out content in Moodle that we'll highlight for you.
This section requires the use of some HTML code, where we can we'll include a snippet of code for you to copy and paste into Moodle, so you can get started right away – don't get put off by this if you're not confident, once you've got over the small learning curve you can achieve some great results.
The grid system New
Moodle includes the Bootstrap 4 grid system, a simple way to ensure that your content is readable on a variety of devices and screen sizes with little effort. We'll go through the most relevant elements for use in your Moodle sites below and a HTML code so you can get started quickly, along with a few reasons why it's worth making the effort to use it.
Bootstrap grid help
We'll highlight some of the most useful aspects of the Bootstrap 4 grid here, but make sure that you keep in mind Bootstrap provide their own comprehensive guidance which you can also refer to and use within Moodle. Keep in mind that some aspects may not work exactly as described in the Bootstrap documentation, this is due to there being a slightly different version of Bootstrap included within Moodle. (Most elements work as described however!)
Everything is responsive
One of the best things about creating content using the grid is that all of your content is automatically responsive to various screen sizes! You don't have to do any extra work to make your 2 column layout, stack on a mobile device for example, and since increasing numbers of users would like to access at least some of their course data from mobile devices, making your site as accessible as possible can only be a good thing.
In the last year* 21% of users accessed Moodle using a mobile phone. This is up from just 15% in the same period two years prior. We can reasonably foresee Moodle mobile use to increase in the years to come.
Getting started
There are three main elements to the grid system, containers, rows and columns. These hold all the text, images and information that you want to put on your Moodle site. Each element has a relationship with each other, a column must be inside a row, and a row must be inside a container.
The example below shows a code snippet, followed by what that code looks like when you enter it into Moodle. You can see how useful adding columns of content to a Moodle page would be, in fact that's how this guide itself has been created!
Example 1: Equal columns
HTML
Copy and paste this into Moodle code view
<div class="container">
<div class="row">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
What you'll get
A coloured representation of the structure created by this code:
One of three columns of content.
We've highlighted these in a colour so you can see them easily in the example, you won't see the actual columns in your Moodle site, only the content that you add to each one.
Two of three columns of content.
We've highlighted these in a colour so you can see them easily in the example, you won't see the actual columns in your Moodle site, only the content that you add to each one.
Three of three columns of content.
We've highlighted these in a colour so you can see them easily in the example, you won't see the actual columns in your Moodle site, only the content that you add to each one.
Once you've got the hang of it, you can use the grid system to create layouts that can easily contain any type of content that you want to include in your site. You can see in the example below how you can use the grid to lay out columns that span the whole page, or part of the page very easily, something you can't do simply by typing directly into the text editor.
The example below involves use of two rows of columns, one with a single column and one with two columns.
Example 2: More than one row of columns
HTML
Copy and paste this into Moodle code view
<div class="container">
<div class="row">
<div class="col">
One of one column
</div>
</div>
<div class="row">
<div class="col">
One of two columns
</div>
<div class="col">
One of two columns
</div>
</div>
</div>
What you'll see
A coloured representation of the structure created by this code:
One of one columns of content.
You could use a column like this to add an image to the header of your page. or add some content that would span the columns below, like a header.
One of two columns of content.
We've highlighted these in a colour so you can see them easily in the example, you won't see the actual columns in your Moodle site, only the content that you add to each one.
Two of two columns of content.
We've highlighted these in a colour so you can see them easily in the example, you won't see the actual columns in your Moodle site, only the content that you add to each one.
You'll notice that each column in the above examples are of equal width. If you would like to have a small column next to a larger one, you can with a little bit of extra HTML code.
In the Bootstrap 4 grid system, the screen is divided up into 12 equal columns, to limit the size of a column in the code, you can specify a width between 1 and 12 (12 being the full width of the screen).
As the example below illustrates, adding col-2 restricts the width of that column to two twelfths of the page, and any remaining col elements will sort themselves out and take up all of the remaining space without having to have a width specified.
Example 3: Varying column widths
HTML
Copy and paste this into Moodle code view
<div class="container">
<div class="row">
<div class="col-2">
One of two columns
</div>
<div class="col">
One of two columns
</div>
</div>
</div>
What you'll see
A coloured representation of the structure created by this code:
One of two columns of content.
This is a smaller column which will only ever be this wide.
Two of two columns of content.
This column will take up the rest of the available space left by the smaller column on the left-hand side.
