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