Tutorial

Default Sizes for Twitter Bootstrap’s Media Queries

Draft updated on Invalid Date
    Default avatar

    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 us


    About the authors
    Default avatar
    Nicholas Cerminara

    author

    Still looking for an answer?

    Ask a questionSearch for more help

    Was this helpful?
     
    Leave a comment
    

    This textbox defaults to using Markdown to format your answer.

    You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

    Try DigitalOcean for free

    Click below to sign up and get $200 of credit to try our products over 60 days!

    Sign up

    Join the Tech Talk
    Success! Thank you! Please check your email for further details.

    Please complete your information!

    Get our biweekly newsletter

    Sign up for Infrastructure as a Newsletter.

    Hollie's Hub for Good

    Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

    Become a contributor

    Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

    Welcome to the developer cloud

    DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

    Learn more
    DigitalOcean Cloud Control Panel