Creating a Custom Breakpoint in Bootstrap-Sass

Bootstrap is our go to base theme, but what happens when the grid the client asks for has different width, or more break points? Using Bootstrap-Sass creating a custom grid is possible in a manner that can be copied and adjusted from one project to another. As example for this post, and for your future reference you may follow the live demo and repository that changes Bootstrap to work with five breakpoints (tip: use Resizer for easy viewport resize). Note that example is using Jekyll for simplicity, however the same technique can be used on Drupal.

1. Set the custom breakpoint. In this example arbitrarily called is (Intermediate small - because it’s between the extra small xs and small sm breakpoints), which means we can set the cols writing col-is-4.
2. Create a custom _grids.scss file next to your main styles.scss and include it. Be sure to include it after the bootstrap.scss file.
3. Next we need to declare our new breakpoint, which means that if the breakpoint is between two existing breakpoints, we have to set a maximum width to the smaller breakpoint and set a minimum width for the bigger breakpoint. We had to set the maximum width in the our main css file, before calling the bootstrap (Otherwise the hidden class function won’t work), So we only have to set the minimum width of the bigger grid.
4. As we need a fixed container rather than a fluid one, we set the container to the width determined in step 1, otherwise it will have a fluid container.
5. Next we call the make-grid() Sass function.
6. An optional step, yet recommended, is to add visible and hidden classes to the custom breakpoint. In our example adding a visible-is or hidden-is will have the desired effect when the new breakpoint will be used.