0

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

0

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.

  • OK, I'm just new with twig files, so let me make sure I'm understanding you correctly. Currently, my page.html.twig file looks like this, in reference to the regions in question: [code] {# Footer 1 #} {% if page.footer_1 %} {% block footer_1 %} {{ page.footer_1 }} {% endblock %} {% endif %} {# Footer 2 #} {% if page.footer_2 %} {% block footer_2 %} {{ page.footer_2 }} {% endblock %} {% endif %} {# Footer 3 #} {% if page.footer_3 %} {% block footer_3 %} {{ page.footer_3 }} {% endblock %} {% endif %} [/code] <continued below> – BEGRAFX May 17 '18 at 19:14
  • So would I use your code (modified for the three regions) instead of what I have, or would I just wrap the <div class="row">...,</div> around what I have? – BEGRAFX May 17 '18 at 19:14
  • [code] <div class="row"> <div class="col-md-4"> {# Footer 1 #} {% if page.footer_1 %} {% block footer_1 %} {{ page.footer_1 }} {% endblock %} {% endif %} </div> <div class="col-md-4"> {# Footer 2 #} {% if page.footer_2 %} {% block footer_2 %} {{ page.footer_2 }} {% endblock %} {% endif %} </div> <div class="col-md-4"> {# Footer 3 #} {% if page.footer_3 %} {% block footer_3 %} {{ page.footer_3 }} {% endblock %} {% endif %} </div> </div> [/code] – Efraín Herrera May 17 '18 at 20:14
  • That worked, thank you. (once I corrected my typo) Many thanks. – BEGRAFX May 17 '18 at 20:58

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.