Set the page width to max 970px within Bootstrap 3

Question

I am using Bootstrap 3 to build a website that displays nicely on mobile devices and desktops. The customer tells me that the max width of a page can only be 970px.

How can I do this with Bootstrap 3 to make sure that:

1. The page still centered in a browser screen?

2. All the great things in Bootstrap 3 are still there.

Answer 1

Do you want it responsive? Try this:

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

This will set container width to 970px for screens wider than 1200px.

Answer 2

Bootstrap actually have a less feature on their website. Here you can pick and choose what components of bootstrap you want to use. All of bootstrap is made to be responsive so you can change the size to be whatever you want and everything will inherit from that.

So if you want to define .container as max-width: 970px that might serve your purposes. Or maybe just change the media query breakpoints.

Edit: Just took a look and you can define the size of your grid system for each screen size in the customize section. @container-sm, @container-md, @container-lg

Second Edit: I forgot about this resource I had bookmarked from a while back. You will probably find it useful