Removing breakpoints from Bootstrap 3
<p>I have inherited a web app that's using Bootstrap 3 as its framework with some basic customisation applied via the recommended <code>_custom-variables.scss</code> method. The official SASS port is added as a dependency and included in the <code>app.scss</code> file using <code>@import "bootstrap";</code> after <code>_custom-variables.scss</code> and <code>_custom-mixins.scss</code>.</p>

<p>The fluid-width app will not be usable on small screens (due to the sheer amount of data being displayed) so I want to disable or remove the <code>-xs-</code> and <code>-sm-</code> breakpoints from the CSS. The layout will be optimised for <code>-lg-</code> and <code>-md-</code> breakpoints with <code>-md-</code> being the narrowest breakpoint.</p>

<p>In <code>_custom-variables.scss</code>, I changed the <code>$container-tablet</code> width from:</p>

<pre><code>// Small screen / tablet
$container-tablet:             (720px + $grid-gutter-width) !default;
//** For `$screen-sm-min` and up.
$container-sm:                 $container-tablet !default;

// Medium screen / desktop
$container-desktop:            (940px + $grid-gutter-width) !default;
//** For `$screen-md-min` and up.
$container-md:                 $container-desktop !default;
</code></pre>

<p>to:</p>

<pre><code>// Small screen / tablet
$container-tablet:             (940px + $grid-gutter-width) !default;
//** For `$screen-sm-min` and up.
$container-sm:                 $container-tablet !default;

// Medium screen / desktop
$container-desktop:            (940px + $grid-gutter-width) !default;
//** For `$screen-md-min` and up.
$container-md:                 $container-desktop !default;
</code></pre>

<p>I also set a <code>min-width: $container-md;</code> on the parent<code>&lt;div&gt;</code> wrapping the entire layout.</p>

<p>This works so long as I include classes for the unwanted breakpoints on my HTML elements. For example the following maintains a column width of 25%:</p>

<p><code>&lt;div class="col-xs-3 col-sm-3 col-md-3"&gt;</code></p>

<p>but omitting the smaller breakpoint classes removes the <code>width</code> property and the <code>&lt;div&gt;</code> defaults to a width of 100% when the browser shrinks below 992px (the <code>min-width</code> value of the <code>-md-</code> breakpoint).</p>

<h1>My questions:</h1>

<ol>
<li>Why do I need to specify the additional smaller breakpoint classes on my containers? (My Bootstrap skills are rusty!)</li>
<li>Is there a better way of removing/disabling the two smaller breakpoints?</li>
</ol>