Bootstrap Theme: How to use custom width for a container?

Permalink
The maximum width used in Bootstrap theme by Hostco for container class is 1170px. I want to increase this to a higher value. Is there a right way to do this? I think I will then have to make changes to whole lot of other settings. Is this even possible?

BlueFractals
 
enlil replied on at Permalink Reply
enlil
Looks like you would need to find this in each of the bootstrap/css/FOLDERNAME/bootstrap.css files:

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

and modify it to your liking if you want the changes across the board. Be sure to copy all the .css files to their appropriate override folders before editing them so that updating the theme doesn't undo your changes.
BlueFractals replied on at Permalink Reply
BlueFractals
Yes that seems to work. I only have a single instance of that code throughout all the CSS files. I thought I'd need to make changes to other CSS as well.

Without changing that code, I just added a new breakpoint such as
@media (min-width: 1500px) {
  .container {
    width: 1280px;
  }
}


There is something else I wanted to know. Bootstrap uses breakpoints such as 768px, 992px, 1200px and the container widths used with these breakpoints are 750px, 970px and 1170px respectively. Is there a reason behind those specific numbers? Is there some sort of calculation to get those numbers? I decided to use a new breakpoint of 1500px so that it nicely fits in 1600px or wider resolution.