如何在 Twitter Bootstrap 中扩展容器的宽度

Question

I'm using the .container class in my navbar, body, and footer.

So all three align well on the left. However, I would like to increase the width of the container class.

By default the width is coming at 1170:

media="screen, projection"
bundle-bundle_bootstrap_head.css:6139@media (min-width: 1200px)
.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 1170px;
}

However, I would like to extend the width to 1300. So I added the following in my main.css

.container {
    width: 1200px;
}

But this doesn't seem to work. When I reload the page and inspect the CSS, the 1200 is crossed out and 1170 is still active.

Question

How can I extend the default width of the container class in bootstrap?

Answer 1

It is probably because you are loading or main.css ( bootstrap.css ), and making your changes there. Then you are probably calling bootstrap-responsive.css after that and it is overwriting your changes.

The 1170px .container width comes from the bootstrap-responsive.css file. It is the width assigned by default to Large Display screens (1200px and wider). That is why I am assuming you are calling bootstrap-responsive.css after your main.css file.

Using !important is an anti-pattern (a bad practice) in this regard. Especially on something as generic as your .container . This will lead to specificity issues in the future. I encourage you to actually fix and understand the problem, instead of "hacking it".

Answer 2

Try this

!important can be used in cascading style sheets to give priority to parameters

.container {
   width: 1200px !important;
 }

Check this for more information.

For this case !important can be used as work around, but using this property is considered as a bad practise and is not recommended by CSS experts.

Answer 3

I know this is an old thread, however I was recently searching on how to expand the container width on the newest version of bootstrap (3.0) and thought this may help others.

Asides from setting a width for the container you must also set a max-width property to your css.

container 
{
  width:1200px;
  max-width:1200px;
}

As others have noted above, make sure to load your custom css after the bootstrap.css file so the settings are re declared.

Answer 4

In case, you're using bootstrap scss.

file: _variables.scss

add breakpoint (here xxl: 1440px) for your bigger container width.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1440px
) !default;

create bigger container by just adding xxl: 1200px

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1200px
) !default;

Bootstrap mixins will create extra breakpoint media query for 1200px wide container.

For more on changing bootstrap variable please go to Theming Bootstrap