bootstrap-layout
Version:
Bootstrap layout with sidebar navigation, sidebar skins, sidebar transition, custom scrollbars, sidebar menus and other advanced features and utilities
616 lines (594 loc) • 20.5 kB
HTML
---
title: Sidebar size
slug: sidebar/size
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">
<a href="#usage-sass" data-toggle="pill" class="nav-link">Sass</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="usage-data-attributes">
<blockquote>
To change the sidebar size, add any of the following attributes to the <code>.sidebar</code> container. When using the data attributes, it's not required to add any extra CSS classes.
</blockquote>
<h3>Any screen size</h3>
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th width="220">Attribute</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>data-size</code></td>
<td>Configures the default sidebar size on any screen size</td>
</tr>
</tbody>
</table>
</div>
<h3>Specific screen sizes</h3>
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th width="220">Attribute</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>data-size-xs</code></td>
<td>Configures the sidebar size on screens up to <code>543px</code> wide</td>
</tr>
<tr>
<td><code>data-size-sm</code></td>
<td>Configures the sidebar size on screens between <code>544px</code> and <code>767px</code> wide</td>
</tr>
<tr>
<td><code>data-size-md</code></td>
<td>Configures the sidebar size on screens between <code>768px</code> and <code>991px</code> wide</td>
</tr>
<tr>
<td><code>data-size-lg</code></td>
<td>Configures the sidebar size on screens between <code>992px</code> and <code>1199px</code> wide</td>
</tr>
<tr>
<td><code>data-size-xl</code></td>
<td>Configures the sidebar size on screens larger than <code>1199px</code> wide</td>
</tr>
<tr>
<td><code>data-size-sm-up</code></td>
<td>Configures the sidebar size on screens larger than <code>543px</code> wide</td>
</tr>
<tr>
<td><code>data-size-md-up</code></td>
<td>Configures the sidebar size on screens larger than <code>767px</code> wide</td>
</tr>
<tr>
<td><code>data-size-lg-up</code></td>
<td>Configures the sidebar size on screens larger than <code>991px</code> wide</td>
</tr>
<tr>
<td><code>data-size-xl-up</code></td>
<td>Configures the sidebar size on screens larger than <code>1199px</code> wide</td>
</tr>
</tbody>
</table>
</div>
<hr>
<h3>Fixed width sizes</h3>
<blockquote>
The following values can be used with any of the <code>data-size*</code> attributes and will apply a fixed width to the sidebar container.
</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>1</code></td>
<td colspan="2">Makes the sidebar <code>56px</code> wide</td>
</tr>
<tr>
<td><code>2</code></td>
<td colspan="2">Makes the sidebar <code>200px</code> wide</td>
</tr>
<tr>
<td><code>3</code></td>
<td>Makes the sidebar <code>250px</code> wide</td>
<td class="text-xs-center"><i class="material-icons text-success">check_circle</i></td>
</tr>
</tbody>
</table>
</div>
<ul class="nav nav-pills">
<li class="nav-item">
<span class="nav-link active">Code</span>
</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-size-2.html">Sidebar size 2</a>
<a class="dropdown-item" target="_blank" href="../demo/sidebar-size-3.html">Sidebar size 3</a>
</div>
</li>
</ul>
{% include 'code/sidebar/size.html' %}
<hr>
<h3>Fluid width sizes</h3>
<blockquote>
The following values can be used with any of the <code>data-size*</code> attributes and will apply a fluid width to the sidebar container.
</blockquote>
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th width="220">Value</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>20%</code></td>
<td>
Makes the sidebar <code>20%</code> wide
</td>
</tr>
<tr>
<td><code>25%</code></td>
<td>
Makes the sidebar <code>25%</code> wide
</td>
</tr>
<tr>
<td><code>30%</code></td>
<td>
Makes the sidebar <code>30%</code> wide
</td>
</tr>
<tr>
<td><code>35%</code></td>
<td>
Makes the sidebar <code>35%</code> wide
</td>
</tr>
<tr>
<td><code>40%</code></td>
<td>
Makes the sidebar <code>40%</code> wide
</td>
</tr>
<tr>
<td><code>45%</code></td>
<td>
Makes the sidebar <code>45%</code> wide
</td>
</tr>
<tr>
<td><code>50%</code></td>
<td>
Makes the sidebar <code>50%</code> wide
</td>
</tr>
<tr>
<td><code>55%</code></td>
<td>
Makes the sidebar <code>55%</code> wide
</td>
</tr>
<tr>
<td><code>60%</code></td>
<td>
Makes the sidebar <code>60%</code> wide
</td>
</tr>
<tr>
<td><code>65%</code></td>
<td>
Makes the sidebar <code>65%</code> wide
</td>
</tr>
<tr>
<td><code>70%</code></td>
<td>
Makes the sidebar <code>70%</code> wide
</td>
</tr>
<tr>
<td><code>75%</code></td>
<td>
Makes the sidebar <code>75%</code> wide
</td>
</tr>
<tr>
<td><code>80%</code></td>
<td>
Makes the sidebar <code>80%</code> wide
</td>
</tr>
<tr>
<td><code>85%</code></td>
<td>
Makes the sidebar <code>85%</code> wide
</td>
</tr>
<tr>
<td><code>90%</code></td>
<td>
Makes the sidebar <code>90%</code> wide
</td>
</tr>
<tr>
<td><code>95%</code></td>
<td>
Makes the sidebar <code>95%</code> wide
</td>
</tr>
<tr>
<td><code>100%</code></td>
<td>
Makes the sidebar <code>100%</code> wide
</td>
</tr>
</tbody>
</table>
</div>
<ul class="nav nav-pills">
<li class="nav-item">
<span class="nav-link active">Code</span>
</li>
<li class="nav-item dropdown">
<a class="nav-link" target="_blank" href="../demo/sidebar-size-percent.html">Demo</a>
</li>
</ul>
{% include 'code/sidebar/percent.html' %}
</div>
<div class="tab-pane" id="usage-css">
<blockquote>
To change the sidebar size without JavaScript, you can add the following CSS classes manually to the <code>.sidebar</code> container.
</blockquote>
<h3>Fixed width sizes</h3>
<blockquote>
Apply a fixed width to the sidebar container.
</blockquote>
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th width="220">CSS Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.sidebar-size-1</code></td>
<td>Makes the sidebar <code>56px</code> wide</td>
</tr>
<tr>
<td><code>.sidebar-size-2</code></td>
<td>Makes the sidebar <code>200px</code> wide</td>
</tr>
<tr>
<td><code>.sidebar-size-3</code></td>
<td>Makes the sidebar <code>250px</code> wide</td>
</tr>
</tbody>
</table>
</div>
<hr>
<h3>Fluid width sizes</h3>
<blockquote>
Apply a fluid width to the sidebar container.
</blockquote>
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th width="220">CSS Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.sidebar-size-20pc</code></td>
<td>
Makes the sidebar <code>20%</code> wide on any screen size.
</td>
</tr>
<tr>
<td><code>.sidebar-size-25pc</code></td>
<td>
Makes the sidebar <code>25%</code> wide on any screen size.
</td>
</tr>
<tr>
<td><code>.sidebar-size-30pc</code></td>
<td>
Makes the sidebar <code>30%</code> wide on any screen size.
</td>
</tr>
<tr>
<td><code>.sidebar-size-35pc</code></td>
<td>
Makes the sidebar <code>35%</code> wide on any screen size.
</td>
</tr>
<tr>
<td><code>.sidebar-size-40pc</code></td>
<td>
Makes the sidebar <code>40%</code> wide on any screen size.
</td>
</tr>
<tr>
<td><code>.sidebar-size-45pc</code></td>
<td>
Makes the sidebar <code>45%</code> wide on any screen size.
</td>
</tr>
<tr>
<td><code>.sidebar-size-50pc</code></td>
<td>
Makes the sidebar <code>50%</code> wide on any screen size.
</td>
</tr>
<tr>
<td><code>.sidebar-size-55pc</code></td>
<td>
Makes the sidebar <code>55%</code> wide on any screen size.
</td>
</tr>
<tr>
<td><code>.sidebar-size-60pc</code></td>
<td>
Makes the sidebar <code>60%</code> wide on any screen size.
</td>
</tr>
<tr>
<td><code>.sidebar-size-65pc</code></td>
<td>
Makes the sidebar <code>65%</code> wide on any screen size.
</td>
</tr>
<tr>
<td><code>.sidebar-size-70pc</code></td>
<td>
Makes the sidebar <code>70%</code> wide on any screen size.
</td>
</tr>
<tr>
<td><code>.sidebar-size-75pc</code></td>
<td>
Makes the sidebar <code>75%</code> wide on any screen size.
</td>
</tr>
<tr>
<td><code>.sidebar-size-80pc</code></td>
<td>
Makes the sidebar <code>80%</code> wide on any screen size.
</td>
</tr>
<tr>
<td><code>.sidebar-size-85pc</code></td>
<td>
Makes the sidebar <code>85%</code> wide on any screen size.
</td>
</tr>
<tr>
<td><code>.sidebar-size-90pc</code></td>
<td>
Makes the sidebar <code>90%</code> wide on any screen size.
</td>
</tr>
<tr>
<td><code>.sidebar-size-95pc</code></td>
<td>
Makes the sidebar <code>95%</code> wide on any screen size.
</td>
</tr>
<tr>
<td><code>.sidebar-size-100pc</code></td>
<td>
Makes the sidebar <code>100%</code> wide on any screen size.
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab-pane" id="usage-sass">
<blockquote>
You can customize the sidebar sizes with the following Sass variables.
</blockquote>
<h3>Fixed width sizes</h3>
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th width="250">Sass variable</th>
<th>Description</th>
<th class="text-xs-center" width="130">Default value</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>$sidebar-size-1</code></td>
<td>Defines the sidebar width when using <code>.sidebar-size-1</code> or <code>data-size="1"</code></td>
<td class="text-xs-center"><code>56px</code></td>
</tr>
<tr>
<td><code>$sidebar-size-2</code></td>
<td>Defines the sidebar width when using <code>.sidebar-size-2</code> or <code>data-size="2"</code></td>
<td class="text-xs-center"><code>200px</code></td>
</tr>
<tr>
<td><code>$sidebar-size-3</code></td>
<td>Defines the sidebar width when using <code>.sidebar-size-3</code> or <code>data-size="3"</code></td>
<td class="text-xs-center"><code>250px</code></td>
</tr>
</tbody>
</table>
</div>
<hr>
<h3>Fluid width sizes</h3>
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th width="250">Sass variable</th>
<th>Description</th>
<th class="text-xs-center" width="130">Default value</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>$sidebar-percent-from</code></td>
<td>Defines the minimum sidebar size for generating the percentage based sidebar size CSS classes</td>
<td class="text-xs-center"><code>20</code></td>
</tr>
<tr>
<td><code>$sidebar-percent-through</code></td>
<td>Defines the maximum sidebar size for generating the percentage based sidebar size CSS classes</td>
<td class="text-xs-center"><code>100</code></td>
</tr>
<tr>
<td><code>$sidebar-percent-step</code></td>
<td>Defines the increment value used for generating the percentage based sidebar size CSS classes</td>
<td class="text-xs-center"><code>5</code></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<h2>Sidebar mini</h2>
<div class="card card-block">
<ul class="nav nav-pills">
<li class="nav-item">
<a href="#mini-css" data-toggle="pill" class="nav-link active">CSS</a>
</li>
<li class="nav-item">
<a href="#mini-sass" data-toggle="pill" class="nav-link">Sass</a>
</li>
<li class="nav-item">
<a class="nav-link" target="_blank" href="../demo/sidebar-mini.html">Demo</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="mini-css">
<blockquote>
Sidebar utility class to adjust the sidebar content such as text and menus when using <code>.sidebar-size-1</code> or <code>data-size="1"</code>.
</blockquote>
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th width="220">CSS Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.sidebar-mini</code></td>
<td>
The <code>.sidebar-mini</code> class must be used together with the <code>.sidebar-size-1</code> class or with the <code>data-size="1"</code> data attribute.
</td>
</tr>
</tbody>
</table>
</div>
{% include 'code/sidebar/mini.html' %}
</div>
<div class="tab-pane" id="mini-sass">
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th width="250">Sass variable</th>
<th>Description</th>
<th class="text-xs-center" width="250">Default value</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>$sidebar-mini-width</code></td>
<td>Defines the sidebar width when using <code>.sidebar-mini</code></td>
<td class="text-xs-center"><code>$sidebar-width-1</code></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<h2>Sidebar reveal</h2>
<div class="card card-block">
<ul class="nav nav-pills">
<li class="nav-item">
<a href="#reveal-css" data-toggle="pill" class="nav-link active">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-reveal-2.html">Sidebar reveal size 2</a>
<a class="dropdown-item" target="_blank" href="../demo/sidebar-reveal-3.html">Sidebar reveal size 3</a>
</div>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="reveal-css">
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th width="220">CSS Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.sidebar-reveal</code></td>
<td>
Reveals the sidebar on mouse over and retracts the sidebar to it's original placement on mouse out. <br>
The <code>.sidebar-reveal</code> class must be used together with the <code>.sidebar-size-1</code> class or with the <code>data-size="1"</code> attribute.
</td>
</tr>
<tr>
<td><code>.sidebar-reveal-size-2</code></td>
<td>
Makes a <code>.sidebar-reveal</code> element <code>200px</code> wide.
</td>
</tr>
<tr>
<td><code>.sidebar-reveal-size-3</code></td>
<td>
Makes a <code>.sidebar-reveal</code> element <code>250px</code> wide.
</td>
</tr>
</tbody>
</table>
</div>
{% include 'code/sidebar/reveal.html' %}
</div>
</div>
</div>
{% endblock %}