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 mid

Solution 1:

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

Look for: "No calc() needed"

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;
}

Solution 2:

The div container has the following max-width specified in media query as default by bootstrap.

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

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

To override this add the below style in your stylesheet

// This should be added in default styles, not within media query .container{ margin:0; padding:0; }

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

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

Solution 3:

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.