How do I add 2 blocks side-by-side in Bootstrap theme's "Content" region?

Question

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.

Answer 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.

Answer 2

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.

Answer 3

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)