Bootstrap: How to collapse navbar earlier

I want to collapse my navbar in earlier resolution than 768px, for example 992px, how would I do that? thanks! (I know I can customize it on the bootstrap page, but I don't want to start my project over again with new bootstrap.css file)

If you don't want to manipulate Bootstrap by using Less/Sass (maybe because you want to load it via a CDN), this is what did the trick for me:

@media (min-width: 768px) and (max-width: 991px) {
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-collapse.collapse.in {
        display: block !important;
    }
    .navbar-header .collapse, .navbar-toggle {
        display:block !important;
    }
    .navbar-header {
        float:none;
    }
}

Demo: https://jsfiddle.net/0pmy8usr/

Add this in a separate CSS file and include it after bootstrap.css

UPDATE for Bootstrap 4:

@media(max-width:900px) {
  .navbar .navbar-brand {float:none;display: inline-block;}
  .navbar .navbar-nav>.nav-item { float: none; margin-left: .1rem;}
  .navbar .navbar-nav {float:none !important;}
  .nav-item{width:100%;text-align:left;} 
  .navbar-toggler {display: block !important;}
  .navbar-toggleable-sm.collapse {display:none !important}
  .navbar-toggleable-sm.collapse.in {display:block !important}
}

Demo: https://jsfiddle.net/mkvhbgnp/3/

In variables.less, change

@grid-float-breakpoint:   @screen-sm-min

to

@grid-float-breakpoint: @screen-md-min;  

If you need to collapse your navbar in earlier resolution than 768px so you will need to use @media min-width and max-width, and you don't need to start new project for doing that simply create new .css file ( example: custom.css) and inset it under your main bootstrap.css to override its values. and write this code inside it :

CODE:

@media (min-width: 992px) {
   .collapse {
       display: none !important;
   }
}

Also, you can have a look at this post: change bootstrap navbar collapse.

I hope this will give you the solution.