Removing the large screen site option from Bootstrap 3

Last year I endorsed the idea of a full-width blog. No sidebars, no distractions, content in plain focus. While the design is very clean, one flaw with the default settings of the Bootstrap 3 grid is the large screen mode that is enabled for devices with widths larger than 1200px. It took me a bit of digging around how to properly disable the large screen mode, leaving only xs (extra small), sm (small) and md (medium) @media-query breakpoints. The solution is simple:

In app.less (do not modify Bootstrap LESS files for easier upgrades), first change the medium screen width breakpoint if you're not satisfied with the default. This will become your maximum container width.

@screen-md: 960px;

Then, override the default media query with the medium screen as the maximum width:

@media (min-width: @screen-md) {
   .container {
      width:@screen-md;
   }
}