Increase bootstrap mesh width beyond 1170px

Question

Is there a way to increase Bootstrap 3's grid width to 1170? My users often use devices that support 1920 x 1080 resolution. I want to maintain responsiveness (in case the window is not maximized), but whenever the window is> 1600 pixels wide, I want the grid to be as wide as 1600 pixels.

Is there a way to add another step to the grid for windows wider than 1600 pixels? Preferably without using LESS, just adding some custom CSS to override the original Bootstrap rules?

Answer 1

Let me answer the question myself. I needed to change the search keywords to find the answer. This was mentioned in this issue in the Bootstrap GitHub file (last comment). This is a CSS file called BootstrapXL that basically adds a new “x-large” grid level to Bootstrap 3 for devices larger than 1600 pixels wide (that is, Full HD monitors with a maximum window).