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

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

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

{% block page %}
<h1>{{ title }}</h1>
<p>The sidebar layout options work hand in hand with the <a href="position.html">sidebar position</a>, <a href="size.html">sidebar size</a> and <a href="visibility.html">sidebar visibility</a> options and controls the page layout when the sidebar visibility changes by adding and removing CSS classes to the <code>.layout-container</code> element.</p>

<div class="card card-block">
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a href="#usage-data-attributes" data-toggle="pill" class="nav-link active">Data attributes</a>
    </li>
    <li class="nav-item">
      <a href="#usage-css" data-toggle="pill" class="nav-link">CSS</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-md-up.html">md-up</a>
        <a class="dropdown-item" target="_blank" href="../demo/sidebar-sm_lg-up.html">sm + lg-up</a>
        <a class="dropdown-item" target="_blank" href="../demo/sidebar-hidden.html">hidden</a>
      </div>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="usage-data-attributes">
      <blockquote>
        To change the page layout when the sidebar visibility changes, add the <code>data-layout</code> attribute with one or more of the following values separated by a space character, to the <code>.sidebar</code> container. When using the <code>data-layout</code> attribute it's not required to manually add the CSS classes to the <code>.layout-container</code> element.
      </blockquote>
      <div class="table-responsive">
        <table class="table table-sm">
          <thead>
            <tr>
              <th>Value</th>
              <th>Description</th>
              <th width="1">Default</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td colspan="3"><code>none</code></td>
            </tr>
            <tr>
              <td><code>xs</code></td>
              <td colspan="2">Updates the layout when the sidebar visibility changes on screens up to <code>543px</code> wide</td>
            </tr>
            <tr>
              <td><code>sm</code></td>
              <td colspan="2">Updates the layout when the sidebar visibility changes on screens between <code>544px</code> and <code>767px</code> wide</td>
            </tr>
            <tr>
              <td><code>md</code></td>
              <td colspan="2">Updates the layout when the sidebar visibility changes on screens between <code>768px</code> and <code>991px</code> wide</td>
            </tr>
            <tr>
              <td><code>lg</code></td>
              <td colspan="2">Updates the layout when the sidebar visibility changes on screens between <code>992px</code> and <code>1199px</code> wide</td>
            </tr>
            <tr>
              <td><code>xl</code></td>
              <td colspan="2">Updates the layout when the sidebar visibility changes on screens larger than <code>1199px</code> wide</td>
            </tr>
            <tr>
              <td><code>xs-up</code></td>
              <td colspan="2">Updates the layout when the sidebar visibility changes on any screen size</td>
            </tr>
            <tr>
              <td><code>sm-up</code></td>
              <td colspan="2">Updates the layout when the sidebar visibility changes on screens larger than <code>543px</code> wide</td>
            </tr>
            <tr>
              <td><code>md-up</code></td>
              <td>Updates the layout when the sidebar visibility changes on screens larger than <code>767px</code> wide</td>
              <td class="text-xs-center"><i class="material-icons text-success">check_circle</i></td>
            </tr>
            <tr>
              <td><code>lg-up</code></td>
              <td colspan="2">Updates the layout when the sidebar visibility changes on screens larger than <code>991px</code> wide</td>
            </tr>
            <tr>
              <td><code>xl-up</code></td>
              <td colspan="2">Updates the layout when the sidebar visibility changes on screens larger than <code>1199px</code> wide</td>
            </tr>
          </tbody>
        </table>
      </div>

      <h5>Example</h5>
      <p>In the following example, when the sidebar is visible, the <code>.layout-sidebar-l3-md-up</code> CSS class will be added automatically to the <code>.layout-container</code> element, and removed when the sidebar is hidden.</p>

      {% include 'code/sidebar/layout.html' %}
    </div>
    <div class="tab-pane" id="usage-css">
      <blockquote>
        To change the page layout when the sidebar visibility changes without JavaScript, you can add the following CSS classes manually to the <code>.layout-container</code> element.
      </blockquote>
      <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>.layout-sidebar-[l|r][1..3]-xs</code></td>
              <td>Updates the layout when the sidebar visibility changes on screens up to <code>543px</code> wide</td>
            </tr>
            <tr>
              <td><code>.layout-sidebar-[l|r][1..3]-sm</code></td>
              <td>Updates the layout when the sidebar visibility changes on screens between <code>544px</code> and <code>767px</code> wide</td>
            </tr>
            <tr>
              <td><code>.layout-sidebar-[l|r][1..3]-md</code></td>
              <td>Updates the layout when the sidebar visibility changes on screens between <code>768px</code> and <code>991px</code> wide</td>
            </tr>
            <tr>
              <td><code>.layout-sidebar-[l|r][1..3]-lg</code></td>
              <td>Updates the layout when the sidebar visibility changes on screens between <code>992px</code> and <code>1199px</code> wide</td>
            </tr>
            <tr>
              <td><code>.layout-sidebar-[l|r][1..3]-xl</code></td>
              <td>Updates the layout when the sidebar visibility changes on screens larger than <code>1199px</code> wide</td>
            </tr>
            <tr>
              <td><code>.layout-sidebar-[l|r][1..3]-xs-up</code></td>
              <td>Updates the layout when the sidebar visibility changes on any screen size</td>
            </tr>
            <tr>
              <td><code>.layout-sidebar-[l|r][1..3]-sm-up</code></td>
              <td>Updates the layout when the sidebar visibility changes on screens larger than <code>543px</code> wide</td>
            </tr>
            <tr>
              <td><code>.layout-sidebar-[l|r][1..3]-md-up</code></td>
              <td>Updates the layout when the sidebar visibility changes on screens larger than <code>767px</code> wide</td>
            </tr>
            <tr>
              <td><code>.layout-sidebar-[l|r][1..3]-lg-up</code></td>
              <td>Updates the layout when the sidebar visibility changes on screens larger than <code>991px</code> wide</td>
            </tr>
            <tr>
              <td><code>.layout-sidebar-[l|r][1..3]-xl-up</code></td>
              <td>Updates the layout when the sidebar visibility changes on screens larger than <code>1199px</code> wide</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

{% endblock %}