New This website is new, your feedback will help us to improve it.

Sidebar

Overview

Use the classes bsk-main-with-sidebar and bsk-sidebar to create a layout with a sidebar

Variants

Default sidebar

Main

Main content

<section>
  <div class="container mx-auto px-6 fhd:px-16">
      <div class="flex flex-col md:flex-row gap-6">
          <!-- Main content -->
          <main class="bsk-main-with-sidebar px-8 py-4">
              <h2>Main</h2>
              <p>Main content</p>
          </main>
          <!-- Sidebar -->
          <aside class="bsk-sidebar p-8">
              <div>
                  <h2>Sidebar</h2>
                  <p>Sidebar content</p>
              </div>
          </aside>
      </div>
  </div>
</section>

Main

Main content

<section>
  <div class="container mx-auto px-6 fhd:px-16">
      <div class="flex flex-col md:flex-row gap-6">
          <!-- Sidebar -->
          <aside class="bsk-sidebar p-8">
              <div>
                  <h2>Sidebar</h2>
                  <p>Sidebar content</p>
              </div>
          </aside>
          <!-- Main content -->
          <main class="bsk-main-with-sidebar px-8 py-4">
              <h2>Main</h2>
              <p>Main content</p>
          </main>
      </div>
  </div>
</section>

Inverted sidebar

Large sidebar

Main

Main content

<section>
  <div class="container mx-auto px-6 fhd:px-16">
      <div class="flex flex-col md:flex-row gap-6">
          <!-- Main content -->
          <main class="bsk-main-with-sidebar-lg px-8 py-4">
              <h2>Main</h2>
              <p>Main content</p>
          </main>
          <!-- Sidebar -->
          <aside class="bsk-sidebar p-8">
              <div>
                  <h2>Sidebar</h2>
                  <p>Sidebar content</p>
              </div>
          </aside>
      </div>
  </div>
</section>

Large left sidebar

Main

Main content

<section>
  <div class="container mx-auto px-6 fhd:px-16">
      <div class="flex flex-col md:flex-row gap-6">
          <!-- Sidebar -->
          <aside class="bsk-sidebar p-8">
              <div>
                  <h2>Sidebar</h2>
                  <p>Sidebar content</p>
              </div>
          </aside>
          <!-- Main content -->
          <main class="bsk-main-with-sidebar-lg px-8 py-4">
              <h2>Main</h2>
              <p>Main content</p>
          </main>
      </div>
  </div>
</section>