Twitter Bootstrap 3 is a mobile-first front-end framework. But you will also find non-mobile first breakpoints in case you want to know the difference.
Min-Width (mobile first): Refers to everything greater than or equal to the amount given.
Max-Width (non-mobile): Refers to everything less than or equal to the amount given.
/* 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){ }
/* 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){ }
@media (min-width: 768px) and (max-width: 979px) { }