How to set container width to 980px in bootstrap 3

Question

In bootstrap 3.0 I can wrap .container class with my class and set the width to my class to 980px

EX

             <div class="maincontainer">
                   <div class="container">
                       //some content
                   </div>
             </div>

CSS

         .maincontainer {
             max-width: 980px;
             margin:0 auto;
         }

That code will wrap my contents with 980px, but in bootstrap 3.0.2 the author has change class .container to width not max-width in bootstrap 3.0.

So it is hard to set 980px for my layout!! I'm using LESS css!

Any ideas?

Answer 1

A few of choices

In bootstrap, if one is using responsive design on the grid, then width is set by a variable (currently in 3.0.2 on line 43 of grid.less and following, depending on size).

Choice #1

Change the @container-XX variable(s) controlling the width in the variables.less file to achieve the 980px (for whatever size(s) you want it) which will then make the .container control the width and be what you want. I recommend this only if you actually still want some form of responsive site.

Choice #2

If you want to control the width still by your .maincontainer class, then in the same variable file noted in #1, change all the @container-XX (for sm, md, lg) to be auto which will make elements fit to the wrapping container .maincontainer.

Choice #3

If you do not want a responsive site at all, but a statically set 980px then follow the directions in this SO answer.

My guess is you actually want #3, but I thought I would mention the other ideas as well.