{"id":849,"date":"2015-08-04T13:34:15","date_gmt":"2015-08-04T18:34:15","guid":{"rendered":"http:\/\/xfloyd.net\/blog\/?p=849"},"modified":"2015-08-04T13:36:24","modified_gmt":"2015-08-04T18:36:24","slug":"how-to-remove-bootstrap-mobile-breakpoints","status":"publish","type":"post","link":"https:\/\/xfloyd.net\/blog\/?p=849","title":{"rendered":"How to remove Bootstrap mobile breakpoints"},"content":{"rendered":"<h3 class=\"h3-desc\">A useful tip when you want to remove mobile media queries from Bootstrap<\/h3>\n<h2>Introduction<\/h2>\n<p>This is a trick to have only the Bootstrap&#8217;s desktop size media queries, when you want to do a website with <strong>only 992px and 1200px breakpoints<\/strong>, by removing the mobile breakpoint. If not done correctly you can encounter bad behaviours on the layout.<\/p>\n<h2>The Method<\/h2>\n<p>The method is very straightforward, just open your uncompressed <a href=\"http:\/\/getbootstrap.com\/customize\/\" rel=\"nofollow\">Bootstrap Css<\/a> (after the changes you can compress it with a <a href=\"https:\/\/www.google.com\/search?q=online+css+minifier\" rel=\"nofollow\">online css minifier<\/a>), and search for <strong>@media<\/strong> Css rules.<\/p>\n<p>You&#8217;ll find <strong>@media<\/strong> rules with inside the code for the <strong>.container<\/strong>&#8230;<\/p>\n<pre class=\" hljs css\" style=\"cursor: auto; -moz-user-select: text;\"><span class=\"hljs-at_rule\">@<span class=\"hljs-keyword\">media<\/span> (min-width: <span class=\"hljs-number\">768<\/span>px) <\/span>{\r\n  <span class=\"hljs-class\">.container<\/span> <span class=\"hljs-rules\">{\r\n    <span class=\"hljs-rule\"><span class=\"hljs-attribute\">width<\/span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">750<\/span>px<\/span><\/span>;\r\n  <span class=\"hljs-rule\">}<\/span><\/span>\r\n}\r\n<span class=\"hljs-at_rule\">@<span class=\"hljs-keyword\">media<\/span> (min-width: <span class=\"hljs-number\">992<\/span>px) <\/span>{\r\n  <span class=\"hljs-class\">.container<\/span> <span class=\"hljs-rules\">{\r\n    <span class=\"hljs-rule\"><span class=\"hljs-attribute\">width<\/span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">970<\/span>px<\/span><\/span>;\r\n  <span class=\"hljs-rule\">}<\/span><\/span>\r\n}\r\n<span class=\"hljs-at_rule\">@<span class=\"hljs-keyword\">media<\/span> (min-width: <span class=\"hljs-number\">1200<\/span>px) <\/span>{\r\n  <span class=\"hljs-class\">.container<\/span> <span class=\"hljs-rules\">{\r\n    <span class=\"hljs-rule\"><span class=\"hljs-attribute\">width<\/span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">1170<\/span>px<\/span><\/span>;\r\n  <span class=\"hljs-rule\">}<\/span><\/span>\r\n}\r\n<\/pre>\n<p>&#8230;and for the respective <strong>.col-<\/strong> columns.<\/p>\n<pre class=\" hljs css\" style=\"cursor: auto; -moz-user-select: text;\"><span class=\"hljs-at_rule\">@<span class=\"hljs-keyword\">media<\/span> (min-width: <span class=\"hljs-number\">768<\/span>px) <\/span>{\r\n  <span class=\"hljs-class\">.col-sm-1<\/span>, <span class=\"hljs-class\">.col-sm-2<\/span>, <span class=\"hljs-class\">.col-sm-3<\/span>, <span class=\"hljs-class\">.col-sm-4<\/span>, <span class=\"hljs-class\">.col-sm-5<\/span>, <span class=\"hljs-class\">.col-sm-6<\/span>, <span class=\"hljs-class\">.col-sm-7<\/span>, <span class=\"hljs-class\">.col-sm-8<\/span>, <span class=\"hljs-class\">.col-sm-9<\/span>, <span class=\"hljs-class\">.col-sm-10<\/span>, <span class=\"hljs-class\">.col-sm-11<\/span>, <span class=\"hljs-class\">.col-sm-12<\/span> <span class=\"hljs-rules\">{\r\n    <span class=\"hljs-rule\"><span class=\"hljs-attribute\">float<\/span>:<span class=\"hljs-value\"> left<\/span><\/span>;\r\n  <span class=\"hljs-rule\">}<\/span><\/span>\r\n  <span class=\"hljs-comment\">\/* more... *\/<\/span>\r\n}\r\n<span class=\"hljs-at_rule\">@<span class=\"hljs-keyword\">media<\/span> (min-width: <span class=\"hljs-number\">992<\/span>px) <\/span>{\r\n  <span class=\"hljs-class\">.col-md-1<\/span>, <span class=\"hljs-class\">.col-md-2<\/span>, <span class=\"hljs-class\">.col-md-3<\/span>, <span class=\"hljs-class\">.col-md-4<\/span>, <span class=\"hljs-class\">.col-md-5<\/span>, <span class=\"hljs-class\">.col-md-6<\/span>, <span class=\"hljs-class\">.col-md-7<\/span>, <span class=\"hljs-class\">.col-md-8<\/span>, <span class=\"hljs-class\">.col-md-9<\/span>, <span class=\"hljs-class\">.col-md-10<\/span>, <span class=\"hljs-class\">.col-md-11<\/span>, <span class=\"hljs-class\">.col-md-12<\/span> <span class=\"hljs-rules\">{\r\n    <span class=\"hljs-rule\"><span class=\"hljs-attribute\">float<\/span>:<span class=\"hljs-value\"> left<\/span><\/span>;\r\n  <span class=\"hljs-rule\">}<\/span><\/span>\r\n  <span class=\"hljs-comment\">\/* more... *\/<\/span>\r\n}\r\n<span class=\"hljs-at_rule\">@<span class=\"hljs-keyword\">media<\/span> (min-width: <span class=\"hljs-number\">1200<\/span>px) <\/span>{\r\n  <span class=\"hljs-class\">.col-lg-1<\/span>, <span class=\"hljs-class\">.col-lg-2<\/span>, <span class=\"hljs-class\">.col-lg-3<\/span>, <span class=\"hljs-class\">.col-lg-4<\/span>, <span class=\"hljs-class\">.col-lg-5<\/span>, <span class=\"hljs-class\">.col-lg-6<\/span>, <span class=\"hljs-class\">.col-lg-7<\/span>, <span class=\"hljs-class\">.col-lg-8<\/span>, <span class=\"hljs-class\">.col-lg-9<\/span>, <span class=\"hljs-class\">.col-lg-10<\/span>, <span class=\"hljs-class\">.col-lg-11<\/span>, <span class=\"hljs-class\">.col-lg-12<\/span> <span class=\"hljs-rules\">{\r\n    <span class=\"hljs-rule\"><span class=\"hljs-attribute\">float<\/span>:<span class=\"hljs-value\"> left<\/span><\/span>;\r\n  <span class=\"hljs-rule\">}<\/span><\/span>\r\n  <span class=\"hljs-comment\">\/* more... *\/<\/span>\r\n}\r\n<\/pre>\n<p>You just have to remove the @media rules you don&#8217;t need and the one you want as base, leaving the content inside untouched, just remove the <strong>@media (min-width: px) {<\/strong> and also the closing bracket <strong>}<\/strong>.<\/p>\n<p>For example to remove the mobile media queries, making 992px the default one, just remove <strong>@media (min-width: 768px) {<\/strong> and <strong>@media (min-width: 992px) {<\/strong>, with the respective closing brackets.<\/p>\n<pre class=\" hljs css\" style=\"cursor: auto; -moz-user-select: text;\"><span class=\"hljs-class\">.container<\/span> <span class=\"hljs-rules\">{\r\n  <span class=\"hljs-rule\"><span class=\"hljs-attribute\">width<\/span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">750<\/span>px<\/span><\/span>;\r\n<span class=\"hljs-rule\">}<\/span><\/span>\r\n<span class=\"hljs-class\">.container<\/span> <span class=\"hljs-rules\">{\r\n  <span class=\"hljs-rule\"><span class=\"hljs-attribute\">width<\/span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">970<\/span>px<\/span><\/span>;\r\n<span class=\"hljs-rule\">}<\/span><\/span>\r\n<span class=\"hljs-at_rule\">@<span class=\"hljs-keyword\">media<\/span> (min-width: <span class=\"hljs-number\">1200<\/span>px) <\/span>{\r\n  <span class=\"hljs-class\">.container<\/span> <span class=\"hljs-rules\">{\r\n    <span class=\"hljs-rule\"><span class=\"hljs-attribute\">width<\/span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">1170<\/span>px<\/span><\/span>;\r\n  <span class=\"hljs-rule\">}<\/span><\/span>\r\n}\r\n<\/pre>\n<pre class=\" hljs css\" style=\"cursor: auto; -moz-user-select: text;\"><span class=\"hljs-class\">.col-sm-1<\/span>, <span class=\"hljs-class\">.col-sm-2<\/span>, <span class=\"hljs-class\">.col-sm-3<\/span>, <span class=\"hljs-class\">.col-sm-4<\/span>, <span class=\"hljs-class\">.col-sm-5<\/span>, <span class=\"hljs-class\">.col-sm-6<\/span>, <span class=\"hljs-class\">.col-sm-7<\/span>, <span class=\"hljs-class\">.col-sm-8<\/span>, <span class=\"hljs-class\">.col-sm-9<\/span>, <span class=\"hljs-class\">.col-sm-10<\/span>, <span class=\"hljs-class\">.col-sm-11<\/span>, <span class=\"hljs-class\">.col-sm-12<\/span> <span class=\"hljs-rules\">{\r\n  <span class=\"hljs-rule\"><span class=\"hljs-attribute\">float<\/span>:<span class=\"hljs-value\"> left<\/span><\/span>;\r\n<span class=\"hljs-rule\">}<\/span><\/span>\r\n<span class=\"hljs-comment\">\/* more... *\/<\/span>\r\n<span class=\"hljs-class\">.col-md-1<\/span>, <span class=\"hljs-class\">.col-md-2<\/span>, <span class=\"hljs-class\">.col-md-3<\/span>, <span class=\"hljs-class\">.col-md-4<\/span>, <span class=\"hljs-class\">.col-md-5<\/span>, <span class=\"hljs-class\">.col-md-6<\/span>, <span class=\"hljs-class\">.col-md-7<\/span>, <span class=\"hljs-class\">.col-md-8<\/span>, <span class=\"hljs-class\">.col-md-9<\/span>, <span class=\"hljs-class\">.col-md-10<\/span>, <span class=\"hljs-class\">.col-md-11<\/span>, <span class=\"hljs-class\">.col-md-12<\/span> <span class=\"hljs-rules\">{\r\n  <span class=\"hljs-rule\"><span class=\"hljs-attribute\">float<\/span>:<span class=\"hljs-value\"> left<\/span><\/span>;\r\n<span class=\"hljs-rule\">}<\/span><\/span>\r\n<span class=\"hljs-comment\">\/* more... *\/<\/span>\r\n<span class=\"hljs-at_rule\">@<span class=\"hljs-keyword\">media<\/span> (min-width: <span class=\"hljs-number\">1200<\/span>px) <\/span>{\r\n  <span class=\"hljs-class\">.col-lg-1<\/span>, <span class=\"hljs-class\">.col-lg-2<\/span>, <span class=\"hljs-class\">.col-lg-3<\/span>, <span class=\"hljs-class\">.col-lg-4<\/span>, <span class=\"hljs-class\">.col-lg-5<\/span>, <span class=\"hljs-class\">.col-lg-6<\/span>, <span class=\"hljs-class\">.col-lg-7<\/span>, <span class=\"hljs-class\">.col-lg-8<\/span>, <span class=\"hljs-class\">.col-lg-9<\/span>, <span class=\"hljs-class\">.col-lg-10<\/span>, <span class=\"hljs-class\">.col-lg-11<\/span>, <span class=\"hljs-class\">.col-lg-12<\/span> <span class=\"hljs-rules\">{\r\n    <span class=\"hljs-rule\"><span class=\"hljs-attribute\">float<\/span>:<span class=\"hljs-value\"> left<\/span><\/span>;\r\n  <span class=\"hljs-rule\">}<\/span><\/span>\r\n  <span class=\"hljs-comment\">\/* more... *\/<\/span>\r\n}\r\n<\/pre>\n<p>Doing it this way (leaving the <strong>.col-<\/strong> styles) you can still use those columns classes in the Html, and they will work on &#8220;greater&#8221; media queries. In this example <strong>.col-xs-<\/strong> and <strong>.col-sm-<\/strong> columns will work on the 992px and the 1200px breakpoints.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A useful tip when you want to remove mobile media queries from Bootstrap Introduction This is a trick to have only the Bootstrap&#8217;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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[31],"tags":[],"_links":{"self":[{"href":"https:\/\/xfloyd.net\/blog\/index.php?rest_route=\/wp\/v2\/posts\/849"}],"collection":[{"href":"https:\/\/xfloyd.net\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xfloyd.net\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xfloyd.net\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xfloyd.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=849"}],"version-history":[{"count":2,"href":"https:\/\/xfloyd.net\/blog\/index.php?rest_route=\/wp\/v2\/posts\/849\/revisions"}],"predecessor-version":[{"id":852,"href":"https:\/\/xfloyd.net\/blog\/index.php?rest_route=\/wp\/v2\/posts\/849\/revisions\/852"}],"wp:attachment":[{"href":"https:\/\/xfloyd.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=849"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xfloyd.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=849"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xfloyd.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=849"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}