CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Anthony
Anthony

Reputation: 36008

How to extend width of the container in Twitter Bootstrap

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?

Upvotes: 0

Views: 8143

Answers (4)

Bhadresh Arya
Bhadresh Arya

Reputation: 811

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

Upvotes: 0

Michael Ramirez
Michael Ramirez

Reputation: 247

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.

Upvotes: 0

ssilas777
ssilas777

Reputation: 9764

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.

Upvotes: 0

Mike McLin
Mike McLin

Reputation: 3637

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".

Upvotes: 1

Related Questions