A useful tip when you want to remove mobile media queries from Bootstrap

Introduction

This is a trick to have only the Bootstrap’s desktop size media queries, when you want to do a website with only 992px and 1200px breakpoints, by removing the mobile breakpoint. If not done correctly you can encounter bad behaviours on the layout.

The Method

The method is very straightforward, just open your uncompressed Bootstrap Css (after the changes you can compress it with a online css minifier), and search for @media Css rules.

You’ll find @media rules with inside the code for the .container…

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

…and for the respective .col- columns.

@media (min-width: 768px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }
  /* more... */
}
@media (min-width: 992px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }
  /* more... */
}
@media (min-width: 1200px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
  }
  /* more... */
}

You just have to remove the @media rules you don’t need and the one you want as base, leaving the content inside untouched, just remove the @media (min-width: px) { and also the closing bracket }.

For example to remove the mobile media queries, making 992px the default one, just remove @media (min-width: 768px) { and @media (min-width: 992px) {, with the respective closing brackets.

.container {
  width: 750px;
}
.container {
  width: 970px;
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
  float: left;
}
/* more... */
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
  float: left;
}
/* more... */
@media (min-width: 1200px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
  }
  /* more... */
}

Doing it this way (leaving the .col- styles) you can still use those columns classes in the Html, and they will work on “greater” media queries. In this example .col-xs- and .col-sm- columns will work on the 992px and the 1200px breakpoints.