How to Change Breakpoints with Bootstrap

Twitter Bootstrap

Using Bootstrap in a web project is normal. And now if you know Bootstrap, that isn't enough. You need to keep upgrading yourself with new tricks to master it. Sometime client needs customization and he doesn't understand the framework anyway. In such a situation we have to think out of the box to sort it out.

Before I have written on re-positioning of modal popup. And today we will discuss on possible ways to change breakpoints with Bootstrap.

What is Breakpoint

Though the Bootstrap is complete framework and packaged with JavaScript components too but achieving effortless responsive behavior is the major key point we can granted Bootstrap for. Responsive behavior 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 would like to share my experience here. I had integrated Navbar component for primary navigation in a project. Might you aware that Navbar starts collapsing with < 768px but unfortunately that project had 6-7 navigation items to show, so while re-sizing those items started moving to the next line until getting 768px width (image 1). Now this looks little weird and I had to change the Navbar's breakpoint to 992px instead of 768px (image 2).

There are 3 ways we can change media queries breakpoints with Bootstrap.
  1. Customize Bootstrap before downloading
  2. Change in CSS
  3. 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 freedom to change breakpoints before start working on a project. So you can plan well in advance.

Bootstrap-(Media-Queries-Breakpoints)
Bootstrap-(Media-Queries-Breakpoints)

 

Change in CSS

If you need to change behavior of specific component (i.e.: navbar), you can overwrite or change with CSS. You can click on bellow "see in action" links for a demo.

Image 1 see in action

Bootstrap-(Media-Queries-Breakpoints)-menu-768
Bootstrap-(Media-Queries-Breakpoints)-menu-768

Image 2 see in action

Bootstrap-(Media-Queries-Breakpoints)-menu-992
Bootstrap-(Media-Queries-Breakpoints)-menu-992

Sample Code Coderwall

@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

If above two are not the solution in your case, you need to create a new breakpoint. Below are some steps.

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

Conclusion

It completely depends on your need. If you can fix with CSS you should avoid jumping into complex side. The best option is to use Bootstrap's custom tool.

Resources

  • Ariela

    Thanks for posting this. I want to achieve the same thing - I want the collapsed navbar to kick in at 768px (ipad portrait).

    I'd like to use the Customized Bootstrap method, but I don't understand what needs to update in the media queries breakpoints form. What value/field do I need to change in order to achieve this?

    Many thanks in advance! 🙂

    • Ariela, if you want collapsed navbar at 768px (screen-sm-min) then you don't need to customize because by default navbar will collapse at 768px in Bootstrap.

      But of course if you need it to be collapsed at 992px (screen-md-min), you can change value for "@grid-float-breakpoint" with "@screen-sm-min". In same way you can do for "@screen-lg-min" or "@screen-xs-min".

      Thanks.

      • Ariela

        Thank you!

  • mvjn23

    am using your 2 way. But in my html what happened, after clicking the hamburger expanding the menu and instantly getting collapsed. But i dont know what i did wrong. Can you suggest me what is problem.

  • Journee

    HI, thank you for such an informative post. I would like to change my breakpoint to 320px. I prefer the navbar not to collapse at 768px. Can you tell me how I could successfully implement this?

    • Hi Journee,

      Thanks for the comment and appreciating my post.

      I have tried to explain all possible ways to change the breakpoints with Bootstrap in the post itself.

      I would suggest to customize breakpoints from official site under "Grid system" section. You need to replace "@grid-float-breakpoint" input with @screen-xs-min. But this will change breakpoint to 480px (and will behave the same way for 320 too). But if the requirement is to be specific with 320px only then you need some extra CSS with @media query.

      Hope this will help. Thanks.

  • Thank you very much for this solution...