1

I have block views on the first page in the "Content" region of the Bootstrap theme that I would like to display as follows:

 _________________
|                 |
| another block   |
|_________________|
|        |        |
| block1 | block2 |
|________|________|

Is there a way to do this easily, without using float left/right for block1/block2 (as Bootstrap using a grid layout using rows and columns)?

Normal Bootstrap syntax would make block1 go in the first <div class='col-md-6'> element and block2 go in the second <div class='col-md-6'> so that the two blocks appear as equal-sized columns.

I see that regions are laid out in themes/contrib/bootstrap/templates/system/page.html.twig.

If there is not an easy way to achieve the desired layout, do I need to somehow create a twig template, similar to page.html.twig, in my Bootstrap subtheme that defines say 2 side-by-side regions under the existing "Content" region (i.e. "Sub-Content Left" and "Sub-Content Right" regions)? If so, how is this done and how to make the template apply to a specific page?

I looked into Bootstrap Layouts and Display Suite, but it wasn't clear how to integrate the two to accomplish the above.

Thank you very much in advance for your help.

1

You can extend the page twig like this.

Make a copy of page.html.twig in your theme template folder and put a twig block around the content:

page.html.twig

...
{% block content %}

  {{ page.content }}

{% endblock %}
...

Then create a new file, and name it so that it will target the specific page, for example the view "myview":

page--view--myview.html.twig

{% extends "page.html.twig" %}

{% block content %}

  {{ page.content }}

  <div class="..">
    {{ page.subleft }}
  </div>

  <div class="..">
    {{ page.subright }}
  </div>

{% endblock %}

This new file extends the page twig and contains only a new version of the the twig block "content". You can define multiple twig blocks in one file and replace them.

  • Thank you very much for your answer 4k4! I also needed to update MYTHEME.info.yml and add the following regions: subleft: 'Sub-Left' subright: 'Sub-Right' This allowed me to place the blocks into the subleft and subright regions on the page using the Admin > Structure > Block Layout page. Thanks again! – kvjava1 Aug 10 '16 at 1:56
1

There is block attributes module for drupal 8, we can attributes to the blocks in drupal with that module.

  1. Just install and enable the block attributes module,
  2. then you can give a class value for the blocks from block configuration page, you are using bootstrap so just add "col-md-6" or any one of bootstrap's grid class in the attributes field in your block configuration.

I hope, it would solve your problem without any custom changes with codes.

0

You can accomplish this using a grid framework like Bootstrap or Foundation, as well as

www.drupal.org/project/blockgroup
www.drupal.org/project/block_class

The first module allows you to create block groups, then place the block group in your block layout.

The second module allows you to put your classes on the block in block layout.

Create a new block group: my-group

In block layout, look for the region: block group: my-group

Place 3 blocks
Block a - col-md-12
Block b - col-md-6
Block c - col-md-6

Place the block 'block group: my-group' in the region you want it to display (content, etc)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.