---
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 %}