Sidebars
Sidebars are great for related or accompanying information to the main content.
Left Sidebar
Sidebars are designed to give background colour that stretches the full width of the browser window. When in mobile responsive view, the sidebar drops below the content and becomes full width.
<section class="sidebar">
<div class="container">
<div class="row">
<div class="col-lg-8 py-4">
<h3>Left Sidebar</h3>
<p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</p>
</div>
<div class="col-lg-4 sidebar-bg sidebar-bg-right py-4">
<h4 class="sidebar-title">Sidebar Title</h4>
<div class="card card-shadow">
<div class="card-body">
<p class="card-text">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</p>
</div>
</div>
</div>
</div>
</div>
</section>Right Sidebar
Sidebars can be designed to be on the left or the right by changing the column order and the class .sidebar-right or .sidebar-left
<section class="sidebar">
<div class="container">
<div class="row">
<div class="col-lg-8 py-4 order-2">
<h3>Right Sidebar</h3>
<p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</p>
</div>
<div class="col-lg-4 sidebar-bg sidebar-bg-left py-4">
<h4 class="sidebar-title">Sidebar Title</h4>
<div class="card card-shadow">
<div class="card-body">
<p class="card-text">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</p>
</div>
</div>
</div>
</div>
</div>
</section>Offset Sidebar
Sidebars can be offset slightly to give a visually interesting ‘floating’ effect to cards.
<section class="sidebar">
<div class="container">
<div class="row">
<div class="col-lg-8 py-4">
<h3>Offset Sidebar</h3>
<p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</p>
</div>
<div class="col-lg-4 sidebar-bg sidebar-bg-right sidebar-bg-offset py-4">
<h4 class="sidebar-title text-right">Sidebar Title</h4>
<div class="card card-shadow">
<div class="card-body">
<p class="card-text">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</p>
</div>
</div>
</div>
</div>
</div>
</section>