mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-17 19:21:23 +03:00
make it a thing
This commit is contained in:
Mark Otto
+252
-244
@@ -1,256 +1,264 @@
|
|||||||
<div class="bs-docs-section">
|
---
|
||||||
<h1 id="responsive-utilities" class="page-header">Responsive utilities</h1>
|
layout: page
|
||||||
|
title: Responsive utilities
|
||||||
|
---
|
||||||
|
|
||||||
<p class="lead">For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.</p>
|
For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.
|
||||||
<p>Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.</p>
|
|
||||||
|
|
||||||
|
Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.
|
||||||
|
|
||||||
<h2 id="responsive-utilities-classes">Available classes</h2>
|
## Available classes
|
||||||
<p>Use a single or combination of the available classes for toggling content across viewport breakpoints.</p>
|
|
||||||
<div class="table-responsive">
|
Use a single or combination of the available classes for toggling content across viewport breakpoints.
|
||||||
<table class="table table-bordered table-striped responsive-utilities">
|
|
||||||
<thead>
|
<div class="table-responsive">
|
||||||
<tr>
|
<table class="table table-bordered table-striped responsive-utilities">
|
||||||
<th></th>
|
<thead>
|
||||||
<th>
|
<tr>
|
||||||
Extra small devices
|
<th></th>
|
||||||
<small>Phones (<768px)</small>
|
<th>
|
||||||
</th>
|
Extra small devices
|
||||||
<th>
|
<small>Phones (<768px)</small>
|
||||||
Small devices
|
</th>
|
||||||
<small>Tablets (≥768px)</small>
|
<th>
|
||||||
</th>
|
Small devices
|
||||||
<th>
|
<small>Tablets (≥768px)</small>
|
||||||
Medium devices
|
</th>
|
||||||
<small>Desktops (≥992px)</small>
|
<th>
|
||||||
</th>
|
Medium devices
|
||||||
<th>
|
<small>Desktops (≥992px)</small>
|
||||||
Large devices
|
</th>
|
||||||
<small>Desktops (≥1200px)</small>
|
<th>
|
||||||
</th>
|
Large devices
|
||||||
</tr>
|
<small>Desktops (≥1200px)</small>
|
||||||
</thead>
|
</th>
|
||||||
<tbody>
|
</tr>
|
||||||
<tr>
|
</thead>
|
||||||
<th><code>.visible-xs-*</code></th>
|
<tbody>
|
||||||
<td class="is-visible">Visible</td>
|
<tr>
|
||||||
<td class="is-hidden">Hidden</td>
|
<th><code>.visible-xs-*</code></th>
|
||||||
<td class="is-hidden">Hidden</td>
|
<td class="is-visible">Visible</td>
|
||||||
<td class="is-hidden">Hidden</td>
|
<td class="is-hidden">Hidden</td>
|
||||||
</tr>
|
<td class="is-hidden">Hidden</td>
|
||||||
<tr>
|
<td class="is-hidden">Hidden</td>
|
||||||
<th><code>.visible-sm-*</code></th>
|
</tr>
|
||||||
<td class="is-hidden">Hidden</td>
|
<tr>
|
||||||
<td class="is-visible">Visible</td>
|
<th><code>.visible-sm-*</code></th>
|
||||||
<td class="is-hidden">Hidden</td>
|
<td class="is-hidden">Hidden</td>
|
||||||
<td class="is-hidden">Hidden</td>
|
<td class="is-visible">Visible</td>
|
||||||
</tr>
|
<td class="is-hidden">Hidden</td>
|
||||||
<tr>
|
<td class="is-hidden">Hidden</td>
|
||||||
<th><code>.visible-md-*</code></th>
|
</tr>
|
||||||
<td class="is-hidden">Hidden</td>
|
<tr>
|
||||||
<td class="is-hidden">Hidden</td>
|
<th><code>.visible-md-*</code></th>
|
||||||
<td class="is-visible">Visible</td>
|
<td class="is-hidden">Hidden</td>
|
||||||
<td class="is-hidden">Hidden</td>
|
<td class="is-hidden">Hidden</td>
|
||||||
</tr>
|
<td class="is-visible">Visible</td>
|
||||||
<tr>
|
<td class="is-hidden">Hidden</td>
|
||||||
<th><code>.visible-lg-*</code></th>
|
</tr>
|
||||||
<td class="is-hidden">Hidden</td>
|
<tr>
|
||||||
<td class="is-hidden">Hidden</td>
|
<th><code>.visible-lg-*</code></th>
|
||||||
<td class="is-hidden">Hidden</td>
|
<td class="is-hidden">Hidden</td>
|
||||||
<td class="is-visible">Visible</td>
|
<td class="is-hidden">Hidden</td>
|
||||||
</tr>
|
<td class="is-hidden">Hidden</td>
|
||||||
</tbody>
|
<td class="is-visible">Visible</td>
|
||||||
<tbody>
|
</tr>
|
||||||
<tr>
|
</tbody>
|
||||||
<th><code>.hidden-xs</code></th>
|
<tbody>
|
||||||
<td class="is-hidden">Hidden</td>
|
<tr>
|
||||||
<td class="is-visible">Visible</td>
|
<th><code>.hidden-xs</code></th>
|
||||||
<td class="is-visible">Visible</td>
|
<td class="is-hidden">Hidden</td>
|
||||||
<td class="is-visible">Visible</td>
|
<td class="is-visible">Visible</td>
|
||||||
</tr>
|
<td class="is-visible">Visible</td>
|
||||||
<tr>
|
<td class="is-visible">Visible</td>
|
||||||
<th><code>.hidden-sm</code></th>
|
</tr>
|
||||||
<td class="is-visible">Visible</td>
|
<tr>
|
||||||
<td class="is-hidden">Hidden</td>
|
<th><code>.hidden-sm</code></th>
|
||||||
<td class="is-visible">Visible</td>
|
<td class="is-visible">Visible</td>
|
||||||
<td class="is-visible">Visible</td>
|
<td class="is-hidden">Hidden</td>
|
||||||
</tr>
|
<td class="is-visible">Visible</td>
|
||||||
<tr>
|
<td class="is-visible">Visible</td>
|
||||||
<th><code>.hidden-md</code></th>
|
</tr>
|
||||||
<td class="is-visible">Visible</td>
|
<tr>
|
||||||
<td class="is-visible">Visible</td>
|
<th><code>.hidden-md</code></th>
|
||||||
<td class="is-hidden">Hidden</td>
|
<td class="is-visible">Visible</td>
|
||||||
<td class="is-visible">Visible</td>
|
<td class="is-visible">Visible</td>
|
||||||
</tr>
|
<td class="is-hidden">Hidden</td>
|
||||||
<tr>
|
<td class="is-visible">Visible</td>
|
||||||
<th><code>.hidden-lg</code></th>
|
</tr>
|
||||||
<td class="is-visible">Visible</td>
|
<tr>
|
||||||
<td class="is-visible">Visible</td>
|
<th><code>.hidden-lg</code></th>
|
||||||
<td class="is-visible">Visible</td>
|
<td class="is-visible">Visible</td>
|
||||||
<td class="is-hidden">Hidden</td>
|
<td class="is-visible">Visible</td>
|
||||||
</tr>
|
<td class="is-visible">Visible</td>
|
||||||
</tbody>
|
<td class="is-hidden">Hidden</td>
|
||||||
</table>
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
As of v3.2.0, the `.visible-*-*` classes for each breakpoint come in three variations, one for each CSS `display` property value listed below.
|
||||||
|
|
||||||
|
<div class="table-responsive">
|
||||||
|
<table class="table table-bordered table-striped">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Group of classes</th>
|
||||||
|
<th>CSS <code>display</code></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><code>.visible-*-block</code></td>
|
||||||
|
<td><code>display: block;</code></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>.visible-*-inline</code></td>
|
||||||
|
<td><code>display: inline;</code></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>.visible-*-inline-block</code></td>
|
||||||
|
<td><code>display: inline-block;</code></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<p>So, for extra small (<code>xs</code>) screens for example, the available <code>.visible-*-*</code> classes are: <code>.visible-xs-block</code>, <code>.visible-xs-inline</code>, and <code>.visible-xs-inline-block</code>.</p>
|
||||||
|
|
||||||
|
<h2 id="responsive-utilities-print">Print classes</h2>
|
||||||
|
<p>Similar to the regular responsive classes, use these for toggling content for print.</p>
|
||||||
|
<div class="table-responsive">
|
||||||
|
<table class="table table-bordered table-striped responsive-utilities">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Classes</th>
|
||||||
|
<th>Browser</th>
|
||||||
|
<th>Print</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th>
|
||||||
|
<code>.visible-print-block</code><br>
|
||||||
|
<code>.visible-print-inline</code><br>
|
||||||
|
<code>.visible-print-inline-block</code>
|
||||||
|
</th>
|
||||||
|
<td class="is-hidden">Hidden</td>
|
||||||
|
<td class="is-visible">Visible</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th><code>.hidden-print</code></th>
|
||||||
|
<td class="is-visible">Visible</td>
|
||||||
|
<td class="is-hidden">Hidden</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## Test cases
|
||||||
|
|
||||||
|
Resize your browser or load on different devices to test the responsive utility classes.
|
||||||
|
|
||||||
|
### Visible on...
|
||||||
|
|
||||||
|
Green checkmarks indicate the element **is visible** in your current viewport.
|
||||||
|
|
||||||
|
<div class="row responsive-utilities-test visible-on">
|
||||||
|
<div class="col-xs-6 col-sm-3">
|
||||||
|
<span class="hidden-xs">Extra small</span>
|
||||||
|
<span class="visible-xs-block">✔ Visible on x-small</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3">
|
||||||
<p>As of v3.2.0, the <code>.visible-*-*</code> classes for each breakpoint come in three variations, one for each CSS <code>display</code> property value listed below.</p>
|
<span class="hidden-sm">Small</span>
|
||||||
<div class="table-responsive">
|
<span class="visible-sm-block">✔ Visible on small</span>
|
||||||
<table class="table table-bordered table-striped">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Group of classes</th>
|
|
||||||
<th>CSS <code>display</code></th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td><code>.visible-*-block</code></td>
|
|
||||||
<td><code>display: block;</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>.visible-*-inline</code></td>
|
|
||||||
<td><code>display: inline;</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>.visible-*-inline-block</code></td>
|
|
||||||
<td><code>display: inline-block;</code></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
<p>So, for extra small (<code>xs</code>) screens for example, the available <code>.visible-*-*</code> classes are: <code>.visible-xs-block</code>, <code>.visible-xs-inline</code>, and <code>.visible-xs-inline-block</code>.</p>
|
<div class="clearfix visible-xs-block"></div>
|
||||||
|
<div class="col-xs-6 col-sm-3">
|
||||||
<h2 id="responsive-utilities-print">Print classes</h2>
|
<span class="hidden-md">Medium</span>
|
||||||
<p>Similar to the regular responsive classes, use these for toggling content for print.</p>
|
<span class="visible-md-block">✔ Visible on medium</span>
|
||||||
<div class="table-responsive">
|
|
||||||
<table class="table table-bordered table-striped responsive-utilities">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Classes</th>
|
|
||||||
<th>Browser</th>
|
|
||||||
<th>Print</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<th>
|
|
||||||
<code>.visible-print-block</code><br>
|
|
||||||
<code>.visible-print-inline</code><br>
|
|
||||||
<code>.visible-print-inline-block</code>
|
|
||||||
</th>
|
|
||||||
<td class="is-hidden">Hidden</td>
|
|
||||||
<td class="is-visible">Visible</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th><code>.hidden-print</code></th>
|
|
||||||
<td class="is-visible">Visible</td>
|
|
||||||
<td class="is-hidden">Hidden</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3">
|
||||||
|
<span class="hidden-lg">Large</span>
|
||||||
|
<span class="visible-lg-block">✔ Visible on large</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row responsive-utilities-test visible-on">
|
||||||
|
<div class="col-xs-6 col-sm-6">
|
||||||
|
<span class="hidden-xs hidden-sm">Extra small and small</span>
|
||||||
|
<span class="visible-xs-block visible-sm-block">✔ Visible on x-small and small</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6">
|
||||||
|
<span class="hidden-md hidden-lg">Medium and large</span>
|
||||||
|
<span class="visible-md-block visible-lg-block">✔ Visible on medium and large</span>
|
||||||
|
</div>
|
||||||
|
<div class="clearfix visible-xs-block"></div>
|
||||||
|
<div class="col-xs-6 col-sm-6">
|
||||||
|
<span class="hidden-xs hidden-md">Extra small and medium</span>
|
||||||
|
<span class="visible-xs-block visible-md-block">✔ Visible on x-small and medium</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6">
|
||||||
|
<span class="hidden-sm hidden-lg">Small and large</span>
|
||||||
|
<span class="visible-sm-block visible-lg-block">✔ Visible on small and large</span>
|
||||||
|
</div>
|
||||||
|
<div class="clearfix visible-xs-block"></div>
|
||||||
|
<div class="col-xs-6 col-sm-6">
|
||||||
|
<span class="hidden-xs hidden-lg">Extra small and large</span>
|
||||||
|
<span class="visible-xs-block visible-lg-block">✔ Visible on x-small and large</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6">
|
||||||
|
<span class="hidden-sm hidden-md">Small and medium</span>
|
||||||
|
<span class="visible-sm-block visible-md-block">✔ Visible on small and medium</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
### Hidden on...
|
||||||
|
|
||||||
<h2 id="responsive-utilities-tests">Test cases</h2>
|
Here, green checkmarks also indicate the element **is hidden** in your current viewport.
|
||||||
<p>Resize your browser or load on different devices to test the responsive utility classes.</p>
|
|
||||||
|
|
||||||
<h3>Visible on...</h3>
|
<div class="row responsive-utilities-test hidden-on">
|
||||||
<p>Green checkmarks indicate the element <strong>is visible</strong> in your current viewport.</p>
|
<div class="col-xs-6 col-sm-3">
|
||||||
<div class="row responsive-utilities-test visible-on">
|
<span class="hidden-xs">Extra small</span>
|
||||||
<div class="col-xs-6 col-sm-3">
|
<span class="visible-xs-block">✔ Hidden on x-small</span>
|
||||||
<span class="hidden-xs">Extra small</span>
|
</div>
|
||||||
<span class="visible-xs-block">✔ Visible on x-small</span>
|
<div class="col-xs-6 col-sm-3">
|
||||||
</div>
|
<span class="hidden-sm">Small</span>
|
||||||
<div class="col-xs-6 col-sm-3">
|
<span class="visible-sm-block">✔ Hidden on small</span>
|
||||||
<span class="hidden-sm">Small</span>
|
|
||||||
<span class="visible-sm-block">✔ Visible on small</span>
|
|
||||||
</div>
|
|
||||||
<div class="clearfix visible-xs-block"></div>
|
|
||||||
<div class="col-xs-6 col-sm-3">
|
|
||||||
<span class="hidden-md">Medium</span>
|
|
||||||
<span class="visible-md-block">✔ Visible on medium</span>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-3">
|
|
||||||
<span class="hidden-lg">Large</span>
|
|
||||||
<span class="visible-lg-block">✔ Visible on large</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row responsive-utilities-test visible-on">
|
|
||||||
<div class="col-xs-6 col-sm-6">
|
|
||||||
<span class="hidden-xs hidden-sm">Extra small and small</span>
|
|
||||||
<span class="visible-xs-block visible-sm-block">✔ Visible on x-small and small</span>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-6">
|
|
||||||
<span class="hidden-md hidden-lg">Medium and large</span>
|
|
||||||
<span class="visible-md-block visible-lg-block">✔ Visible on medium and large</span>
|
|
||||||
</div>
|
|
||||||
<div class="clearfix visible-xs-block"></div>
|
|
||||||
<div class="col-xs-6 col-sm-6">
|
|
||||||
<span class="hidden-xs hidden-md">Extra small and medium</span>
|
|
||||||
<span class="visible-xs-block visible-md-block">✔ Visible on x-small and medium</span>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-6">
|
|
||||||
<span class="hidden-sm hidden-lg">Small and large</span>
|
|
||||||
<span class="visible-sm-block visible-lg-block">✔ Visible on small and large</span>
|
|
||||||
</div>
|
|
||||||
<div class="clearfix visible-xs-block"></div>
|
|
||||||
<div class="col-xs-6 col-sm-6">
|
|
||||||
<span class="hidden-xs hidden-lg">Extra small and large</span>
|
|
||||||
<span class="visible-xs-block visible-lg-block">✔ Visible on x-small and large</span>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-6">
|
|
||||||
<span class="hidden-sm hidden-md">Small and medium</span>
|
|
||||||
<span class="visible-sm-block visible-md-block">✔ Visible on small and medium</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="clearfix visible-xs-block"></div>
|
||||||
<h3>Hidden on...</h3>
|
<div class="col-xs-6 col-sm-3">
|
||||||
<p>Here, green checkmarks also indicate the element <strong>is hidden</strong> in your current viewport.</p>
|
<span class="hidden-md">Medium</span>
|
||||||
<div class="row responsive-utilities-test hidden-on">
|
<span class="visible-md-block">✔ Hidden on medium</span>
|
||||||
<div class="col-xs-6 col-sm-3">
|
</div>
|
||||||
<span class="hidden-xs">Extra small</span>
|
<div class="col-xs-6 col-sm-3">
|
||||||
<span class="visible-xs-block">✔ Hidden on x-small</span>
|
<span class="hidden-lg">Large</span>
|
||||||
</div>
|
<span class="visible-lg-block">✔ Hidden on large</span>
|
||||||
<div class="col-xs-6 col-sm-3">
|
</div>
|
||||||
<span class="hidden-sm">Small</span>
|
</div>
|
||||||
<span class="visible-sm-block">✔ Hidden on small</span>
|
<div class="row responsive-utilities-test hidden-on">
|
||||||
</div>
|
<div class="col-xs-6 col-sm-6">
|
||||||
<div class="clearfix visible-xs-block"></div>
|
<span class="hidden-xs hidden-sm">Extra small and small</span>
|
||||||
<div class="col-xs-6 col-sm-3">
|
<span class="visible-xs-block visible-sm-block">✔ Hidden on x-small and small</span>
|
||||||
<span class="hidden-md">Medium</span>
|
</div>
|
||||||
<span class="visible-md-block">✔ Hidden on medium</span>
|
<div class="col-xs-6 col-sm-6">
|
||||||
</div>
|
<span class="hidden-md hidden-lg">Medium and large</span>
|
||||||
<div class="col-xs-6 col-sm-3">
|
<span class="visible-md-block visible-lg-block">✔ Hidden on medium and large</span>
|
||||||
<span class="hidden-lg">Large</span>
|
</div>
|
||||||
<span class="visible-lg-block">✔ Hidden on large</span>
|
<div class="clearfix visible-xs-block"></div>
|
||||||
</div>
|
<div class="col-xs-6 col-sm-6">
|
||||||
</div>
|
<span class="hidden-xs hidden-md">Extra small and medium</span>
|
||||||
<div class="row responsive-utilities-test hidden-on">
|
<span class="visible-xs-block visible-md-block">✔ Hidden on x-small and medium</span>
|
||||||
<div class="col-xs-6 col-sm-6">
|
</div>
|
||||||
<span class="hidden-xs hidden-sm">Extra small and small</span>
|
<div class="col-xs-6 col-sm-6">
|
||||||
<span class="visible-xs-block visible-sm-block">✔ Hidden on x-small and small</span>
|
<span class="hidden-sm hidden-lg">Small and large</span>
|
||||||
</div>
|
<span class="visible-sm-block visible-lg-block">✔ Hidden on small and large</span>
|
||||||
<div class="col-xs-6 col-sm-6">
|
</div>
|
||||||
<span class="hidden-md hidden-lg">Medium and large</span>
|
<div class="clearfix visible-xs-block"></div>
|
||||||
<span class="visible-md-block visible-lg-block">✔ Hidden on medium and large</span>
|
<div class="col-xs-6 col-sm-6">
|
||||||
</div>
|
<span class="hidden-xs hidden-lg">Extra small and large</span>
|
||||||
<div class="clearfix visible-xs-block"></div>
|
<span class="visible-xs-block visible-lg-block">✔ Hidden on x-small and large</span>
|
||||||
<div class="col-xs-6 col-sm-6">
|
</div>
|
||||||
<span class="hidden-xs hidden-md">Extra small and medium</span>
|
<div class="col-xs-6 col-sm-6">
|
||||||
<span class="visible-xs-block visible-md-block">✔ Hidden on x-small and medium</span>
|
<span class="hidden-sm hidden-md">Small and medium</span>
|
||||||
</div>
|
<span class="visible-sm-block visible-md-block">✔ Hidden on small and medium</span>
|
||||||
<div class="col-xs-6 col-sm-6">
|
|
||||||
<span class="hidden-sm hidden-lg">Small and large</span>
|
|
||||||
<span class="visible-sm-block visible-lg-block">✔ Hidden on small and large</span>
|
|
||||||
</div>
|
|
||||||
<div class="clearfix visible-xs-block"></div>
|
|
||||||
<div class="col-xs-6 col-sm-6">
|
|
||||||
<span class="hidden-xs hidden-lg">Extra small and large</span>
|
|
||||||
<span class="visible-xs-block visible-lg-block">✔ Hidden on x-small and large</span>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-6">
|
|
||||||
<span class="hidden-sm hidden-md">Small and medium</span>
|
|
||||||
<span class="visible-sm-block visible-md-block">✔ Hidden on small and medium</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user