If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

Bootstrap 2

From MoodleDocs

Warning: This page is no longer in use. The information contained on the page should NOT be seen as relevant or reliable.


Moodle 3.2 includes a theme based on the latest version of Bootstrap - Bootstrap 4. This page talks about the previous themes which were based on Bootstrap 2.

Bootstrap 2 ( is a "sleek, intuitive, and powerful front-end framework for faster and easier web development".

Moodle now has 3 themes (bootstrapbase, clean and more) that build upon the best practices, documentation, tools and resources that Bootstrap 2 provides.

If you're new to Bootstrap we'd suggest starting by reading through the documentation. Not only is it well written and informative, it uses Bootstrap itself and so is a live demonstration too.

A common complaint about Bootstrap is that all Bootstrap-built sites look the same, since people like the defaults so much they just don't bother to change them. It is however not designed to be a final look, just a platform to build on. Some examples of what can be done can be found at and (Note that some of these examples may use Bootstrap 3. Then the code of these examples won't work on themes that use bootstrap 2.3.2)


Responsive design

A key feature of Bootstrap is responsive design. This means that the look of the page changes based on the width of your screen and allows you to alter the presentation so that iPhones, iPads, Netbooks & Desktops get subtly (or radically) different views of the same page.


Bootstrap's stylesheets are written in a variant of CSS called LESS. It is possible to use Bootstrap without LESS as they provide the compiled output as CSS too, but for integration with existing Moodle HTML it is (at least currently) necessary for Moodle Bootstrap's core styles to be compiled after any changes. See the LESS page for more on this.


Bootstrap provides an set of icons called Glyphicons. These are not used for the core Moodle icons as there aren't enough suitable icons to cover Moodle's needs. But they are available for use in content by applying simple CSS classes via the HTML editor. (Note in the next version of Bootstrap this "icon sprite" is replaced with an icon font. It is hoped that Moodle can merge it's SVG icons into this font and all icons will be applied in the same manner)


Bootstrap uses CSS grids where previously web developers would have used floats (or before that tables). A key feature of grids is that they can "collapse" at smaller widths and so items that would be in a row will appear as a single column on smaller devices like iPhones.


The core Bootstrap theme uses a "Fluid Grid System". (Note that in the next version of Bootstrap, there is only one grid system and it is fluid, though it is no longer called that since it is the only grid system.)