Custom bigger Bootstrap container with overflow

A method to have a bigger container than the default Bootstrap container

The Code

Here's a solution to have a bigger container than the default Bootstrap container, without the horizontal page scrolling when the container is bigger than the page. You can use it as a bigger Bootstrap container, as in the first example; or containing the default Bootstrap container, as the second example.

The example markup:

<div class="container-outside">
  <!-- content large as .container-outside -->
  <div class="col-xs-12">
    <!-- you can also use columns -->
  </div>
</div>
<div class="container-outside">
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <!-- content large as .container -->
      </div>
    </div>
  </div>
</div>

The Css for the .container-outside, they use the Bootstrap media queries to set a max-width, edit it as desired:

/* .container-outside */
.container-outside {
  display: block;
  position: relative;
  margin: 0px auto;
  overflow: hidden;
}
@media (min-width: 768px) {
  .container-outside {
    min-width: 750px;
    max-width: 850px; /* desired width */
  }
}
@media (min-width: 992px) {
  .container-outside {
    min-width: 970px;
    max-width: 1170px; /* desired width */
  }
}
@media (min-width: 1200px) {
  .container-outside {
    min-width: 1170px;
    max-width: 1270px; /* desired width */
  }
}

And some Css for the visual styles, use your own:

/* visual styles */
body {
  background: #eaeef5;
  padding-top: 30px;
  padding-bottom: 30px;
}
.container-outside {
  background: #ffffff;
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
.col-xs-12 {
  padding-top: 15px;
  padding-bottom: 15px;
}