Change Collapse breakpoint in Bootstrap 3.0

Question

Please help me on changing when my nav-bar be collapsed or if there is any method to make it responsive like getting in small size!

that\'s my code:

Answer 1

Some answers to this question claim you can override the bootstrap CSS changes without transpiling the LESS into CSS (using Grunt or some other transpiler). The diff below shows the changes which you would need to make manually in order to simply change @grid-float-breakpoint from @screen-sm-min (the default) to @screen-lg-min.

There are too many changes to do manually - all these CSS changes for one variable! Better just transpile the LESS using Grunt and do it right.

Or use the twitter service to generate a file if you don't want to set up Grunt: http://getbootstrap.com/customize/

diff --git a/node_modules/bootstrap/dist/css/bootstrap.css b/node_modules/bootstrap/dist/css/bootstrap.css
index 66bf005..09bdb1c 100644
--- a/node_modules/bootstrap/dist/css/bootstrap.css
+++ b/node_modules/bootstrap/dist/css/bootstrap.css
@@ -1886,7 +1886,7 @@ dd
 {
     margin-left: 0;
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .dl-horizontal dt
     {
@@ -4816,7 +4816,7 @@ tbody.collapse.in

     margin-bottom: 2px;
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .navbar-right .dropdown-menu
     {
@@ -5516,14 +5516,14 @@ select[multiple].input-group-sm > .input-group-btn > .btn

     border: 1px solid transparent;
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .navbar
     {
         border-radius: 4px;
     }
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .navbar-header
     {
@@ -5547,7 +5547,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
 {
     overflow-y: auto;
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .navbar-collapse
     {
@@ -5598,7 +5598,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
     margin-right: -15px;
     margin-left: -15px;
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .container > .navbar-header,
     .container-fluid > .navbar-header,
@@ -5615,7 +5615,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn

     border-width: 0 0 1px;
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .navbar-static-top
     {
@@ -5630,7 +5630,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
     right: 0;
     left: 0;
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .navbar-fixed-top,
     .navbar-fixed-bottom
@@ -5671,7 +5671,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
 {
     display: block;
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .navbar > .container .navbar-brand,
     .navbar > .container-fluid .navbar-brand
@@ -5712,7 +5712,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
 {
     margin-top: 4px;
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .navbar-toggle
     {
@@ -5730,7 +5730,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
     padding-top: 10px;
     padding-bottom: 10px;
 }
-@media (max-width: 767px)
+@media (max-width: 1199px)
 {
     .navbar-nav .open .dropdown-menu
     {
@@ -5761,7 +5761,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
         background-image: none;
     }
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .navbar-nav
     {
@@ -5863,7 +5863,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
         top: 0;
     }
 }
-@media (max-width: 767px)
+@media (max-width: 1199px)
 {
     .navbar-form .form-group
     {
@@ -5874,7 +5874,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
         margin-bottom: 0;
     }
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .navbar-form
     {
@@ -5925,7 +5925,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
     margin-top: 15px;
     margin-bottom: 15px;
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .navbar-text
     {
@@ -5935,7 +5935,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
         margin-left: 15px;
     }
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .navbar-left
     {
@@ -6020,7 +6020,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
     color: #555;
     background-color: #e7e7e7;
 }
-@media (max-width: 767px)
+@media (max-width: 1199px)
 {
     .navbar-default .navbar-nav .open .dropdown-menu > li > a
     {
@@ -6139,7 +6139,7 @@ fieldset[disabled] .navbar-default .btn-link:focus
     color: #fff;
     background-color: #080808;
 }
-@media (max-width: 767px)
+@media (max-width: 1199px)
 {
     .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header
     {