my code stock.com

Mobile First and Desktop First List Breakpoints for Bootstrap 3.

Snippet options

Download: Download snippet as bootstrap-3-breakpoints.css.
Copy snippet: For this you need a free my code stock.com account.
Embed code : You will find the embed code for this snippet at the end of the page, if you want to embed it into a website or a blog!

/*==================================================
=            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) {
        
    }
    
    /* ------------------------------------------------------------------------------- */
    /* Portrait and Landscape -------------------------------------------------------- */
    /* ------------------------------------------------------------------------------- */
    @media screen and (min-device-width : 768px) and (max-device-width : 1024px)  {
    	body {
    		background: yellow;
    	}
    }
    /* ------------------------------------------------------------------------------- */
    /* landscape --------------------------------------------------------------------- */
    /* ------------------------------------------------------------------------------- */
    @media screen and (min-device-width : 768px) and (max-device-width : 1024px)and (orientation : landscape)  {
    	body {
    		background: orange;
    	}
    }
    /* ------------------------------------------------------------------------------- */
    /* Portrait */
    /* ------------------------------------------------------------------------------- */
    @media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)  {
    	body {
    		background: blue;
    	}
    }

Create a free my code stock.com account now.

my code stok.com is a free service, which allows you to save and manage code snippes of any kind and programming language. We provide many advantages for your daily work with code-snippets, also for your teamwork. Give it a try!

Find out more and register now

You can customize the height of iFrame-Codes as needed! You can find more infos in our API Reference for iframe Embeds.