CODEWITHSUNDEEP
csshtmltwitter-bootstrap-3width
user3127896
user3127896

Reputation: 6563

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

Upvotes: 20

Views: 44213

Answers (3)

iamnotsam
iamnotsam

Reputation: 10380

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.

Upvotes: 10

Gonzalo
Gonzalo

Reputation: 417

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

Upvotes: 22

James
James

Reputation: 4580

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

Upvotes: 15

Related Questions