Search code examples
csshtmltwitter-bootstrap-3width

override bootstrap container width

I have an easy HTML template using bootstrap 3. Template has following structure: static header, static footer and content which is in the bootstrap's class "Container". In the middle of content I have bootstrap'w "Well" and i want it make looks like header and footer. I mean I want it to be the full width of the screen on any screen.

I created easy fiddle.

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

<header>
   <div class="container">
      <div class="content">

      </div>
      <div class="well">

      </div>
      <div class="content">

      </div>
   </div>
<footer>

enter image description here

Solution

  • ORIGINAL + BEST PRACTICE: always move the .well outside of .container to stay idiomatic with Bootstrap.

    UPDATE + IF ABOVE IS NOT AN OPTION: Given that you cannot easily modify .container styles and/or move the .well outside of .container, your best bet is JavaScript. Here I have made a script that makes .well expand as the width of the window changes.

    Here is a jsFiddle

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