Helping you build a better website
(and other interesting web stuff)

CSSHTMLJavaScriptjQueryMSSQLMySQLPHPSilvaTechnologiesWordpress
Silva Web Designs - Blog

How to Change Breakpoints with Bootstrap

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.

< 768pxExtra small devices Phones
≥ 768pxSmall devices Tablets
≥ 992pxMedium devices Desktops
≥ 1200pxLarge devices Desktops

I had integrated Bootstrap Navbar for my 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 I 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 let 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:-

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Join the discussion