Sidebar
Overview
Use the .bsk-sidebar class to display information that is distinct from main content, but which is shown
next to it.
You must pick a variant for each
sidebar, otherwise it will look strange. I.e. it is not enough to use .bsk-sidebar on its own.
See the Panel component to display information that is distinct from main content, but which is shown within it.
Variants
Default sidebar
Add the .bsk-sidebar-default class a for standard sidebar.
<div class="bsk-row">
<div class="bsk-offset-md-9 bsk-col-md-3">
<aside class="bsk-sidebar bsk-sidebar-default">
Sidebar content
</aside>
</div>
</div>Main content
Hundreds of thousands rich in heavy atoms shores of the cosmic ocean corpus callosum? Trillion adipisci velit star stuff harvesting star light from which we spring network of wormholes eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit great turbulent clouds dream of the mind's eye Vangelis? The sky calls to us colonies, shores of the cosmic ocean? Bits of moving fluff. Cosmic fugue rogue at the edge of forever. Gathered by gravity hearts of the stars at the edge of forever. Explorations dream of the mind's eye laws of physics not a sunrise but a galaxyrise, colonies worldlets with pretty stories for which there's little good evidence.
<div class="bsk-row">
<div class="bsk-col-md-9">
<main>
<h2>Main content</h2>
<p>Hundreds of thousands rich in heavy atoms shores of the cosmic ocean corpus callosum? Trillion adipisci velit
star stuff harvesting star light from which we spring network of wormholes eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit great turbulent clouds dream of the mind's eye Vangelis? The sky calls to us
colonies, shores of the cosmic ocean? Bits of moving fluff. Cosmic fugue rogue at the edge of forever. Gathered
by gravity hearts of the stars at the edge of forever. Explorations dream of the mind's eye laws of physics not a
sunrise but a galaxyrise, colonies worldlets with pretty stories for which there's little good evidence.</p>
</main>
</div>
<div class="bsk-col-md-3">
<aside class="bsk-sidebar bsk-sidebar-default">
<h2>Sidebar content</h2>
<p>Explorations dream of the mind's eye laws of physics not a sunrise but a galaxyrise, colonies worldlets with
pretty stories for which there's little good evidence.</p>
</aside>
</div>
</div>Sidebars without a header, next to content with a header, need to use the .bsk-sidebar-no-heading class.
This adds the same top margin applied to headings and makes the page layout look normal.
Main content
Hundreds of thousands rich in heavy atoms shores of the cosmic ocean corpus callosum? Trillion adipisci velit star stuff harvesting star light from which we spring network of wormholes eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit great turbulent clouds dream of the mind's eye Vangelis? The sky calls to us colonies, shores of the cosmic ocean? Bits of moving fluff. Cosmic fugue rogue at the edge of forever. Gathered by gravity hearts of the stars at the edge of forever. Explorations dream of the mind's eye laws of physics not a sunrise but a galaxyrise, colonies worldlets with pretty stories for which there's little good evidence.
<div class="bsk-row">
<div class="bsk-col-md-9">
<main>
<h2>Main content</h2>
<p>Hundreds of thousands rich in heavy atoms shores of the cosmic ocean corpus callosum? Trillion adipisci velit
star stuff harvesting star light from which we spring network of wormholes eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit great turbulent clouds dream of the mind's eye Vangelis? The sky calls to us
colonies, shores of the cosmic ocean? Bits of moving fluff. Cosmic fugue rogue at the edge of forever. Gathered
by gravity hearts of the stars at the edge of forever. Explorations dream of the mind's eye laws of physics not a
sunrise but a galaxyrise, colonies worldlets with pretty stories for which there's little good evidence.</p>
</main>
</div>
<div class="bsk-col-md-3">
<aside class="bsk-sidebar bsk-sidebar-default bsk-sidebar-no-heading">
<p>Explorations dream of the mind's eye laws of physics not a sunrise but a galaxyrise, colonies worldlets with
pretty stories for which there's little good evidence.</p>
</aside>
</div>
</div>Main content
Hundreds of thousands rich in heavy atoms shores of the cosmic ocean corpus callosum? Trillion adipisci velit star stuff harvesting star light from which we spring network of wormholes eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit great turbulent clouds dream of the mind's eye Vangelis? The sky calls to us colonies, shores of the cosmic ocean? Bits of moving fluff. Cosmic fugue rogue at the edge of forever. Gathered by gravity hearts of the stars at the edge of forever. Explorations dream of the mind's eye laws of physics not a sunrise but a galaxyrise, colonies worldlets with pretty stories for which there's little good evidence.
<div class="bsk-row">
<div class="bsk-col-md-9">
<main>
<h2>Main content</h2>
<p>Hundreds of thousands rich in heavy atoms shores of the cosmic ocean corpus callosum? Trillion adipisci velit
star stuff harvesting star light from which we spring network of wormholes eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit great turbulent clouds dream of the mind's eye Vangelis? The sky calls to us
colonies, shores of the cosmic ocean? Bits of moving fluff. Cosmic fugue rogue at the edge of forever. Gathered
by gravity hearts of the stars at the edge of forever. Explorations dream of the mind's eye laws of physics not a
sunrise but a galaxyrise, colonies worldlets with pretty stories for which there's little good evidence.</p>
</main>
</div>
<div class="bsk-col-md-3">
<aside class="bsk-sidebar bsk-sidebar-default">
<h2>Summary</h2>
<dl class="bsk-dl-lg">
<dt>Term 1</dt>
<dd>Term 1 Value</dd>
<dt>Term 2</dt>
<dd>Term 2 Value</dd>
</dl>
</aside>
</div>
</div>Inverted sidebar
Use the .bsk-sidebar-inverse class to use a darker background for a sidebar. Elements such as
definition lists will be styled appropriately.
<div class="bsk-row">
<div class="bsk-offset-md-9 bsk-col-md-3">
<aside class="bsk-sidebar bsk-sidebar-inverse">
<h2>Sidebar content</h2>
<p>Explorations dream of the mind's eye laws of physics not a sunrise but a galaxyrise</p>
<dl class="bsk-dl-lg">
<dt>Term 1</dt>
<dd>Term 1 Value</dd>
<dt>Term 2</dt>
<dd>Term 2 Value</dd>
</dl>
</aside>
</div>
</div>Sizes
Large sidebar
Add the .bsk-sidebar-lg class to increase the padding inside a sidebar.
Use the grid system to control the width of a sidebar.
Main content
Hundreds of thousands rich in heavy atoms shores of the cosmic ocean corpus callosum? Trillion adipisci velit star stuff harvesting star light from which we spring network of wormholes eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit great turbulent clouds dream of the mind's eye Vangelis? The sky calls to us colonies, shores of the cosmic ocean? Bits of moving fluff. Cosmic fugue rogue at the edge of forever. Gathered by gravity hearts of the stars at the edge of forever. Explorations dream of the mind's eye laws of physics not a sunrise but a galaxyrise, colonies worldlets with pretty stories for which there's little good evidence.
<div class="bsk-row">
<div class="bsk-col-md-9">
<main>
<h2>Main content</h2>
<p>Hundreds of thousands rich in heavy atoms shores of the cosmic ocean corpus callosum? Trillion adipisci velit
star stuff harvesting star light from which we spring network of wormholes eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit great turbulent clouds dream of the mind's eye Vangelis? The sky calls to us
colonies, shores of the cosmic ocean? Bits of moving fluff. Cosmic fugue rogue at the edge of forever. Gathered
by gravity hearts of the stars at the edge of forever. Explorations dream of the mind's eye laws of physics not a
sunrise but a galaxyrise, colonies worldlets with pretty stories for which there's little good evidence.</p>
</main>
</div>
<div class="bsk-col-md-3">
<aside class="bsk-sidebar bsk-sidebar-default bsk-sidebar-lg">
<h2>Sidebar content</h2>
<p>Explorations dream of the mind's eye laws of physics not a sunrise but a galaxyrise, colonies worldlets with
pretty stories for which there's little good evidence.</p>
</aside>
</div>
</div>