28

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

lukasgeiter
  • 147,337
  • 26
  • 332
  • 270
Harunojikan
  • 547
  • 2
  • 6
  • 15
  • 1
    Recompiling the Less source is The Right Way and much easier. – cvrebert Nov 23 '14 at 18:57
  • I am currently using ... so when you mean recompile, do you mean customising a new package from bootstrap(http://getbootstrap.com/customize/) and refer to a path in my drive? – Harunojikan Nov 23 '14 at 19:04

3 Answers3

21

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).

enter image description here

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

enter image description here

Christina
  • 34,296
  • 17
  • 83
  • 119
  • 4
    To avoid confusion, I'd make note that Grunt in itself is not a compiler, but a task runner that you can load compilation tasks into! – dudewad Feb 03 '15 at 03:07
21

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).

Community
  • 1
  • 1
FredyWenger
  • 2,236
  • 2
  • 32
  • 36
  • Worked for me in 2020 within an old ASP.NET Webforms project. I placed it directly in the .aspx file. Ugly but it did the job. I appreciate you taking the time to post the answer. – IdusOrtus Mar 09 '20 at 18:41
4

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.

DanSully
  • 41
  • 2