How to redefine / override the default breakpoints in a Bootstrap sub-theme

Question

I have a Drupal 7 subtheme based on the Drupal Bootstrap theme CDN starterkit. I'm trying to change the default breakpoints, which I thought would be a simple, routine task, but I can't find anything that works.

I've read this issue which shows that the theme supports the Breakpoints module. I've installed the Breakpoints module, followed the steps given, got confirmation in Drush and the Breakpoints module UI that my new breakpoints have been read from my .info file - but the columns in my Bootstrap subtheme ignore these and carry on using the built-in ones. I've cleared all browser and Drupal caches.

I can only assume that the "Breakpoints module support" means that it allows other modules (like Navbar etc) to listen to the custom breakpoints, whereas Bootstrap itself continues getting Bootstrap CSS files according to its built-in defaults.

I've also been through the Drupal Bootstrap documentation and can't find anything about breakpoints at all. I only confirmed what the default Bootstrap breakpoints were through a comment in the above linked issue.

All I can think of is, to compile a version of the Bootstrap CSS with the breakpoints I want, upload it and use it instead of CDN as per "Using own Bootstrap 3 files in Bootstrap Drupal 7 theme". I'm wary of this however because it seems like the theme PHP would expect different breakpoints to those defined in the theme CSS which sounds like a recipe for strange bugs further down the line. I'd prefer to override some setting or, failing that, function in the theme so that it gets the configuration I want from the CDN and isn't expecting a different configuation.

_{[UPDATE] I've tried this and it does seem to work, although at first I thought it hadn't because I'd misread how the Bootstrap compiler used minimum and maximum values. It feels like a very "against the grain" bodge though, and I won't be surprised if it causes problems later, which is why I'm not posting it as an answer.}

---

How can I customise the pixel values for the xs, sm, md and lg Bootstrap breakpoints in a Drupal 7 Breakpoints based subtheme in a clean way that is consistent between front end and back end?

Answer 1

There doesn't currently seem to be anything in the Bootstrap theme that supports this directly, and the theme doesn't appear to listen to anything in the Breakpoints module. The bootstrap breakpoints are hard-baked into the JS and CSS.

If you're not using LESS, this means the only realistic option is to override the CSS and JS with custom local files. I had a bit of trouble with this at first but it seems to be fine and doesn't seem to conflict with anything in the server-side theme code.

1. Create a customised version of Bootstrap with your breakpoints and other preferences, from http://getbootstrap.com/customize/
2. Install the module Bootstrap Library
3. Upload the custom bootstrap files to sites/all/libraries/bootstrap
4. Disable everything to do with CDN in your theme settings page