Using Drupal Panel layouts with the Bootstrap grid system

Creating a custom Panel layout is something that is extremely powerful when laying out the content region of your Drupal theme. In this article we will look at integrating these layouts with the Bootstrap grid system.

Bootstrap layouts

These are pretty simple. You can add a grid class to a container in order to indicate how many columns you wish for it to span. These can be set differently for different viewport widths. For the purposes of the example below, we will just add classes for our 'large' display and use a 12-column grid.

In this example the first column will span 2 columns, the second column will span 7 columns and the third will span 3 columns.

<div class="row">
<div class="col-lg-2"></div>
<div class="col-lg-7"></div>
<div class="col-lg-3"></div>
</div>

Applying to a Panel layout

We can use this same structure in our Panels layout for the display of our Panel regions (which contain Panel panes).

In this example we have three Panel regions named 'left', 'middle' and 'right'.

<div class="row">
<div class="col-lg-2"><?php print $content['left']; ?></div>
<div class="col-lg-7"><?php print $content['middle']; ?></div>
<div class="col-lg-3"><?php print $content['right']; ?></div>
</div>

When content region does not take up the full width

Something to consider is that the content region in the Drupal theme might not always be set to take up the full width. For example, a left-hand sidebar might take up the first two columns and the remaining 10 columns used by theme's Content region.

This causes a nested column grid and means that adding the Bootstrap classes won't set the correct width to the Panel regions. For example, a container that's set to span 3 columns should now take up 30% of the nested grid as we're working with 10 columns. However, the Bootstrap classes will still be based on a 12 column grid so will only take up 25%.

Custom CSS for Panel Display

A solution inspired by Trevor Davis' Nested Responsive Grid project on GitHub is to simply adding some custom CSS to the grid classes used within our Panel display.

.panel-display .col-lg-10 { width: 100%; }
.panel-display .col-lg-9 { width: 90%; }
.panel-display .col-lg-8 { width: 80%; }
.panel-display .col-lg-7 { width: 70%; }
.panel-display .col-lg-6 { width: 60%; }
.panel-display .col-lg-5 { width: 50%; }
.panel-display .col-lg-4 { width: 40%; }
.panel-display .col-lg-3 { width: 30%; }
.panel-display .col-lg-2 { width: 20%; }
.panel-display .col-lg-1 { width: 10%; }

We can then continue to use the Bootstrap grid classes regardless of whether they are contained inside of outside of a Panel layout.

comments powered by Disqus