2

A disclaimer first: I am a professional medievalist, not a programmer or a front-ender. I have some front-end knowledge, but not a lot. So, please, be easy on me.

Now, I am customizing a Bootstrap 4 sub-theme and there is a particular layout that I need to achieve that I, for the life of me, cannot get to work. Thus, I turn to you, good and kind people of stack exchange, for aid, counsel and favor.

I am attaching the pictures and the code. The first picture is the original Bootstrap 4 region layout. The picture 2 is the region layout that I need.

Vanilla Bootstrap 4

The second picture is what I need it to be. Basically, the body of the page should be container-fluid, but the content inside the body should be just container. In that way, the sidebar first and sidebar second would be all the way on the margins. I have read a lot of contradictory advice on nesting a container inside the container-fluid, but whatever I try, it simply does not produce the desired effect.

What I need

This is the content of the template file.

    <main role="main">
  <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}

  {% 
  set sidebar_first_classes = (page.sidebar_first and page.sidebar_second) ? 'col-12 col-sm-6 col-lg-3' : 'col-12 col-lg-3'
  %}
  
  {% 
  set sidebar_second_classes = (page.sidebar_first and page.sidebar_second) ? 'col-12 col-sm-6 col-lg-3' : 'col-12 col-lg-3'
  %}
  
  {% 
  set content_classes = (page.sidebar_first and page.sidebar_second) ? 'col-12 col-lg-6' : ((page.sidebar_first or page.sidebar_second) ? 'col-12 col-lg-9' : 'col-12' )
   %}


  <div class="{{ b4_top_container }}">
    {% if page.breadcrumb %}
      {{ page.breadcrumb }}
    {% endif %}
    <div class="row no-gutters">
      {% if page.sidebar_first %}
        <div class="order-2 order-lg-1 {{ sidebar_first_classes }}">
          {{ page.sidebar_first }}
        </div>
      {% endif %}
      <div class="order-1 order-lg-2 {{ content_classes }}">
        {{ page.content }}
      </div>
      {% if page.sidebar_second %}
        <div class="order-3 {{ sidebar_second_classes }}">
          {{ page.sidebar_second }}
        </div>
      {% endif %}
    </div>
  </div>

</main>

Also, I have no clue what the b4_top_container does; I couldn't find the explanation anywhere.

Any help would be massively appreciated.

0

Your Answer

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

Browse other questions tagged or ask your own question.