bootstrap-layout
Version:
Bootstrap layout with sidebar navigation, sidebar skins, sidebar transition, custom scrollbars, sidebar menus and other advanced features and utilities
253 lines (246 loc) • 9.43 kB
HTML
---
title: Sidebar brand
slug: sidebar/brand
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-toggle="pill" class="nav-link active">Usage</a>
</li>
<li class="nav-item">
<a href="#css" data-toggle="pill" class="nav-link">CSS</a>
</li>
<li class="nav-item">
<a href="#sass" data-toggle="pill" class="nav-link">Sass</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-brand-light.html">Sidebar light</a>
<a class="dropdown-item" target="_blank" href="../demo/sidebar-brand-dark.html">Sidebar dark</a>
</div>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="usage">
<blockquote>
The <code>.sidebar-brand</code> class can be used on any element, but with a few differences depending on <strong>where</strong> it's used. When used as a direct child element of the <code>.sidebar</code> container, the <code>.sidebar-brand</code> element will have a fixed height, matching the height of the navbar by default.
</blockquote>
{% include 'code/sidebar-brand/basic.html' %}
</div>
<div class="tab-pane" id="css">
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th width="240">CSS Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.sidebar-brand</code></td>
<td>Applies the basic style of the sidebar brand</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab-pane" id="sass">
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th width="240">Sass variable</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>$sidebar-brand-size</code></td>
<td>Defines the sidebar brand font size</td>
</tr>
<tr>
<td><code>$sidebar-brand-weight</code></td>
<td>Defines the sidebar brand font weight</td>
</tr>
<tr>
<td><code>$sidebar-dark-brand-color</code></td>
<td>Defines the sidebar brand text color when using the <code>.sidebar-dark</code> skin</td>
</tr>
<tr>
<td><code>$sidebar-light-brand-color</code></td>
<td>Defines the sidebar brand text color when using the <code>.sidebar-light</code> skin</td>
</tr>
<tr>
<td><code>$sidebar-brand-height</code></td>
<td>Defines the height of the <code>.sidebar-brand</code> when used as a direct child element of the <code>.sidebar</code> container</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<h2>Wrapper</h2>
<blockquote>
Wrap the <code>.sidebar-brand</code> element into another element inside the <code>.sidebar</code> container to use a fluid height and group the sidebar brand with other elements.
</blockquote>
<div class="card card-block">
<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-brand-light.html">Sidebar light</a>
<a class="dropdown-item" target="_blank" href="../demo/sidebar-brand-dark.html">Sidebar dark</a>
</div>
</li>
</ul>
{% include 'code/sidebar-brand/wrapper.html' %}
</div>
<h2>Background</h2>
<div class="card card-block">
<ul class="nav nav-pills">
<li class="nav-item">
<a href="#bg-usage" data-toggle="pill" class="nav-link active">Usage</a>
</li>
<li class="nav-item">
<a href="#bg-css" data-toggle="pill" class="nav-link">CSS</a>
</li>
<li class="nav-item">
<a href="#bg-sass" data-toggle="pill" class="nav-link">Sass</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-brand-light.html">Sidebar light</a>
<a class="dropdown-item" target="_blank" href="../demo/sidebar-brand-dark.html">Sidebar dark</a>
</div>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="bg-usage">
<blockquote>
Apply a background color defined by the <code>.sidebar-light</code> or <code>.sidebar-dark</code> skins to the <code>.sidebar-brand</code> element or a wrapper.
</blockquote>
{% include 'code/sidebar-brand/bg.html' %}
</div>
<div class="tab-pane" id="bg-css">
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th width="240">CSS Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.sidebar-brand-bg</code></td>
<td>Applies the sidebar brand background color defined by the sidebar skin. Can be applied directly to the <code>.sidebar-brand</code> element or a wrapper.</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab-pane" id="bg-sass">
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th width="240">Sass variable</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>$sidebar-dark-brand-bg</code></td>
<td>Defines the sidebar brand background color when using <code>.sidebar-brand-bg</code> and the <code>.sidebar-dark</code> skin</td>
</tr>
<tr>
<td><code>$sidebar-light-brand-bg</code></td>
<td>Defines the sidebar brand background color when using <code>.sidebar-brand-bg</code> and the <code>.sidebar-light</code> skin</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<h2>Border</h2>
<div class="card card-block">
<ul class="nav nav-pills">
<li class="nav-item">
<a href="#border-usage" data-toggle="pill" class="nav-link active">Usage</a>
</li>
<li class="nav-item">
<a href="#border-css" data-toggle="pill" class="nav-link">CSS</a>
</li>
<li class="nav-item">
<a href="#border-sass" data-toggle="pill" class="nav-link">Sass</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-brand-light.html">Sidebar light</a>
<a class="dropdown-item" target="_blank" href="../demo/sidebar-brand-dark.html">Sidebar dark</a>
</div>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="border-usage">
<blockquote>
Apply a <code>1px solid</code> border bottom with the color defined by the <code>.sidebar-light</code> or <code>.sidebar-dark</code> skins to the <code>.sidebar-brand</code> element or a wrapper.
</blockquote>
{% include 'code/sidebar-brand/border.html' %}
</div>
<div class="tab-pane" id="border-css">
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th width="320">CSS Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.sidebar-brand-border</code></td>
<td>Applies a <code>1px solid</code> border bottom to the sidebar brand element using the border color defined by the sidebar skin. Can be applied directly to the <code>.sidebar-brand</code> element or a wrapper.</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab-pane" id="border-sass">
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th width="320">Sass variable</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>$sidebar-dark-brand-border-color</code></td>
<td>Defines the sidebar brand border color when using <code>.sidebar-brand-border</code> and the <code>.sidebar-dark</code> skin</td>
</tr>
<tr>
<td><code>$sidebar-light-brand-border-color</code></td>
<td>Defines the sidebar brand border color when using <code>.sidebar-brand-border</code> and the <code>.sidebar-light</code> skin</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
{% endblock %}