bootstrap 3 container size

Question

I'm new to working with Bootstrap 3 . I made a container 12 columns with width: 960px;. Then I noticed the container size changed to width: 1110px. Can anyone tell me what the issue is? I just want a fixed container with width of 960px;

Please check it here

I found the css :

.col-lg-12 {
    margin-left: 0;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

possible duplicate of [Bootstrap: how do I change the width of the container?](http://stackoverflow.com/questions/15884102/bootstrap-how-do-i-change-the-width-of-the-container) — Hashem Qolami, Feb 26 '14 at 20:40
Read about it [here](http://getbootstrap.com/getting-started/#disable-responsive). Look at the example [here](http://getbootstrap.com/examples/non-responsive/). Get all your css [here](http://getbootstrap.com/examples/non-responsive/non-responsive.css) — slynagh, Feb 26 '14 at 23:16
@Mohamed Samy Are you on any of these **Sass** or **LESS** ? — Mo., Feb 27 '14 at 11:15

score 1 · Answer 1 · answered Mar 03 '14 at 10:45

1

modify this CSS properties from bootstrap.css

.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 6px;
  padding-right: 6px; }
  .container:before, .container:after {
    content: " ";
    display: table; }
  .container:after {
    clear: both; }
  @media (min-width: 768px) {
    .container {
      width: 732px; } }
  @media (min-width: 992px) {
    .container {
      width: 952px; } }
  @media (min-width: 1200px) {
    .container {
      width: 1152px; } }

Remove

  @media (min-width: 1200px) {
    .container {
      width: 1152px; }

Update

  @media (min-width: 990px) {
    .container {
      width: 950px; } }

Please comment below if anything wrong while apply this code

answered Mar 03 '14 at 10:45

Mo.

21,971
31
138
201

Above code to look for does not exist in bootstrap 3.1 – HenryW May 31 '14 at 13:37
`.container { margin-right: auto; margin-left: auto; padding-left: 6px; padding-right: 6px; } .container:before, .container:after { content: " "; display: table; } .container:after { clear: both; } @media (min-width: 768px) { .container { width: 732px; } } @media (min-width: 992px) { .container { width: 952px; } } @media (min-width: 1200px) { .container { width: 1152px; } }` – HenryW May 31 '14 at 15:39
also this is the correct answer: http://stackoverflow.com/questions/20057380/bootstrap-3-how-to-set-default-grid-to-960px-width – HenryW May 31 '14 at 15:41

score 0 · Answer 2 · answered Nov 09 '15 at 19:32

Worth noting: if you are using less or sass with Bootstrap, changing the size of the containers is as easy as changing one variable. In Bootstrap 3 (3.3.5 to be precise) their container settings in the variables.less file look like this:

//== Container sizes
//
//## Define the maximum width of `.container` for different screen sizes.

// Small screen / tablet
@container-tablet:             (720px + @grid-gutter-width);
//** For `@screen-sm-min` and up.
@container-sm:                 @container-tablet;

// Medium screen / desktop
@container-desktop:            (940px + @grid-gutter-width);
//** For `@screen-md-min` and up.
@container-md:                 @container-desktop;

// Large screen / wide desktop
@container-large-desktop:      (1140px + @grid-gutter-width);
//** For `@screen-lg-min` and up.
@container-lg:                 @container-large-desktop;

(see bootstrap's github repo)

So to adapt the size of .container for large screens, simply overwrite the variable @container-large-desktop by adding it to your own variables.less-file:

@container-large-desktop: ((930px + @grid-gutter-width));

(@grid-gutter-witdh is set to 30px on default, so the above will lead to having a 960px container)

bootstrap 3 container size

2 Answers2