change bootstrap navbar collapse breakpoint

Question

My bootstrap navbar currently collapses at 786px I want it to collapse at 876px. I've tried adding this to my css file but it doesn't seem to be working since nothing changes.

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

Anyone knows what I am doing wrong?

Many thanks in advance!

Answer 1

1. In the Grid system set the field @grid-float-breakpoint value of 876.

2. Click the Compile and Download button at the bottom of the page.

3. Extract the files bootstrap.css and bootstrap.min.css from the resulting archive.

4. Use them instead of the standard files bootstrap.css and bootstrap.min.css on your site.