Are you having issues getting Bootstrap 3 to work as a grid system on Concrete5 5.7? So was I. Here's a quick guide to explain how to get it working.


How to add Bootstrap 3 to Concrete5 5.7 grid layout

12th April 2016

The guide on the website is okay, but I followed it and failed to get Twitter Bootstrap to appear in the "add layout" interface. So here's a quick no-frills guide to ensure you're doing everything correctly.

Step 1 - Add a "page_theme.php" to your theme

In the root of your theme you need to add a new PHP file: /application/themes/yourtheme/page_theme.php

This is where you can control a handful of elements related to your theme - like specifying what asset dependancies there are - but importantly you can use it to define what front-end framework you're using - which allows the CMS to add grid layouts.

The contents of this file should be:

namespace Application\Theme\Yourtheme;
use Concrete\Core\Page\Theme\Theme;

class PageTheme extends Theme {

    protected $pThemeGridFrameworkHandle = 'bootstrap3';


Note that the namespace needs to follow normal naming conventions when pathfinding in C5. So if your theme directory is "my_portfolio", your namespace will need to be:

namespace Application\Theme\MyPortfolio;

Whereas if it's "myportfolio", your namespace will be:

namespace Application\Theme\Myportfolio;

Step 2 - Re-install the theme

Frustratingly, Concrete5 won't pickup the page_theme.php file outside of the installation process. So if you (like me) added it after you'd already done a lot of the theme work, you're going to need to uninstall it and reinstall it.

To do this, visit your "Pages and Themes", activate another theme (clone your current one with a different name if you must, it's only a temporary step). You'll then want to REMOVE your theme. This is important, the theme must be uninstalled, not just inactive.

Once you have re-installed the theme you can reactivate it (and everything will go back to how it was before).

Step 3 - Add layout code to your areas

This is the step I was missing; I'd followed the above but simply couldn't get the layout drop-down to contain the Twitter Bootstrap option. As it turns out, the area you've right-clicked on needs to specifically have the grid layout enabled in order for it to work.

The two options for doing this are:


Once you've got either of the above on your editable area, you'll then be able to click on the area (when in edit mode) and add layout. You should then see Twitter Bootstrap in the drop-down where you didn't before.

Hope this helps, as I was scratching for my head for a while having missed step 3.


I'm not actively seeking work of any kind right now, but I'm always happy, ready and willing to offer advice.
If you need help knowing where to start, knowing who to hire or making sense of where to begin - get in touch and I'll steer you in the right direction.



Milton Keynes (near London)
Disclosed for business only
steven.york [at]
Contact me to find out