BLOG

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.

bootstrap3-grid.jpg

How to add Bootstrap 3 to Concrete5 5.7 grid layout

12th April 2016

The guide on the Concrete5.org 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:

    
enableGridContainer();
$a->display($c);
?>
    
setAreaGridMaximumColumns(12);
$a->display($c);
?>
    

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.

THINK THERE'S SOMETHING WE CAN TALK ABOUT?

Whether you want to discuss a piece of business, get advice on how to approach something in Concrete5, want my top Project Zomboid tips or just simply want to say hello, then please do. I'm not as anti-social as my status as a developer would suggest.

GET IN TOUCH

CONTACT

Image
LOCATION
Milton Keynes (near London)
Image
PHONE
Disclosed for business only
Image
E-MAIL
steven.york [at] seopher.com
Image
AVAILABILITY
Contact me to find out