Bootstrap grid is used. For easier development, there are .content
and
.sidebar
shortcuts for the most common layout components so you do not have to remember the exact classes
(.col-md-9
and .col-md-3
).
Example
Right sidebar:
This is the content.
Left sidebar:
This is the content.
Reverse column order:
This is the content.
<p><strong>Right sidebar:</strong></p>
<div class="row">
<div class="content">
<p class="kss__example-box">This is the content.</p>
</div>
<div class="sidebar">
<p class="kss__example-box">And I am sidebar!</p>
</div>
</div><!-- .row -->
<p><strong>Left sidebar:</strong></p>
<div class="row">
<div class="sidebar">
<p class="kss__example-box">I am sidebar!</p>
</div>
<div class="content">
<p class="kss__example-box">This is the content.</p>
</div>
</div><!-- .row -->
<p><strong>Reverse column order:</strong></p>
<div class="row row-reverse">
<div class="sidebar">
<p class="kss__example-box">I am sidebar that is (on the) right and goes mobile first!</p>
</div>
<div class="content">
<p class="kss__example-box">This is the content.</p>
</div>
</div><!-- .row -->