Drupal Bootstrap - Regions Placement

Question

I'm making my first attempt at creating my own Sub-Theme of the Bootstrap theme. I've got the theme installed, the sub-theme created and working, I've added some new regions and populated them. The situation I'm encountering is, the regions just display one under the other, where I want (at least certain ones) to display side by side. I've added "float: left;" code, but that doesn't seem to make any difference. I'm guessing that I need to "float" the region, rather than the block inside of it. However, I'm not sure how to do that. I've searched Google, I've searched YouTube, I've searched Drupal.ORG, I've searched the Drupal Bootstrap site documentation, and I'm not finding anything. Someone on Drupal.ORG told me that such modifications could be made via CSS, however, I've searched the bootstrap-theme.min.css file, and I find no mention of any of the regions. I would appreciate some pointers on how to do this correctly.

I'm using Drupal 8.5.3 and Bootstrap theme version 8.x-3.11

Answer 1

With Bootstrap you can have two regions side by side wrapping them with a row and adding a col-size-number class to them, like this:

<div class="row">
  <div class="region region-name-left col-md-6">
    ...
  </div>
  <div class="region region-name-right col-md-6">
    ...
  </div>
</div>

You have to do that in the page.html.twig file.