Where to edit bootstrap @grid-float-breakpoint

Question

I know that you can change @grid-float-breakpoint in the "variables.less" file which compiles into the bootstrap package we all download and use (I think).

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff

My question is can you change the @grid-float-breakpoint without customising a new bootstrap package, but instead change it through CSS with @media or some other method. If possible please advice the method of where and how to do this. Thanks

Answer 1

There are 2 recommended main and different ways to change the @grid-float-breakpoint (this is a variable in LESS).

1. You can download the master (https://github.com/twbs/bootstrap/archive/master.zip), open the bootstrap.com/variables.less file and then compile that with a LESS compiler. This involves installing a LESS compiler on your computer, such as Grunt (multi-platform) or CodeKit (Mac).

2. OR Go to getbootstrap.com/customize and change the variable there and download a compiled CSS file.

Answer 2

Here is a link to a css-only solution to change the grid-float-breakpoint: CSS-Solution

@media (max-width: 991px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

Just change 991px by 1199px for md sizes

Of cause the comment to my posting, I have copy-pasted the css-solution behind my link above. I have overtaken the solution in my app (MVC6 RC) to set another float-breakpoint (only by apply the .css-style).
Note: im MVC6, you have to add another @ before media (@@media).

Answer 3

If you are using the SASS version, you'll find that variable in bootstrap/_variables.scss around line 286 and onward.

The further you go down that file, the more math and options you'll see.

I post that because people might come here looking for the SASS answer.

It really is better to recompile your file, but if you are making exceptions to rules, it might be better to make a new ID or CLASS to refer to whatever you are doing.