Theme Bootstrap 3 for Moodle

August 2013 version 3 of the Twitter Bootstrap CSS framework was released. This post explains how this framework was used to create a new Moodle theme.

"Bootstrap 3"

A little history: If you are using Moodle version 2.5 or newer you can select a theme called Clean from the Moodle theme selector. This theme uses a base theme called bootstrapbase which makes the theme called Clean a child theme. The bootstrapbase theme is build using version 2.x of the Twitter Bootstrap framework. Last year Moodle Head Quarters descided to adopt the bootstrapbase theme and the Clean theme into it’s core distribution. It has become a popular theme especially for usage on Mobile devices.

The bootstrapbase theme was created using the bootstrap theme which I created together with David Scotson. This new version of the theme is a theme on it’s own. Perhaps at some time it will be used to upgrade the Moodle core theme. for now it is there for you to use and enjoy.

So what is Twitter Bootstrap?

Twitter Bootstrap is a framework used for building the user interfaces for web-based applications. When implementing Bootstrap a developer can choose to use elements of the Bootstrap framework to build a user interface. With version 3 developers can now create a better Grid, faster load times and most importantly have a better Mobile experience.

Coding for fun

This Christmas brake I simply could not sit down and enjoy Christmas carols and shopping. So instead I took some time creating a new version of the bootstrap moodle theme based on Twitter Bootstrap version 3. The new version is still a work in progress but it is already working quite well. It works for Moodle versions 2.5 and 2.6, you just need to download the right branch.

Get it now!

The new version can be downloaded from my Github theme bootstrap repository. You can test this theme on Sonsbeekmedia theming or download and install it on your server.

Click the read more link to learn more about the new features.

New features in Twitter Bootstrap 3

Twitter Bootstrap version 3 offers loads of new features. Most of which are only interesting if you are a front-end developer. Checkout this blog to learn more about them.

New features in the bootstrap theme

First of all it the Grid has changed, it now support large and small screens and only collapses (repositions blocks) on the really small devices.

The login page has change to look more modern and use the Grid

Messages, language selection and user profile info are all pushed into the Moodle navbar. To make your Moodle just a little more Facebook like.

The forms now use the Bootstrap grid

Sorry, but I got rid of the YUI javascript. Unless somebody is willing to rewrite the Twitter Bootstrap jQuery javascript to YUI..


Testing, lots of testing. So any help is more than welcome.

Rewrite CSS. There is still a lot of CSS that can be rewritten to use Twitter bootstrap awesomeness. If you are into writing LESS css.. Please fork my on github