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

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

---
title: Sidebar skins
slug: sidebar/skins
path: ../
---
{% extends "layouts/default.html" %}

{% block page %}
<h1>{{ title }}</h1>
<p>There are two base skin variants that you get out of the box for making a sidebar with a light background color and dark text color or a sidebar with dark background color and light text color.</p>

<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-light</code></td>
        <td>Defines the basic style for a sidebar with a light background color and dark text color.</td>
      </tr>
      <tr>
        <td><code>.sidebar-dark</code></td>
        <td>Defines the basic style for a sidebar with a dark background color and light text color.</td>
      </tr>
    </tbody>
  </table>
</div>

<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-light.html">Light skin</a>
        <a class="dropdown-item" target="_blank" href="../demo/sidebar-dark.html">Dark skin</a>
      </div>
    </li>
  </ul>
  {% include 'code/sidebar/skins.html' %}
</div>

{% endblock %}