0

I am used to doing this trick in Bootstrap 3 to temporarily break out of a grid and show a row at full browser width (useful for rows that need full-width colour backgrounds):

<div class="container" style="background-color:red">
    <div class="row">
        <div class="col-xs-12">

            <div class="container">
                <div class="row">
                    <div class="col-xs-12">

                        Content is displayed within the normal grid here 
                        but within a full-width red background.

                    </div>
                </div>
             </div>

         </div>
     </div>
 </div>

Is there a way of doing this in Bourbon/Neat?

The way I am currently handling it is by setting up indiividual styles on my core elements, instead of on a container div:

header,
main,
footer {
    @include outer-container;
}

and on the container that I want to be full width:

nav {
    @include outer-container(100%);
}

but I'm wondering if there is a simple "break-out" way of doing this on inner nested elements.

Natacha Beaugeais
  • 1,003
  • 1
  • 11
  • 24
  • I was struggling with this the other day. My solution (not perfect) was to increase the outer-container's max width. `@include outer-container(2160px);`. Food for thought. – alecdwm May 11 '16 at 09:02

1 Answers1

0

This is what I did for my footer:

HTML

  <footer>
      <div class="wrapper">

       </div>
 <footer>

CSS

footer{
  background: $lightest-grey;
}

.wrapper{
  @include outer-container;
}

The outer-container (.footer-wrapper) will center itself to 100% of your maximum width. Maybe this helps you. You could use .wrapper anywhere you like. eg header, hero, your main container. Hope this helps

Samuel
  • 5,529
  • 5
  • 25
  • 39