Override bootstrap container width

Question

I have a simple HTML template using bootstrap 3. The template has the following structure: a static header, a static footer, and content that resides in the Container download class. In the middle of the content, I have bootstrap'w “Well,” and I want it to look like a header and footer. I mean, I want it to be the full width of the screen on any screen.

I created an easy fiddle.

Here's the question, is there a way to override the width of the container inside this container?

<header> <div class="container"> <div class="content"> </div> <div class="well"> </div> <div class="content"> </div> </div> <footer> 

Answer 1

ORIGINAL + BEST PRACTICE: always move .container beyond .container to remain idiomatic with Bootstrap.

UPDATE + IF ABOVE IS NOT AN OPTION: Given that you cannot easily change .container and / or move .container styles outside of .container , the best option would be JavaScript. Here I created a script that extends .well when changing the width of the window.

Here is jsFiddle

The idea is that you want a negative value for margin-left and margin-right so that .well expands across the screen.

Answer 2

The div container has the following max-width specified in the media request as default at boot time.

 @media (min-width: 768px){ .container{ max-width:750px; } } @media (min-width: 992px){ .container{ max-width:970px; } } 

To override this, add the style below to the stylesheet

// This should be added in the default styles, and not in the media request. Container {Margin: 0; upholstery: 0; }

 @media (min-width: 768px){ .container{ max-width:100%; } } @media (min-width: 992px){ .container{ max-width:100%; } } 

Answer 3

Here's a simpler trick that works like a charm: https://css-tricks.com/full-width-containers-limited-width-parents/

Look for: "No calc () required"

HTML

 <header> <div class="container"> <div class="content"></div> <div class="well full-width"></div> <div class="content"></div> </div> <footer> 

CSS

 .full-width { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }