bootstrap-layout
Version:
Bootstrap layout with sidebar navigation, sidebar skins, sidebar transition, custom scrollbars, sidebar menus and other advanced features and utilities
229 lines (224 loc) • 8.51 kB
HTML
---
title: Sidebar utilities
slug: sidebar/utilities
path: ../
---
{% extends "layouts/default.html" %}
{% block page %}
<h1>{{ title }}</h1>
<p>You can modify the style of various sidebar elements by using the following sidebar CSS helper classes.</p>
<h2>Sidebar spacing</h2>
<div class="card card-block">
<ul class="nav nav-pills">
<li class="nav-item">
<a href="#spacing-css" data-toggle="pill" class="nav-link active">CSS</a>
</li>
<li class="nav-item">
<a href="#spacing-sass" data-toggle="pill" class="nav-link">Sass</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="spacing-css">
<h3>Padding</h3>
<blockquote>
Add any of the following CSS classes to any element within the <code>.sidebar</code> container to apply a vertical or horizontal padding.
</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-p-a</code></td>
<td>Apply padding in all directions using the sidebar horizontal and vertical spacings</td>
</tr>
<tr>
<td><code>.sidebar-p-x</code></td>
<td>Apply horizontal padding to any element using the sidebar horizontal spacing</td>
</tr>
<tr>
<td><code>.sidebar-p-y</code></td>
<td>Apply vertical padding to any element using the sidebar vertical spacing</td>
</tr>
<tr>
<td><code>.sidebar-p-l</code></td>
<td>Apply left padding to any element using the sidebar horizontal spacing</td>
</tr>
<tr>
<td><code>.sidebar-p-r</code></td>
<td>Apply right padding to any element using the sidebar horizontal spacing</td>
</tr>
<tr>
<td><code>.sidebar-p-t</code></td>
<td>Apply top padding to any element using the sidebar vertical spacing</td>
</tr>
<tr>
<td><code>.sidebar-p-b</code></td>
<td>Apply bottom padding to any element using the sidebar vertical spacing</td>
</tr>
</tbody>
</table>
</div>
<h3>Margin</h3>
<blockquote>
Add any of the following CSS classes to any element within the <code>.sidebar</code> container to apply a vertical or horizontal margin.
</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-m-a</code></td>
<td>Apply margin in all directions using the sidebar horizontal and vertical spacings</td>
</tr>
<tr>
<td><code>.sidebar-m-x</code></td>
<td>Apply horizontal margin to any element using the sidebar horizontal spacing</td>
</tr>
<tr>
<td><code>.sidebar-m-y</code></td>
<td>Apply vertical margin to any element using the sidebar vertical spacing</td>
</tr>
<tr>
<td><code>.sidebar-m-l</code></td>
<td>Apply left margin to any element using the sidebar horizontal spacing</td>
</tr>
<tr>
<td><code>.sidebar-m-r</code></td>
<td>Apply right margin to any element using the sidebar horizontal spacing</td>
</tr>
<tr>
<td><code>.sidebar-m-t</code></td>
<td>Apply top margin to any element using the sidebar vertical spacing</td>
</tr>
<tr>
<td><code>.sidebar-m-b</code></td>
<td>Apply bottom margin to any element using the sidebar vertical spacing</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab-pane" id="spacing-sass">
<blockquote>
The sidebar spacings can be customized with Sass variables.
</blockquote>
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th width="200">Sass variable</th>
<th>Description</th>
<th class="text-xs-center" width="240">Default value</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>$sidebar-spacing</code></td>
<td>Defines the sidebar spacing</td>
<td class="text-xs-center"><code>$sidebar-font-size * 1.25</code></td>
</tr>
<tr>
<td><code>$sidebar-spacing-x</code></td>
<td>Defines the sidebar horizontal spacing</td>
<td class="text-xs-center"><code>$sidebar-spacing</code></td>
</tr>
<tr>
<td><code>$sidebar-spacing-y</code></td>
<td>Defines the sidebar vertical spacing</td>
<td class="text-xs-center"><code>$sidebar-spacing</code></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<h2>Sidebar border</h2>
<div class="card card-block">
<ul class="nav nav-pills">
<li class="nav-item">
<a href="#border-css" data-toggle="pill" class="nav-link active">CSS</a>
</li>
<li class="nav-item">
<a href="#border-sass" data-toggle="pill" class="nav-link">Sass</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="border-css">
<blockquote>
Add any of the following CSS classes to any element within the <code>.sidebar</code> container to apply a <code>1px solid</code> border to any sidebar element using the border color defined by the <code>.sidebar-light</code> or <code>.sidebar-dark</code> skins.
</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-b-a</code></td>
<td>Apply border in all directions using the border color defined by the sidebar skin</td>
</tr>
<tr>
<td><code>.sidebar-b-x</code></td>
<td>Apply horizontal borders to any element using the border color defined by the sidebar skin</td>
</tr>
<tr>
<td><code>.sidebar-b-y</code></td>
<td>Apply vertical borders to any element using the border color defined by the sidebar skin</td>
</tr>
<tr>
<td><code>.sidebar-b-t</code></td>
<td>Apply top border to any element using the border color defined by the sidebar skin</td>
</tr>
<tr>
<td><code>.sidebar-b-b</code></td>
<td>Apply bottom border to any element using the border color defined by the sidebar skin</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab-pane" id="border-sass">
<blockquote>
The border color can be customized with Sass variables.
</blockquote>
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th width="270">Sass variable</th>
<th>Description</th>
<th class="text-xs-center" width="200">Default value</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>$sidebar-dark-border-color</code></td>
<td>Defines the default border color for sidebar elements when using the <code>.sidebar-dark</code> skin</td>
<td class="text-xs-center"><code>rgba(0, 0, 0, .15)</code></td>
</tr>
<tr>
<td><code>$sidebar-light-border-color</code></td>
<td>Defines the default border color for sidebar elements when using the <code>.sidebar-light</code> skin</td>
<td class="text-xs-center"><code>#e5e5e5</code></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
{% endblock %}