<metaname="description"content="Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.">
<metaname="author"content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<metaname="twitter:description"content="Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.">
<metaproperty="og:description"content="Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.">
<pclass="bd-lead">Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.</p>
<ahref="http://srv.carbonads.net/ads/click/x/GTND42QIF6BI5KQNCV74YKQMCKAIV5QECABDVZ3JCW7ILK7YCASI453KC6BIC5QMCEYDTK3EHJNCLSIZ?segment=placement:getbootstrapcom;"class="carbon-text"target="_blank"rel="noopener">It's teamwork, but simpler, more pleasant and more productive.</a>
</span>
<ahref="http://carbonads.net/?utm_source=getbootstrapcom&utm_medium=ad_via_link&utm_campaign=in_unit&utm_term=carbon"class="carbon-poweredby"target="_blank"rel="noopener">ads via Carbon</a>
<p>Since Bootstrap is developed to be mobile first, we use a handful of
<ahref="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">media queries</a> to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.
</p>
<p>Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.</p>
<divclass="bd-clipboard">
<buttonclass="btn-clipboard"title=""data-original-title="Copy to clipboard">Copy</button>
</div>
<figureclass="highlight">
<pre>
<codeclass="language-scss"data-lang="scss">
<spanclass="c1">// Extra small devices (portrait phones, less than 576px)</span>
<spanclass="c1">// No media query for `xs` since this is the default in Bootstrap</span>
<spanclass="c1">// Small devices (landscape phones, 576px and up)</span>
<spanclass="k">@media</span>
<spanclass="p">(</span>
<spanclass="n">min-width</span>
<spanclass="o">:</span>
<spanclass="m">576px</span>
<spanclass="p">)</span>
<spanclass="p">{</span>
<spanclass="nc">...</span>
<spanclass="p">}</span>
<spanclass="c1">// Medium devices (tablets, 768px and up)</span>
<spanclass="k">@media</span>
<spanclass="p">(</span>
<spanclass="n">min-width</span>
<spanclass="o">:</span>
<spanclass="m">768px</span>
<spanclass="p">)</span>
<spanclass="p">{</span>
<spanclass="nc">...</span>
<spanclass="p">}</span>
<spanclass="c1">// Large devices (desktops, 992px and up)</span>
<spanclass="k">@media</span>
<spanclass="p">(</span>
<spanclass="n">min-width</span>
<spanclass="o">:</span>
<spanclass="m">992px</span>
<spanclass="p">)</span>
<spanclass="p">{</span>
<spanclass="nc">...</span>
<spanclass="p">}</span>
<spanclass="c1">// Extra large devices (large desktops, 1200px and up)</span>
<spanclass="k">@media</span>
<spanclass="p">(</span>
<spanclass="n">min-width</span>
<spanclass="o">:</span>
<spanclass="m">1200px</span>
<spanclass="p">)</span>
<spanclass="p">{</span>
<spanclass="nc">...</span>
<spanclass="p">}</span>
</code>
</pre>
</figure>
<p>Since we write our source CSS in Sass, all our media queries are available via Sass mixins:</p>
<divclass="bd-clipboard">
<buttonclass="btn-clipboard"title=""data-original-title="Copy to clipboard">Copy</button>
</div>
<figureclass="highlight">
<pre>
<codeclass="language-scss"data-lang="scss">
<spanclass="c1">// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`</span>
<spanclass="k">@include</span>
<spanclass="nd">media-breakpoint-up</span>
<spanclass="p">(</span>
<spanclass="n">sm</span>
<spanclass="p">)</span>
<spanclass="p">{</span>
<spanclass="nc">...</span>
<spanclass="p">}</span>
<spanclass="k">@include</span>
<spanclass="nd">media-breakpoint-up</span>
<spanclass="p">(</span>
<spanclass="n">md</span>
<spanclass="p">)</span>
<spanclass="p">{</span>
<spanclass="nc">...</span>
<spanclass="p">}</span>
<spanclass="k">@include</span>
<spanclass="nd">media-breakpoint-up</span>
<spanclass="p">(</span>
<spanclass="n">lg</span>
<spanclass="p">)</span>
<spanclass="p">{</span>
<spanclass="nc">...</span>
<spanclass="p">}</span>
<spanclass="k">@include</span>
<spanclass="nd">media-breakpoint-up</span>
<spanclass="p">(</span>
<spanclass="n">xl</span>
<spanclass="p">)</span>
<spanclass="p">{</span>
<spanclass="nc">...</span>
<spanclass="p">}</span>
<spanclass="c1">// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint</span>
<spanclass="nc">.custom-class</span>
<spanclass="p">{</span>
<spanclass="nl">display</span>
<spanclass="p">:</span>
<spanclass="nb">none</span>
<spanclass="p">;</span>
<spanclass="p">}</span>
<spanclass="k">@include</span>
<spanclass="nd">media-breakpoint-up</span>
<spanclass="p">(</span>
<spanclass="n">sm</span>
<spanclass="p">)</span>
<spanclass="p">{</span>
<spanclass="nc">.custom-class</span>
<spanclass="p">{</span>
<spanclass="nl">display</span>
<spanclass="p">:</span>
<spanclass="nb">block</span>
<spanclass="p">;</span>
<spanclass="p">}</span>
<spanclass="p">}</span>
</code>
</pre>
</figure>
<p>We occasionally use media queries that go in the other direction (the given screen size
<em>or smaller</em>):
</p>
<divclass="bd-clipboard">
<buttonclass="btn-clipboard"title=""data-original-title="Copy to clipboard">Copy</button>
</div>
<figureclass="highlight">
<pre>
<codeclass="language-scss"data-lang="scss">
<spanclass="c1">// Extra small devices (portrait phones, less than 576px)</span>
<spanclass="k">@media</span>
<spanclass="p">(</span>
<spanclass="n">max-width</span>
<spanclass="o">:</span>
<spanclass="m">575</span>
<spanclass="mi">.98px</span>
<spanclass="p">)</span>
<spanclass="p">{</span>
<spanclass="nc">...</span>
<spanclass="p">}</span>
<spanclass="c1">// Small devices (landscape phones, less than 768px)</span>
<spanclass="k">@media</span>
<spanclass="p">(</span>
<spanclass="n">max-width</span>
<spanclass="o">:</span>
<spanclass="m">767</span>
<spanclass="mi">.98px</span>
<spanclass="p">)</span>
<spanclass="p">{</span>
<spanclass="nc">...</span>
<spanclass="p">}</span>
<spanclass="c1">// Medium devices (tablets, less than 992px)</span>
<spanclass="k">@media</span>
<spanclass="p">(</span>
<spanclass="n">max-width</span>
<spanclass="o">:</span>
<spanclass="m">991</span>
<spanclass="mi">.98px</span>
<spanclass="p">)</span>
<spanclass="p">{</span>
<spanclass="nc">...</span>
<spanclass="p">}</span>
<spanclass="c1">// Large devices (desktops, less than 1200px)</span>
<spanclass="k">@media</span>
<spanclass="p">(</span>
<spanclass="n">max-width</span>
<spanclass="o">:</span>
<spanclass="m">1199</span>
<spanclass="mi">.98px</span>
<spanclass="p">)</span>
<spanclass="p">{</span>
<spanclass="nc">...</span>
<spanclass="p">}</span>
<spanclass="c1">// Extra large devices (large desktops)</span>
<spanclass="c1">// No media query since the extra-large breakpoint has no upper bound on its width</span>
</code>
</pre>
</figure>
<divclass="bd-callout bd-callout-info">
<p>Note that since browsers do not currently support
<ahref="https://www.w3.org/TR/mediaqueries-4/#range-context">range context queries</a>, we work around the limitations of
</a> and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.
</p>
</div>
<p>Once again, these media queries are also available via Sass mixins:</p>
<divclass="bd-clipboard">
<buttonclass="btn-clipboard"title=""data-original-title="Copy to clipboard">Copy</button>
</div>
<figureclass="highlight">
<pre>
<codeclass="language-scss"data-lang="scss">
<spanclass="k">@include</span>
<spanclass="nd">media-breakpoint-down</span>
<spanclass="p">(</span>
<spanclass="n">xs</span>
<spanclass="p">)</span>
<spanclass="p">{</span>
<spanclass="nc">...</span>
<spanclass="p">}</span>
<spanclass="k">@include</span>
<spanclass="nd">media-breakpoint-down</span>
<spanclass="p">(</span>
<spanclass="n">sm</span>
<spanclass="p">)</span>
<spanclass="p">{</span>
<spanclass="nc">...</span>
<spanclass="p">}</span>
<spanclass="k">@include</span>
<spanclass="nd">media-breakpoint-down</span>
<spanclass="p">(</span>
<spanclass="n">md</span>
<spanclass="p">)</span>
<spanclass="p">{</span>
<spanclass="nc">...</span>
<spanclass="p">}</span>
<spanclass="k">@include</span>
<spanclass="nd">media-breakpoint-down</span>
<spanclass="p">(</span>
<spanclass="n">lg</span>
<spanclass="p">)</span>
<spanclass="p">{</span>
<spanclass="nc">...</span>
<spanclass="p">}</span>
<spanclass="c1">// No media query necessary for xl breakpoint as it has no upper bound on its width</span>
<spanclass="c1">// Example: Style from medium breakpoint and down</span>
<spanclass="k">@include</span>
<spanclass="nd">media-breakpoint-down</span>
<spanclass="p">(</span>
<spanclass="n">md</span>
<spanclass="p">)</span>
<spanclass="p">{</span>
<spanclass="nc">.custom-class</span>
<spanclass="p">{</span>
<spanclass="nl">display</span>
<spanclass="p">:</span>
<spanclass="nb">block</span>
<spanclass="p">;</span>
<spanclass="p">}</span>
<spanclass="p">}</span>
</code>
</pre>
</figure>
<p>There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.</p>
<divclass="bd-clipboard">
<buttonclass="btn-clipboard"title=""data-original-title="Copy to clipboard">Copy</button>
</div>
<figureclass="highlight">
<pre>
<codeclass="language-scss"data-lang="scss">
<spanclass="c1">// Extra small devices (portrait phones, less than 576px)</span>
<spanclass="k">@media</span>
<spanclass="p">(</span>
<spanclass="n">max-width</span>
<spanclass="o">:</span>
<spanclass="m">575</span>
<spanclass="mi">.98px</span>
<spanclass="p">)</span>
<spanclass="p">{</span>
<spanclass="nc">...</span>
<spanclass="p">}</span>
<spanclass="c1">// Small devices (landscape phones, 576px and up)</span>
<spanclass="k">@media</span>
<spanclass="p">(</span>
<spanclass="n">min-width</span>
<spanclass="o">:</span>
<spanclass="m">576px</span>
<spanclass="p">)</span>
<spanclass="nf">and</span>
<spanclass="p">(</span>
<spanclass="n">max-width</span>
<spanclass="o">:</span>
<spanclass="m">767</span>
<spanclass="mi">.98px</span>
<spanclass="p">)</span>
<spanclass="p">{</span>
<spanclass="nc">...</span>
<spanclass="p">}</span>
<spanclass="c1">// Medium devices (tablets, 768px and up)</span>
<spanclass="k">@media</span>
<spanclass="p">(</span>
<spanclass="n">min-width</span>
<spanclass="o">:</span>
<spanclass="m">768px</span>
<spanclass="p">)</span>
<spanclass="nf">and</span>
<spanclass="p">(</span>
<spanclass="n">max-width</span>
<spanclass="o">:</span>
<spanclass="m">991</span>
<spanclass="mi">.98px</span>
<spanclass="p">)</span>
<spanclass="p">{</span>
<spanclass="nc">...</span>
<spanclass="p">}</span>
<spanclass="c1">// Large devices (desktops, 992px and up)</span>
<spanclass="k">@media</span>
<spanclass="p">(</span>
<spanclass="n">min-width</span>
<spanclass="o">:</span>
<spanclass="m">992px</span>
<spanclass="p">)</span>
<spanclass="nf">and</span>
<spanclass="p">(</span>
<spanclass="n">max-width</span>
<spanclass="o">:</span>
<spanclass="m">1199</span>
<spanclass="mi">.98px</span>
<spanclass="p">)</span>
<spanclass="p">{</span>
<spanclass="nc">...</span>
<spanclass="p">}</span>
<spanclass="c1">// Extra large devices (large desktops, 1200px and up)</span>
<spanclass="k">@media</span>
<spanclass="p">(</span>
<spanclass="n">min-width</span>
<spanclass="o">:</span>
<spanclass="m">1200px</span>
<spanclass="p">)</span>
<spanclass="p">{</span>
<spanclass="nc">...</span>
<spanclass="p">}</span>
</code>
</pre>
</figure>
<p>These media queries are also available via Sass mixins:</p>
<divclass="bd-clipboard">
<buttonclass="btn-clipboard"title=""data-original-title="Copy to clipboard">Copy</button>
</div>
<figureclass="highlight">
<pre>
<codeclass="language-scss"data-lang="scss">
<spanclass="k">@include</span>
<spanclass="nd">media-breakpoint-only</span>
<spanclass="p">(</span>
<spanclass="n">xs</span>
<spanclass="p">)</span>
<spanclass="p">{</span>
<spanclass="nc">...</span>
<spanclass="p">}</span>
<spanclass="k">@include</span>
<spanclass="nd">media-breakpoint-only</span>
<spanclass="p">(</span>
<spanclass="n">sm</span>
<spanclass="p">)</span>
<spanclass="p">{</span>
<spanclass="nc">...</span>
<spanclass="p">}</span>
<spanclass="k">@include</span>
<spanclass="nd">media-breakpoint-only</span>
<spanclass="p">(</span>
<spanclass="n">md</span>
<spanclass="p">)</span>
<spanclass="p">{</span>
<spanclass="nc">...</span>
<spanclass="p">}</span>
<spanclass="k">@include</span>
<spanclass="nd">media-breakpoint-only</span>
<spanclass="p">(</span>
<spanclass="n">lg</span>
<spanclass="p">)</span>
<spanclass="p">{</span>
<spanclass="nc">...</span>
<spanclass="p">}</span>
<spanclass="k">@include</span>
<spanclass="nd">media-breakpoint-only</span>
<spanclass="p">(</span>
<spanclass="n">xl</span>
<spanclass="p">)</span>
<spanclass="p">{</span>
<spanclass="nc">...</span>
<spanclass="p">}</span>
</code>
</pre>
</figure>
<p>Similarly, media queries may span multiple breakpoint widths:</p>
<divclass="bd-clipboard">
<buttonclass="btn-clipboard"title=""data-original-title="Copy to clipboard">Copy</button>
</div>
<figureclass="highlight">
<pre>
<codeclass="language-scss"data-lang="scss">
<spanclass="c1">// Example</span>
<spanclass="c1">// Apply styles starting from medium devices and up to extra large devices</span>
<spanclass="k">@media</span>
<spanclass="p">(</span>
<spanclass="n">min-width</span>
<spanclass="o">:</span>
<spanclass="m">768px</span>
<spanclass="p">)</span>
<spanclass="nf">and</span>
<spanclass="p">(</span>
<spanclass="n">max-width</span>
<spanclass="o">:</span>
<spanclass="m">1199</span>
<spanclass="mi">.98px</span>
<spanclass="p">)</span>
<spanclass="p">{</span>
<spanclass="nc">...</span>
<spanclass="p">}</span>
</code>
</pre>
</figure>
<p>The Sass mixin for targeting the same screen size range would be:</p>
<divclass="bd-clipboard">
<buttonclass="btn-clipboard"title=""data-original-title="Copy to clipboard">Copy</button>
<codeclass="highlighter-rouge">z-index</code>, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Bootstrap that’s been designed to properly layer navigation, tooltips and popovers, modals, and more.
</p>
<p>These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There’s no reason we couldn’t have used
<codeclass="highlighter-rouge">100</code>+ or
<codeclass="highlighter-rouge">500</code>+.
</p>
<p>We don’t encourage customization of these individual values; should you change one, you likely need to change them all.</p>
<divclass="bd-clipboard">
<buttonclass="btn-clipboard"title=""data-original-title="Copy to clipboard">Copy</button>
</div>
<figureclass="highlight">
<pre>
<codeclass="language-scss"data-lang="scss">
<spanclass="nv">$zindex-dropdown</span>
<spanclass="p">:</span>
<spanclass="m">1000</span>
<spanclass="o">!</span>
<spanclass="nb">default</span>
<spanclass="p">;</span>
<spanclass="nv">$zindex-sticky</span>
<spanclass="p">:</span>
<spanclass="m">1020</span>
<spanclass="o">!</span>
<spanclass="nb">default</span>
<spanclass="p">;</span>
<spanclass="nv">$zindex-fixed</span>
<spanclass="p">:</span>
<spanclass="m">1030</span>
<spanclass="o">!</span>
<spanclass="nb">default</span>
<spanclass="p">;</span>
<spanclass="nv">$zindex-modal-backdrop</span>
<spanclass="p">:</span>
<spanclass="m">1040</span>
<spanclass="o">!</span>
<spanclass="nb">default</span>
<spanclass="p">;</span>
<spanclass="nv">$zindex-modal</span>
<spanclass="p">:</span>
<spanclass="m">1050</span>
<spanclass="o">!</span>
<spanclass="nb">default</span>
<spanclass="p">;</span>
<spanclass="nv">$zindex-popover</span>
<spanclass="p">:</span>
<spanclass="m">1060</span>
<spanclass="o">!</span>
<spanclass="nb">default</span>
<spanclass="p">;</span>
<spanclass="nv">$zindex-tooltip</span>
<spanclass="p">:</span>
<spanclass="m">1070</span>
<spanclass="o">!</span>
<spanclass="nb">default</span>
<spanclass="p">;</span>
</code>
</pre>
</figure>
<p>To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit
<codeclass="highlighter-rouge">z-index</code> values of
<codeclass="highlighter-rouge">1</code>,
<codeclass="highlighter-rouge">2</code>, and
<codeclass="highlighter-rouge">3</code> for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher
<codeclass="highlighter-rouge">z-index</code> value to show their border over the sibling elements.
