My custom bootstrap sub-theme has a main content region which is the place that all the main content is to go within a .container class.

The code for that section is as follows:

    {# Main #}
    {% block main %}
      <main role="main">
        <div class="container">
          <div class="row">

            {% if page.sidebar %}
              {% block sidebar %}
                <aside class="col-sm-3" role="complimentary">
                  {{ page.sidebar }}
              {% endblock %}
            {% endif %}

              set content_classes = [
                page.sidebar ? 'col-sm-9',
                page.sidebar is empty ? 'col-sm-12'
            <section{{ content_attributes.addClass(content_classes) }}>

              {% if page.announce %}
                {% block announce %}
                  <div class="announcements">{{ page.announce }}</div>
                {% endblock %}
              {% endif %}

              {% block content %}
                <a id="main-content"></a>
                {{ page.content }}
              {% endblock %}


    {% endblock %}

Now I want to create a couple view blocks on my homepage within this main content region but I'd like the backgrounds and content to extend outside the main container and be 100% of the screen width.

Is there a way for me to do this with my current code or is there another way to go about this?


Following your structure one way could be:

Wrap your views block structure as shown below:

        </section> #Section ends
        </div> #Row ends
        </div> #Container ends

        #Full width, out of container
        [View_block] #View block out of container
        #Full width ends

        <div class="container"> #Container opens
        <div class="row"> #Row opens
        <section{{ content_attributes.addClass(content_classes) }}> #section opens
        # Rest of the content is in container...

This will maintain the original structure and places your views blocks outside of the container and within the main content. Even if this block is turned off, the page will not break.

Please modify as per your final output.

|improve this answer|||||
  • I don't know why I didn't think of this but you're a genius. Such a simple solution that I clearly overlooked. Makes total sense. Can't wait to implement it. Many thanks. – ACanadianCoder Apr 8 '17 at 17:55
  • @ACanadianCoder welcome 😊 – echo Apr 9 '17 at 2:04

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.