Richard Rodgers Richard Rodgers - 1 month ago 5
CSS Question

Customize Bootstrap to 960px wide

I want to use Bootstrap to create my newly designed template which is 960px in width. However, I don't know how to customize Bootstrap to resize their container size which is way too large my project.

I have an idea but I'm not sure if it's the right way of doing it. Can I just a new "custom.css" document and edit the .container class to 960px?

Thanks in advance,
Richard.

Answer

In bootstrap, by default: The container class has the following max-width specified in media query.

@media (min-width: 768px){
  .container{
    max-width:750px;
  }  
}

@media (min-width: 992px){
  .container{
    max-width:970px;
  }
}

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

To override this add the following rules to your stylesheet custom.css (Make sure that your stylesheet custom.css is loading after bootstrap stylesheet bootstrap.min.css):

@media (min-width: 992px){
  .container{
    max-width:960px;
  }
}

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

You can change the other media query rules too if you want to.

Here is the list of default grid options by bootstrap.

http://getbootstrap.com/css/#grid-options