bootstrap-layout
Version:
Bootstrap layout with sidebar navigation, sidebar skins, sidebar transition, custom scrollbars, sidebar menus and other advanced features and utilities
158 lines (154 loc) • 6.35 kB
HTML
---
title: Sidebar visibility
slug: sidebar/visibility
path: ../
---
{% extends "layouts/default.html" %}
{% block page %}
<h1>{{ title }}</h1>
<div class="card card-block">
<ul class="nav nav-pills">
<li class="nav-item">
<a href="#usage-data-attributes" data-toggle="pill" class="nav-link active">Data attributes</a>
</li>
<li class="nav-item">
<a href="#usage-css" data-toggle="pill" class="nav-link">CSS</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Demos</a>
<div class="dropdown-menu">
<a class="dropdown-item" target="_blank" href="../demo/sidebar-md-up.html">md-up</a>
<a class="dropdown-item" target="_blank" href="../demo/sidebar-sm_lg-up.html">sm + lg-up</a>
<a class="dropdown-item" target="_blank" href="../demo/sidebar-hidden.html">hidden</a>
</div>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="usage-data-attributes">
<blockquote>
To change the sidebar visibility, add the <code>data-visible</code> attribute with any of the following values. When using the <code>data-visible</code> attribute it's not required to add any extra CSS classes.
</blockquote>
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th>Value</th>
<th>Description</th>
<th width="1">Default</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>none</code></td>
<td colspan="2">Hides the sidebar by default on any screen size</td>
</tr>
<tr>
<td><code>xs</code></td>
<td colspan="2">Displays the sidebar on screens up to <code>543px</code> wide</td>
</tr>
<tr>
<td><code>sm</code></td>
<td colspan="2">Displays the sidebar on screens between <code>544px</code> and <code>767px</code> wide</td>
</tr>
<tr>
<td><code>md</code></td>
<td colspan="2">Displays the sidebar on screens between <code>768px</code> and <code>991px</code> wide</td>
</tr>
<tr>
<td><code>lg</code></td>
<td colspan="2">Displays the sidebar on screens between <code>992px</code> and <code>1199px</code> wide</td>
</tr>
<tr>
<td><code>xl</code></td>
<td colspan="2">Displays the sidebar on screens larger than <code>1199px</code> wide</td>
</tr>
<tr>
<td><code>xs-up</code></td>
<td colspan="2">Displays the sidebar on any screen size</td>
</tr>
<tr>
<td><code>sm-up</code></td>
<td colspan="2">Displays the sidebar on screens larger than <code>543px</code> wide</td>
</tr>
<tr>
<td><code>md-up</code></td>
<td>Displays the sidebar on screens larger than <code>767px</code> wide</td>
<td class="text-xs-center"><i class="material-icons text-success">check_circle</i></td>
</tr>
<tr>
<td><code>lg-up</code></td>
<td colspan="2">Displays the sidebar on screens larger than <code>991px</code> wide</td>
</tr>
<tr>
<td><code>xl-up</code></td>
<td colspan="2">Displays the sidebar on screens larger than <code>1199px</code> wide</td>
</tr>
</tbody>
</table>
</div>
{% include 'code/sidebar/visibility.html' %}
</div>
<div class="tab-pane" id="usage-css">
<blockquote>
By default, <code>.sidebar</code> elements are hidden on any screen size. To change the sidebar visibility without JavaScript, you can add the following CSS classes manually to the <code>.sidebar</code> element.
</blockquote>
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th>CSS Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.sidebar-visible</code></td>
<td>Displays the sidebar on any screen size</td>
</tr>
<tr>
<td><code>.sidebar-visible-xs</code></td>
<td>Displays the sidebar on screens up to <code>543px</code> wide</td>
</tr>
<tr>
<td><code>.sidebar-visible-sm</code></td>
<td>Displays the sidebar on screens between <code>544px</code> and <code>767px</code> wide</td>
</tr>
<tr>
<td><code>.sidebar-visible-md</code></td>
<td>Displays the sidebar on screens between <code>768px</code> and <code>991px</code> wide</td>
</tr>
<tr>
<td><code>.sidebar-visible-lg</code></td>
<td>Displays the sidebar on screens between <code>992px</code> and <code>1199px</code> wide</td>
</tr>
<tr>
<td><code>.sidebar-visible-xl</code></td>
<td>Displays the sidebar on screens larger than <code>1199px</code> wide</td>
</tr>
<tr>
<td><code>.sidebar-visible-xs-up</code></td>
<td>Displays the sidebar on any screen size</td>
</tr>
<tr>
<td><code>.sidebar-visible-sm-up</code></td>
<td>Displays the sidebar on screens larger than <code>543px</code> wide</td>
</tr>
<tr>
<td><code>.sidebar-visible-md-up</code></td>
<td>Displays the sidebar on screens larger than <code>767px</code> wide</td>
</tr>
<tr>
<td><code>.sidebar-visible-lg-up</code></td>
<td>Displays the sidebar on screens larger than <code>991px</code> wide</td>
</tr>
<tr>
<td><code>.sidebar-visible-xl-up</code></td>
<td>Displays the sidebar on screens larger than <code>1199px</code> wide</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
{% endblock %}