<div class="aligner">
    <div class="aligner-item">Centered!</div>
</div>

<footer role="contentinfo" class="footer">
    <div class="container">
       <div class="row">
           <div class="col-md-6">
               © VisionApps, s.r.o. 2016
               <span class="footer-divider">|</span>
               <a href="#" target="_blank">Contact</a>
           </div>
           <div class="col-md-6">
               <a href="http://www.visionapps.cz" target="_blank" class="footer-author" title="Created by VisionApps">
                   <img src="assets/images/visionapps.svg" width="90" height="16" alt="VisionApps" />
               </a>
           </div>
       </div><!-- .row -->
    </div><!-- .container -->
</footer>

<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 -->

<div class="row offset-bottom">
    <div class="col-sm-6">
        <h4>Left Offset</h4>
        <p>
            There is a gap between me and the icon.
            <span class="glyphicon glyphicon-tree-conifer offset-left" aria-hidden="true"></span>
        </p>
        <p>
            This gap is a bit larger.
            <span class="glyphicon glyphicon-tree-conifer offset-left-large" aria-hidden="true"></span>
        </p>
    </div>
    <div class="col-sm-6">
        <h4>Right Offset</h4>
        <p>
            <span class="glyphicon glyphicon-tree-deciduous offset-right" aria-hidden="true"></span>
            There is a gap between me and the icon.
        </p>
        <p>
            <span class="glyphicon glyphicon-tree-deciduous offset-right-large" aria-hidden="true"></span>
            This gap is a bit larger.
        </p>
    </div>
</div>
<div class="row">
    <div class="col-sm-6">
        <h4>Top Offset</h4>
        <div class="offset-top-small">I have small top spacing.</div>
        <div class="offset-top">I have some regular top spacing.</div>
        <div class="offset-top-large">I have big top spacing!</div>
        <div class="offset-top-larger">I have HUGE top spacing!</div>
        <p class="offset-top-none">I have no top spacing :/.</p>
    </div>
    <div class="col-sm-6">
        <h4>Bottom Offset</h4>
        <div class="offset-bottom-small">I have small bottom spacing.</div>
        <div class="offset-bottom">I have some regular bottom spacing. Just like a real paragraph, weehoo!</div>
        <div class="offset-bottom-large">I have big bottom spacing!</div>
        <div class="offset-bottom-larger">I have HUGE bottom spacing!</div>
        <p class="offset-bottom-none">I have no bottom spacing :/.</p>
    </div>
</div>

<div class="offset-bottom-xs-max">I have extra bottom spacing on extra small screens (xs).</div>
<div class="offset-bottom-sm-max">I have extra bottom spacing on small screens (sm).</div>
<div class="offset-bottom-large-xs-max">I have big bottom spacing on extra small screens (xs).</div>
<div class="offset-bottom-large-sm-max">I have big bottom spacing on small screens (sm).</div>
<div class="offset-bottom-larger-xs-max">I have HUGE bottom spacing on extra small screens (xs).</div>
<div class="offset-bottom-larger-sm-max">I have HUGE bottom spacing on small screens (sm).</div>

<section class="section-header">
    <div class="container">
        <h1 class="section-header-title">Page Title</h1>
        <h2 class="section-header-subtitle">Subtitle</h2>
    </div><!-- .container -->
</section>
<section class="section-header section-header-condensed">
    <div class="container">
        <h1 class="section-header-title">Condensed Header Section</h1>
    </div><!-- .container -->
</section>
<section class="section-content">
    <div class="container">
        <p>This is the content of the page.</p>
    </div><!-- .container -->
</section>
<section class="section-primary">
    <div class="container">
        <h1>Primary Section</h1>
        <p>This will recolor section to primary color. Works both with header and content sections.</p>
    </div><!-- .container -->
</section>

<body class="site">
    <header role="banner" class="site-header">
        <div class="kss__example-box">Header</div>
    </header>
    <main role="main" class="site-content">
        <div class="kss__example-box">Main Content</div>
    </main>
    <footer role="contentinfo" class="site-footer">
        <div class="kss__example-box">Sticky Footer</div>
    </footer>
</body>