Default Sizes for Twitter Bootstrap’s Media Queries

Draft updated on Invalid Date

By Nicholas Cerminara

Default Sizes for Twitter Bootstrap’s Media Queries

This tutorial is out of date and no longer maintained.

Introduction

I love Twitter’s Bootstrap. I find that when developing with it, either Bootstrap 2 (2.3.2) or Bootstrap 3, that I always need to apply custom styles at the different sizes. Especially when going beyond Bootstrap’s standard functionality. After all, it’s just a front-end framework.

Below you’ll find nicely formatted Media Queries for starting with either of the Bootstrap versions. You can use this as a starting point for your projects. It’s basically what I use when creating a new website or webapp. I’ve also provided links to Github for quick access.

Bootstrap 3 Media Query Breakpoints

Bootstrap 3 is a mobile-first front-end framework. I’ve included the correct order for the Media Queries below, but I’ve also included at the bottom of them the non-mobile first breakpoints in case some people aren’t used to the mobile-first methodology since technically both will work.

Min-Width: Refers to everything greater than or equal to the amount given. Max-Width: Refers to everything less than or equal to the amount given.

    /*==================================================
    =            Bootstrap 3 Media Queries             =
    ==================================================*/

        /*==========  Mobile First Method  ==========*/

        /* Custom, iPhone Retina */
        @media only screen and (min-width : 320px) {

        }

        /* Extra Small Devices, Phones */
        @media only screen and (min-width : 480px) {

        }

        /* Small Devices, Tablets */
        @media only screen and (min-width : 768px) {

        }

        /* Medium Devices, Desktops */
        @media only screen and (min-width : 992px) {

        }

        /* Large Devices, Wide Screens */
        @media only screen and (min-width : 1200px) {

        }

        /*==========  Non-Mobile First Method  ==========*/

        /* Large Devices, Wide Screens */
        @media only screen and (max-width : 1200px) {

        }

        /* Medium Devices, Desktops */
        @media only screen and (max-width : 992px) {

        }

        /* Small Devices, Tablets */
        @media only screen and (max-width : 768px) {

        }

        /* Extra Small Devices, Phones */
        @media only screen and (max-width : 480px) {

        }

        /* Custom, iPhone Retina */
        @media only screen and (max-width : 320px) {

        }

Bootstrap 2.3.2 Media Query Breakpoints

    /*=====================================================
    =            Bootstrap 2.3.2 Media Queries            =
    =====================================================*/
    @media only screen and (max-width : 1200px) {

    }

    @media only screen and (max-width : 979px) {

    }

    @media only screen and (max-width : 767px) {

    }

    @media only screen and (max-width : 480px) {

    }

    @media only screen and (max-width : 320px) {

    }

Conclusion

If you have improvements, corrections, or just a different way, I would love to hear it. I’ll gladly update this if anyone has better or more accurate information. Either post a comment or send me a Pull Request on GitHub.

Related Reading For some more information on using the Bootstrap Grid, check out our other article: Understanding the Bootstrap 3 Grid System.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products