<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>
<h3>Responsive classes</h3>
- <table class="table table-bordered table-striped responsive-utilities hidden-sm">
- <thead>
- <tr>
- <th>Class</th>
- <th>Phones <small>767px and below</small></th>
- <th>Tablets <small>979px to 768px</small></th>
- <th>Desktops <small>Default</small></th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <th><code>.visible-sm</code></th>
- <td class="is-visible">Visible</td>
- <td class="is-hidden">Hidden</td>
- <td class="is-hidden">Hidden</td>
- </tr>
- <tr>
- <th><code>.visible-md</code></th>
- <td class="is-hidden">Hidden</td>
- <td class="is-visible">Visible</td>
- <td class="is-hidden">Hidden</td>
- </tr>
- <tr>
- <th><code>.visible-lg</code></th>
- <td class="is-hidden">Hidden</td>
- <td class="is-hidden">Hidden</td>
- <td class="is-visible">Visible</td>
- </tr>
- <tr>
- <th><code>.hidden-sm</code></th>
- <td class="is-hidden">Hidden</td>
- <td class="is-visible">Visible</td>
- <td class="is-visible">Visible</td>
- </tr>
- <tr>
- <th><code>.hidden-md</code></th>
- <td class="is-visible">Visible</td>
- <td class="is-hidden">Hidden</td>
- <td class="is-visible">Visible</td>
- </tr>
- <tr>
- <th><code>.hidden-lg</code></th>
- <td class="is-visible">Visible</td>
- <td class="is-visible">Visible</td>
- <td class="is-hidden">Hidden</td>
- </tr>
- </tbody>
- </table>
+ <div class="hidden-sm">
+ <table class="table table-bordered table-striped responsive-utilities">
+ <thead>
+ <tr>
+ <th>Class</th>
+ <th>Phones <small>767px and below</small></th>
+ <th>Tablets <small>979px to 768px</small></th>
+ <th>Desktops <small>Default</small></th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th><code>.visible-sm</code></th>
+ <td class="is-visible">Visible</td>
+ <td class="is-hidden">Hidden</td>
+ <td class="is-hidden">Hidden</td>
+ </tr>
+ <tr>
+ <th><code>.visible-md</code></th>
+ <td class="is-hidden">Hidden</td>
+ <td class="is-visible">Visible</td>
+ <td class="is-hidden">Hidden</td>
+ </tr>
+ <tr>
+ <th><code>.visible-lg</code></th>
+ <td class="is-hidden">Hidden</td>
+ <td class="is-hidden">Hidden</td>
+ <td class="is-visible">Visible</td>
+ </tr>
+ <tr>
+ <th><code>.hidden-sm</code></th>
+ <td class="is-hidden">Hidden</td>
+ <td class="is-visible">Visible</td>
+ <td class="is-visible">Visible</td>
+ </tr>
+ <tr>
+ <th><code>.hidden-md</code></th>
+ <td class="is-visible">Visible</td>
+ <td class="is-hidden">Hidden</td>
+ <td class="is-visible">Visible</td>
+ </tr>
+ <tr>
+ <th><code>.hidden-lg</code></th>
+ <td class="is-visible">Visible</td>
+ <td class="is-visible">Visible</td>
+ <td class="is-hidden">Hidden</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
<h3>Print classes</h3>
<table class="table table-bordered table-striped responsive-utilities">