Responsive menu breakpoints I want to change the breakpoint of the Bootstrap Responsive Menu, from 768px to 900px. There is a simple way to do this by modifying @grid-breakpoint in variables.less; I have installed the less module, but yet changes there are not having any effect.

The code for the media query is being called in bootstrap.min.css via CDN. Can someone help? How do you recompile the CSS after making changes to the .less file? 

On Bootstrap's site you can configure what you want and download; in Drupal this isn't the case, nor is there any config in the admin UI, to make these simple changes.
You can override the set media queries in your custom css or less files. For the menu, you need to change at least two classes like so:

To hide the menu in a wider breakpoint (> 768)

@media (max-width: 900px){
  .navbar-toggle {
    display: none;
  }
  .navbar-collapse.collapse {
    display: block;
  }
}


To hide the menu in a smaller breakpoint (&lt; 768) you have to override everything from your breakpoint up to 768:

@media (min-width: 480px) and (max-width: 768px){
  .navbar-toggle {
    display: none;
  }
  .navbar-collapse.collapse {
    display: block;
  }
}