Create a Custom Drupal 8 Bootstrap Layout.

Drupal 8 has Layout Discovery in the core, which makes it easy to provides layouts for nodes and pages via the UI. I love Bootstrap for it’s clean looks and it’s built-in responsive grid, which saves time of coding the responsive layouts each time. There is also a module called Bootstrap Layouts, which provides a set of highly customizable layouts dependant on any Bootstrap based theme and it’s layout grid. How can you add a custom layout, though? If you want an example, you can see my alayouts module on github. These are the 4 easy steps:

1. Create a custom module.

Creating a custom module is easy in Drupal 8. You need to create a folder, create an *.info.yml file in that folder, and a *.module file. Here is the Drupal documentation on creating custom modules.

If you are using Drupal Console, which I heartily recommend, you can use it’s generate:module command to create a new module.

2. Add the layouts declaration file.

The layouts declaration file is the *.layouts.yml file. It contains a description of your layouts and some initial settings, like layout classes. You can see which keys/values can be used in declarations, if you open the bootstrap_layouts.layouts.yml file from the bootstrap_layouts module.

Here is a sample layout declaration with explanation:

  label: 'A simple layout with one column'
  category: 'My Layouts'
  type: partial
  icon: images/my_layout_name.png
  template: templates/my-layout-name
  class: '\Drupal\bootstrap_layouts\Plugin\Layout\BootstrapLayoutsBase'
      label: Main
        - col-sm-12

In the above layout declaration file, we define a layout that will be grouped under “My Layouts” section. We specify that the layout will be “partial” - i.e. will be used inside page regions. Then, we specify the icon image file. The following three keys are very important:

Template - a declaration of a template file, omitting the html.twig part.

Class - must be pointing to the BootstrapLayoutsBase class from the Bootstrap layouts module. Don’t change this reference unless you want to subclass their class or write your own.

Regions - a declaration of regions and names that the layout will provide.

The classes references the default classes provided for a given layout container. They can be changed through the UI when the layout is being selected and assigned.

3. Add the layout template file.

The template file is the actual layout. Drupal 8 uses the twig templating engine for the layout.

A sample layout template:

<{{ wrapper }}{{ attributes }}>
{{ title_suffix.contextual_links }}

  {% if main.content %}
    <div class="row">
      {% if main.content %}
        <{{ main.wrapper }}{{ main.attributes }}>
        {{ main.content }}
        </{{ main.wrapper }}>
      {% endif %}
  {% endif %}

</{{ wrapper }}>

All those wrappers and attributes are where the Bootstrap Layout will output the layout classes.

4. Add a thumbnail for your layout.

The thumbnail image is referenced from your *.layouts.yml file. Create an image with the dimensions of at least 75x112 pixels, name and place it as specified by the “icon” declaration in the layouts file.


So, as you see, there is nothing hard to it. A few lines of code, and you have your custom template!

Read more about creating custom layouts in Drupal Documentation.