What is Breakpoint?

Though the Bootstrap is a complete framework and packaged with JavaScript components too but achieving effortless responsive behaviour is the major key point we can grant Bootstrap for. Responsive behaviour depends on resolutions (viewport or screen sizes).

By default, Bootstrap supports four resolutions – called Breakpoints in technical term.

we had integrated Bootstrap Navbar for our primary navigation in a project and as you may be aware that Navbar starts collapsing with < 768px. However, when you have a project with 6 - 7+ navbar items to show, you will notice the navbar drops to a new line and it's not really feasible making the navbar look tidy on one line. So basically we needed to change the breakpoint from 768px to 992px. There are 3 ways you can change media queries breakpoints with Bootstrap:-

• Customize Bootstrap before downloading
• Change in CSS
• Create a new Breakpoint

Customize Bootstrap before downloading

Bootstrap lets us change some of the preferences before downloading a ZIP. If you got the project requirement then you should select this option. Because here, you would have the freedom to change breakpoints before start working on a project. So you can plan well in advance.

Change in CSS

If you need to change the behavior of the specific component (e.g. the navbar), you can overwrite or change the breakpoint with 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;
    }
}

Create a new Breakpoint

This option requires a bit of extra work but if the above two are not the solution in your case, you need to create a new breakpoint. Below are some steps:-

• Set the custom breakpoints as per your need
• Create new_grids.scss file and include it to your styles.scss file
• Declaring new breakpoints
• Deciding on container width and setting up
• Calling up the make-grid() SASS function
• Last step is optional but recommended to add visible and hidden classes