}

Bootstrap 4 Navbar Breakpoint (we also cover 3.1 and older)

Created:

Introduction

When making responsive sites with bootstrap is common to have problems when navbar collapses. Sometimes the navbar collapses too soon or too late. In this article we explain how to solve this problem with different version os bootstrap. Bootstrap 4 has added support to solve this problem using new classes.

Bootstrap 4 navbar breakpoint

Bootstrap 4 has a new navbar component which is responsive. This new navbar uses flexbox.

The componen has navbar-expand-* classes, this will allow you to change the navbar breakpoint. The new component has 6 breakpoint sizes.

Here is an example of a navbar for bootstrap 4 (copied from bootstrap.com)

``` html

```

In the example you can see that the navbar uses navbar-expand-md class in the nav would make this Navbar collapse vertically at the breakpoint of 992px (medium).

Breakpoints classes:

  • navbar-expand = collapse on xs widths <576px
  • navbar-expand-sm = collapse on sm widths <768px
  • navbar-expand-md = collapse on sm widths <992px
  • navbar-expand-lg = collapse on lg widths <1200px

Bootstrap 3.1 navbar breakpoint

When using Bootstrap 3.1 we need to create custom CSS media query. We use 1200px breakpoint since the navbar is mobile first, this is different with older versions. The CSS code that changes the navbar breakpoint is:

``` html
@media (max-width: 1200px) { .navbar-header { float: none; } .navbar-left,.navbar-right { float: none !important; } .navbar-toggle { display: block; } .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } .navbar-fixed-top { top: 0; border-width: 0 0 1px; } .navbar-collapse.collapse { display: none!important; } .navbar-nav { float: none!important; margin-top: 7.5px; } .navbar-nav>li { float: none; } .navbar-nav>li>a { padding-top: 10px; padding-bottom: 10px; } .collapse.in{ display:block !important; } }


# Bootstrap 3 or older navbar breakpoint

With older versions of bootstrap the markup is different but the solution is to write some css media query.
At this example we use the break point of 992px.
 ``` css   
    @media (max-width: 992px) {
        .navbar-header {
            float: none;
        }
        .navbar-toggle {
            display: block;
        }
        .navbar-collapse {
            border-top: 1px solid transparent;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
        }
        .navbar-collapse.collapse {
            display: none!important;
        }
        .navbar-nav {
            float: none!important;
            margin: 7.5px -15px;
        }
        .navbar-nav>li {
            float: none;
        }
        .navbar-nav>li>a {
            padding-top: 10px;
            padding-bottom: 10px;
        }
    }
css