How to modify breakpoints in Bootstrap 3 without modifying core files?

Question

I'm not a fan of Bootstrap's default breakpoint of 1200px for `screen-lg`. Is there some way I can make it so the `lg` breakpoint happens at 1800px or something along those lines? I don't want to modify the original Bootstrap css code since I'm using bower, and any time I run `bower update`, I'd lose my changes. I get that I should be able to override Bootstrap's defaults, though using grunt, bower, and Sass, I'm not sure how to go about doing that. This is the `` block: ``` Test

Accepted Answer

Turns out this was much easier than I thought. I swear I tried this before but it didn't work, but maybe I did something wrong before.

In the main SCSS file, right at the top, change this:

```
$icon-font-path: "../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/";
// bower:scss
@import "bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
// endbower
```

To this:

```
$screen-lg-min: 1800px; /* $screen-lg is deprecated */

$icon-font-path: "../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/";
// bower:scss
@import "bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
// endbower

@media screen and (min-width: 1800px) {
  .container {
    width: $new-breakpoint-container-width; /* to be defined above, of course */
  }
}
```

But, bounty points go to Bass Jobsen for the most detailed answer, and also for the correct way of setting the container width using the `grid-gutter-width`.

How to modify breakpoints in Bootstrap 3 without modifying core files?

Solution

Problem

Related problems