0

I'm using bootstrap 3.2 and the default breakpoints. I would like the navbar to collapse into mobile mode at md (< 992px) instead of sm (< 767px) without changing the default breakpoints. How do I do that best?

WIRN
  • 915
  • 1
  • 16
  • 31

1 Answers1

4

You have 3 options:

  1. Edit the files manually - a horribly laborious task and not recommended.
  2. Visit http://getbootstrap.com/customize/, specify your own breakpoints there and download the customised version.
  3. Use a CSS preprocessor and customise it at your end. Bootstrap provide versions for both Less and Sass.

Note that for option 2 and 3, you are looking to change the @grid-float-breakpoint variable. In your example, you want to change the value from @screen-sm-min to @screen-md-min

DavidG
  • 113,891
  • 12
  • 217
  • 223
  • Well if you noticed on the link I provided in option 2, you can change that by modifying the `@grid-float-breakpoint` variable. So the same applies to option 3. – DavidG Oct 30 '14 at 09:33
  • I've added some clarification in my answer. – DavidG Oct 30 '14 at 09:37
  • But then I will be changing the default bootstrap files and behavior. Since its an existing project I cannot do that – WIRN Oct 30 '14 at 09:47
  • Then you are stuck with option 1 (or at least trying to figure out what extra CSS to add in your own file to overcome that) – DavidG Oct 30 '14 at 09:48
  • I don't want to sound too negative, but that's a *lot* of work to do. Not sure why you can't do it in your existing project though? – DavidG Oct 30 '14 at 09:51
  • Ok, thats sad. I was hoping that I could add some class to the html or something to controll that... – WIRN Oct 30 '14 at 09:52
  • The problem is that there will be lots of changes you need to do such as hiding some parts, showing others, changing margins etc. Lots of small parts that are difficult to figure out manually. – DavidG Oct 30 '14 at 09:55