Bootstrap: v3.3.7 Need help to understand full width background colour issues

Question

Firstly hello.

I have no problem using Bootstrap with full width header background colours on larger devices, container-fluid sorts that out for me however what i am trying to achieve is that on resize down to smaller screen sizes (ie <768) that the full-width background is no longer full width and will have a left and right margin/gutter at the viewport edges.

For example:

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

Gives a full width header across all screen sizes.

however:

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

Gives a centered header with a margin either side on larger viewports (which is what i want for small screens only) but when i resize viewport down the header becomes full width of the viewport.

What is the correct way to go about this?.. could i put a container inside another container and by using css and a media query change the background colour of the main container (ie: white) so that my inner-container (background-color black) would then be left and right margined/gutter. Maybe this is over engineering this issue or not even be semantic and someone can give me more insight,

Many Thanks

Answer 1

wrap one div your container like

<div class="header">
<div class="container-fluid">
  <div class="row">
     <div class="col-md-12 col-xs-12">
     </div>
  </div>
</div>
</div>

then apply style on header class