<h1>Responsive Headline 1</h1>
<h2>Responsive Headline 2</h2>
<h3>Responsive Headline 3</h3>
<h4>Responsive Headline 4</h4>
<h5>Responsive Headline 5</h5>
<h6>Responsive Headline 6</h6>
              

<p>
  Lorem ipsum dolor sit amet, consectetur sample link adipisicing elit. Dolores explicabo architecto perferendis ut nemo! Sapiente, eum quidem placeat, blanditiis, maiores, labore.
</p>
<p>
  <a href="#">Sample link</a>
</p>
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><u>This line of text will render as underlined</u></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
              

<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
</ul>
              

<ol>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
</ol>
              

<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
</ul>
              

<ul class="list-inline">
  <li class="list-inline__item">Lorem ipsum</li>
  <li class="list-inline__item">Phasellus iaculis</li>
  <li class="list-inline__item">Nulla volutpat</li>
</ul>
              

<div class="row">
  <div class="col-sm">
    One of three columns
  </div>
  <div class="col-sm">
    One of three columns
  </div>
  <div class="col-sm">
    One of three columns
  </div>
</div>
              

@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }

@include media-breakpoint-between(md, xl) { ... }
              

<p>
  <a class="js-toggle" href="#example">Toggle element</a>
</p>
<p id="example" class="is-hidden">
  Here's some text we want to toggle visibility of. Let's do it!
</p>
              

<div class="collapse collapse-more-1">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident doloribus, eos rem. Nostrum possimus reiciendis, neque iure repudiandae explicabo hic veritatis ad, deleniti provident soluta, facere, voluptates tenetur quae. Maiores!
</div>
<p>
  <a
    href="#"
    data-toggle="collapse"
    data-target=".collapse.collapse-more-1"
    data-text-closed="Read More"
    data-text-opened="Read Less">Read More</a>
</p>
              

<a href="#buttons" data-scroll>Scroll to buttons section</a>
<div id="buttons">Introduction</div>
...
<a href="#" data-scroll="0">Scroll to top</a>
              

<button href="#" class="btn btn-sm">Small Button</button>
<button href="#" class="btn btn-sm btn-green">Small Button</button>
<button href="#" class="btn btn-sm btn-disabled">Small Button</button>

<button href="#" class="btn">Default Button</button>
<button href="#" class="btn btn-green">Default Button</button>
<button href="#" class="btn btn-disabled">Default Button</button>

<button href="#" class="btn btn-lg">Large Button</button>
<button href="#" class="btn btn-green btn-lg">Large Button</button>
<button href="#" class="btn btn-disabled btn-lg">Large Button</button>
              

<a href="#" class="btn btn-secondary btn-sm">Small Button</a>
<a href="#" class="btn btn-secondary btn-sm btn-green">Small Button</a>
<a href="#" class="btn btn-secondary btn-sm btn-disabled">Small Button</a>

<a href="#" class="btn btn-secondary">Default Button</a>
<a href="#" class="btn btn-secondary btn-green">Default Button</a>
<a href="#" class="btn btn-secondary btn-disabled">Default Button</a>

<a href="#" class="btn btn-secondary btn-lg">Large Button</a>
<a href="#" class="btn btn-secondary btn-green btn-lg">Large Button</a>
<a href="#" class="btn btn-secondary btn-disabled btn-lg">Large Button</a>
              

<a href="#" class="btn btn-secondary btn-sm">Small Button</a>
<a href="#" class="btn btn-secondary btn-sm btn-green">Small Button</a>
<a href="#" class="btn btn-secondary btn-sm btn-disabled">Small Button</a>

<a href="#" class="btn btn-secondary">Default Button</a>
<a href="#" class="btn btn-secondary btn-green">Default Button</a>
<a href="#" class="btn btn-secondary btn-disabled">Default Button</a>

<a href="#" class="btn btn-secondary btn-lg">Large Button</a>
<a href="#" class="btn btn-secondary btn-green btn-lg">Large Button</a>
<a href="#" class="btn btn-secondary btn-disabled btn-lg">Large Button</a>
              

<div class="dropdown">
    <button
            class="btn btn-secondary dropdown-toggle"
            type="button"
            id="dropdownMenuButton"
            data-toggle="dropdown"
            aria-haspopup="true"
            aria-expanded="false"
    >
        Dropdown button
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</div>
              

<label class="labelContainer">
    One
    <input type="checkbox" checked="checked">
    <span class="checkmark"></span>
</label>
<label class="labelContainer">
    <input type="checkbox" checked="checked">
    <span class="checkmark"></span>
    Two
</label>