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

Improve this question

1 Answer 1

Reset to default
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.

Improve this answer
4
  • 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, 2018 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, 2018 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, 2018 at 20:14
  • That worked, thank you. (once I corrected my typo) Many thanks.
    – BEGRAFX
    May 17, 2018 at 20:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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