bootstrap-layout/docs/src/html/pages/sidebar/text.html

Bootstrap layout with sidebar navigation, sidebar skins, sidebar transition, custom scrollbars, sidebar menus and other advanced features and utilities

---
title: Sidebar text
slug: sidebar/text
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="#text-usage" data-toggle="pill" class="nav-link active">Usage</a>
    </li>
    <li class="nav-item">
      <a href="#text-css" data-toggle="pill" class="nav-link">CSS</a>
    </li>
    <li class="nav-item">
      <a href="#text-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-text-light.html">Sidebar light</a>
        <a class="dropdown-item" target="_blank" href="../demo/sidebar-text-dark.html">Sidebar dark</a>
      </div>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="text-usage">
      <blockquote>
        The sidebar text is styled by default by the <code>.sidebar-light</code> or <code>.sidebar-dark</code> skins and doesn't require any extra class, however for those occasions when you need to be explicit, add the <code>.sidebar-text</code> class to any element within the <code>.sidebar</code> container, to force the text style on the element.
      </blockquote>
      {% include 'code/sidebar/text.html' %}
    </div>
    <div class="tab-pane" id="text-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-text</code></td>
              <td>Applies the sidebar text style defined by the sidebar skin</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="tab-pane" id="text-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-font-size</code></td>
              <td>Defines the base font size for the sidebar text in <code>px</code></td>
            </tr>
            <tr>
              <td><code>$sidebar-dark-text-color</code></td>
              <td>Defines the sidebar text color when using the <code>.sidebar-dark</code> skin</td>
            </tr>
            <tr>
              <td><code>$sidebar-light-text-color</code></td>
              <td>Defines the sidebar text color when using the <code>.sidebar-light</code> skin</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<h2>Sidebar links</h2>
<div class="card card-block">
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a href="#links-usage" data-toggle="pill" class="nav-link active">Usage</a>
    </li>
    <li class="nav-item">
      <a href="#links-css" data-toggle="pill" class="nav-link">CSS</a>
    </li>
    <li class="nav-item">
      <a href="#links-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-text-light.html">Sidebar light</a>
        <a class="dropdown-item" target="_blank" href="../demo/sidebar-text-dark.html">Sidebar dark</a>
      </div>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="links-usage">
      <blockquote>
        Add the <code>.sidebar-link</code> class to any element within the <code>.sidebar</code> container, to apply the sidebar link text style defined by the <code>.sidebar-light</code> or <code>.sidebar-dark</code> skins. 
      </blockquote>
      {% include 'code/sidebar/link.html' %}
    </div>
    <div class="tab-pane" id="links-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-link</code></td>
              <td>Applies the sidebar link style defined by the sidebar skin</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="tab-pane" id="links-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-link-color</code></td>
              <td>Defines the sidebar link color when using the <code>.sidebar-link</code> class and the <code>.sidebar-dark</code> skin</td>
            </tr>
            <tr>
              <td><code>$sidebar-light-link-color</code></td>
              <td>Defines the sidebar text color when using the <code>.sidebar-link</code> class and the <code>.sidebar-light</code> skin</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

{% endblock %}