Bootstrap media queries for all devices

We Are Professional

Bootstrap media queries for all devices

Bootstrap media queries for all devices. Actually, Bootstrap 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.

We use the following media queries to create the key breakpoints in our grid system.
Extra small devices (phones, up to 480px): No media query since this is the default in Bootstrap

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.
[sourcecode language=”plain”]

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

}
[/sourcecode]

Information

WebinBangla is a leading web solution provider and we work globally. Wel make sure our clients and customers avail maximum benefits by using our high quality services and complete packages.

  • Address: Pahartoli, Raozan, Chittagong.
  • Email: mamun005cse@gmail.com
  • Phone: +880 1738 914871

Working Hours

  • Monday - Friday - 9am to 5pm
  • Saturday - 9am to 2pm
  • Sunday - Closed