Bootsrap 3 correct CSS Media Queries break points

Please use these Bootstrap 3 media query break point in a correct way . Bootstrap 3 comes with the mobile first methord  which means when creating UI we should create mobile view first and then change the styles to other views such as tablet desktop and larger device

If you are targeting desktop oriented please use the non mobile first method in the bellow

 

 

/*==================================================
=            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) {
        
    }

Leave a Reply

Your email address will not be published. Required fields are marked *

Current month ye@r day *