Typography

Headings</>

<h1>h1. Bootstrap heading
  <small class="text-muted">Secondary text</small>
</h1>
<h2>h2. Bootstrap heading
  <small class="text-muted">Secondary text</small>
</h2>
<h3>h3. Bootstrap heading
  <small class="text-muted">Secondary text</small>
</h3>
<h4>h4. Bootstrap heading
  <small class="text-muted">Secondary text</small>
</h4>
<h5>h5. Bootstrap heading
  <small class="text-muted">Secondary text</small>
</h5>
<h6>h6. Bootstrap heading
  <small class="text-muted">Secondary text</small>
</h6>

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text

h6. Bootstrap heading Secondary text

Display headings</>

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

Display 1

Display 2

Display 3

Display 4

Paragraph</>

<p>
  Lorem ipsum dolor sit amet, ad tibique blandit qui, error zril eleifend ut vel. Et paulo labores molestiae has, ei eos virtute dolorem.
</p>

<!-- Lead -->
<p class="lead">
  Lorem ipsum dolor sit amet, ad tibique blandit qui, error zril eleifend ut vel. Et paulo labores molestiae has, ei eos virtute dolorem.
</p>

Lorem ipsum dolor sit amet, ad tibique blandit qui, error zril eleifend ut vel. Et paulo labores molestiae has, ei eos virtute dolorem.

Inline text elements</>

<!-- Marked text -->
<p>
  You can use the mark tag to
  <mark>highlight</mark> text.
</p>

<!-- Deleted text -->
<p>
  <del>This line of text is meant to be treated as deleted text.</del>
</p>

<!-- Strikethrough text -->
<p>
  <s>This line of text is meant to be treated as no longer accurate.</s>
</p>

<!-- Underlined text -->
<p>
  <u>This line of text will render as underlined</u>
</p>

<!-- Small text -->
<p>
  <small>This line of text is meant to be treated as fine print.</small>
</p>

<!-- Bold -->
<p>
  <strong>rendered as bold text</strong>
</p>

<!-- Italics -->
<p>
  <em>rendered as italicized text</em>
</p>

You can use the mark tag to highlight text.

~~This line of text is meant to be treated as deleted text.~~

~~This line of text is meant to be treated as no longer accurate.~~

This line of text will render as underlined

This line of text is meant to be treated as fine print.

rendered as bold text

rendered as italicized text

Abbreviations</>

<!-- Basic abbreviation -->
<p>
  An abbreviation of the word attribute is
  <abbr title="attribute">attr</abbr>.
</p>

<!-- Initialism -->
<p>
  <abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.
</p>

An abbreviation of the word attribute is attr.

HTML is the best thing since sliced bread.

Addresses</>

<address>
  <strong>Twitter, Inc.</strong>
  <br> 1355 Market Street, Suite 900
  <br> San Francisco, CA 94103
  <br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong>
  <br>
  <a href="mailto:#">first.last@example.com</a>
</address>

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Full Name
first.last@example.com

Blockquotes</>

<!-- Default blockquote -->
<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

<!-- Blockquote options -->
<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in
    <cite title="Source Title">Source Title</cite>
  </footer>
</blockquote>

<blockquote class="blockquote text-center">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in
    <cite title="Source Title">Source Title</cite>
  </footer>
</blockquote>

<blockquote class="blockquote text-right">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in
    <cite title="Source Title">Source Title</cite>
  </footer>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lists</>

<!-- Unordered -->
<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

<!-- Ordered -->
<ol>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit</li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ol>

<!-- Unstyled -->
<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

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

<!-- Description -->
<dl>
  <dt>Description lists</dt>
  <dd>A description list is perfect for defining terms.</dd>
  <dt>Euismod</dt>
  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
  <dd>Donec id elit non mi porta gravida at eget metus.</dd>
  <dt>Malesuada porta</dt>
  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>

<!-- Horizontal description -->
<dl class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>

  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum
Phasellus iaculis
Nulla volutpat

Description lists: A description list is perfect for defining terms.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

Description lists

A description list is perfect for defining terms.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Truncated term is truncated

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Nesting

Nested definition list: Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

Code</>

<!-- Inline -->
<p>
  For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</p>

<!-- User input -->
<p>
  To switch directories, type <kbd>cd</kbd> followed by the name of the directory.
  <br> To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
</p>

<!-- Code block -->
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

<!-- Variables -->
<p>
  <var>y</var> = <var>m</var><var>x</var> + <var>b</var>
</p>

<!-- Sample output -->
<p>
  <samp>This text is meant to be treated as sample output from a computer program.</samp>
</p>

For example, <section> should be wrapped as inline.

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

<p>Sample text here...</p>

y = mx + b

This text is meant to be treated as sample output from a computer program.

Jumbotron</>

<div class="jumbotron">
  <h1 class="display-3">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <p class="lead">
    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
  </p>
</div>

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

It uses utility classes for typography and spacing to space content out within the larger container.

Learn more

Figures</>

<figure class="figure" style="max-width: 25rem">
  <img src="assets/img/bg/1.jpg" class="figure-img img-fluid" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

A generic square placeholder image with rounded corners in a figure. — A caption for the above image.

Utilities

See more: https://getbootstrap.com/docs/4.0/utilities

Border color</>

<div>
  <span class="bg-lighter border-primary"></span>
  <span class="bg-lighter border-secondary"></span>
  <span class="bg-lighter border-success"></span>
  <span class="bg-lighter border-danger"></span>
  <span class="bg-lighter border-warning"></span>
  <span class="bg-lighter border-info"></span>
  <span class="bg-lighter border-light"></span>
  <span class="bg-lighter border-dark"></span>
  <span class="bg-lighter border-white"></span>
  <span class="bg-lighter border-transparent"></span>
</div>

Text color</>

<div>
  <p>
    <a href="#" class="text-primary">Primary link</a>
  </p>
  <p>
    <a href="#" class="text-secondary">Secondary link</a>
  </p>
  <p>
    <a href="#" class="text-success">Success link</a>
  </p>
  <p>
    <a href="#" class="text-danger">Danger link</a>
  </p>
  <p>
    <a href="#" class="text-warning">Warning link</a>
  </p>
  <p>
    <a href="#" class="text-info">Info link</a>
  </p>
  <p>
    <a href="#" class="text-dark">Dark link</a>
  </p>
  <p>
    <a href="#" class="text-muted">Muted link</a>
  </p>
  <p>
    <a href="#" class="text-light">Light link</a>
  </p>
  <p>
    <a href="#" class="text-lighter">Lighter link</a>
  </p>
  <p>
    <a href="#" class="text-lightest">Lightest link</a>
  </p>
</div>

Background color</>

<div>
  <div class="row mx-0">
    <a href="#" class="d-block col-sm bg-primary text-white"><code>.bg-primary</code></a>
    <a href="#" class="d-block col-sm bg-primary-dark text-white"><code>.bg-primary-dark</code></a>
    <a href="#" class="d-block col-sm bg-primary-darker text-white"><code>.bg-primary-darker</code></a>

    <div class="w-100"></div>

    <a href="#" class="d-block col-sm bg-secondary text-white"><code>.bg-secondary</code></a>
    <a href="#" class="d-block col-sm bg-secondary-dark text-white"><code>.bg-secondary-dark</code></a>
    <a href="#" class="d-block col-sm bg-secondary-darker text-white"><code>.bg-secondary-darker</code></a>
  </div>
  <div class="row mx-0">
    <a href="#" class="d-block col-sm bg-success text-white"><code>.bg-success</code></a>
    <a href="#" class="d-block col-sm bg-success-dark text-white"><code>.bg-success-dark</code></a>
    <a href="#" class="d-block col-sm bg-success-darker text-white"><code>.bg-success-darker</code></a>
  </div>
  <div class="row mx-0">
    <a href="#" class="d-block col-sm bg-info text-white"><code>.bg-info</code></a>
    <a href="#" class="d-block col-sm bg-info-dark text-white"><code>.bg-info-dark</code></a>
    <a href="#" class="d-block col-sm bg-info-darker text-white"><code>.bg-info-darker</code></a>
  </div>
  <div class="row mx-0">
    <a href="#" class="d-block col-sm bg-warning text-white"><code>.bg-warning</code></a>
    <a href="#" class="d-block col-sm bg-warning-dark text-white"><code>.bg-warning-dark</code></a>
    <a href="#" class="d-block col-sm bg-warning-darker text-white"><code>.bg-warning-darker</code></a>
  </div>
  <div class="row mx-0">
    <a href="#" class="d-block col-sm bg-danger text-white"><code>.bg-danger</code></a>
    <a href="#" class="d-block col-sm bg-danger-dark text-white"><code>.bg-danger-dark</code></a>
    <a href="#" class="d-block col-sm bg-danger-darker text-white"><code>.bg-danger-darker</code></a>
  </div>
  <div class="row mx-0">
    <a href="#" class="d-block col-sm bg-light text-dark"><code>.bg-light</code></a>
  </div>
  <div class="row mx-0">
    <a href="#" class="d-block col-sm bg-lighter text-dark"><code>.bg-lighter</code></a>
  </div>
  <div class="row mx-0">
    <a href="#" class="d-block col-sm bg-lightest text-dark"><code>.bg-lightest</code></a>
  </div>
  <div class="row mx-0">
    <a href="#" class="d-block col-sm bg-dark text-white"><code>.bg-dark</code></a>
  </div>
  <div class="row mx-0">
    <a href="#" class="d-block col-sm bg-white text-dark"><code>.bg-white</code></a>
  </div>
  <div class="row mx-0">
    <a href="#" class="d-block col-sm bg-transparent text-dark"><code>.bg-transparent</code></a>
  </div>
</div>

Opacity</>

<div class="bg-dark opacity-25 p-3"><code class="bg-transparent text-white">.opacity-25</code></div>
<div class="bg-dark opacity-50 p-3"><code class="bg-transparent text-white">.opacity-50</code></div>
<div class="bg-dark opacity-75 p-3"><code class="bg-transparent text-white">.opacity-75</code></div>
<div class="bg-dark opacity-100 p-3"><code class="bg-transparent text-white">.opacity-100</code></div>

.opacity-25

.opacity-50

.opacity-75

.opacity-100

Text sizing</>

<!-- Tiny -->
<p class="text-tiny">
  <code>.text-tiny</code> - Tiny text.
</p>

<!-- Big -->
<p class="text-big">
  <code>.text-big</code> - Big text.
</p>

<!-- Large -->
<p class="text-large">
  <code>.text-large</code> - Large text.
</p>

<!-- Extra large -->
<p class="text-xlarge">
  <code>.text-xlarge</code> - Extra large.
</p>

.text-tiny - Tiny text.

.text-big - Big text.

.text-large - Large text.

.text-xlarge - Extra large.

Font weight</>

<p>
  <code>.font-weight-bolder</code> -
  <span class="font-weight-bolder">Bolder text.</span>
</p>
<p>
  <code>.font-weight-semibold</code> -
  <span class="font-weight-semibold">Semibold text.</span>
</p>
<p>
  <code>.font-weight-light</code> -
  <span class="font-weight-light">Light text.</span>
</p>

.font-weight-bolder - Bolder text.

.font-weight-semibold - Semibold text.

.font-weight-light - Light text.

Line height</>

<p class="line-height-1">
  <code>.line-height-1</code> - line-height: 1
  <br> Nullam ornare diam sed arcu interdum condimentum. Maecenas pharetra nibh interdum, laoreet ex et, dapibus lorem. Pellentesque a justo eu dolor tempus luctus. Suspendisse nec nisl quis ligula volutpat scelerisque vel a mi. Vivamus et velit elit.
  Aliquam consequat orci id arcu venenatis tempus. Donec varius convallis enim, ac auctor libero euismod eu. Nam rutrum molestie diam et sagittis. Integer consequat vestibulum interdum. Integer consequat scelerisque lectus, et viverra massa aliquam
  at. Phasellus consequat faucibus justo eu pulvinar. Maecenas tincidunt non urna in luctus. Vivamus et tellus tortor. In eleifend euismod imperdiet.
</p>

<p class="line-height-condenced">
  <code>.line-height-condenced</code> - line-height: 1.3
  <br> Nullam ornare diam sed arcu interdum condimentum. Maecenas pharetra nibh interdum, laoreet ex et, dapibus lorem. Pellentesque a justo eu dolor tempus luctus. Suspendisse nec nisl quis ligula volutpat scelerisque vel a mi. Vivamus et velit elit.
  Aliquam consequat orci id arcu venenatis tempus. Donec varius convallis enim, ac auctor libero euismod eu. Nam rutrum molestie diam et sagittis. Integer consequat vestibulum interdum. Integer consequat scelerisque lectus, et viverra massa aliquam
  at. Phasellus consequat faucibus justo eu pulvinar. Maecenas tincidunt non urna in luctus. Vivamus et tellus tortor. In eleifend euismod imperdiet.
</p>

<p class="line-height-inherit">
  <code>.line-height-inherit</code> - line-height: inherit
  <br> Nullam ornare diam sed arcu interdum condimentum. Maecenas pharetra nibh interdum, laoreet ex et, dapibus lorem. Pellentesque a justo eu dolor tempus luctus. Suspendisse nec nisl quis ligula volutpat scelerisque vel a mi. Vivamus et velit elit.
  Aliquam consequat orci id arcu venenatis tempus. Donec varius convallis enim, ac auctor libero euismod eu. Nam rutrum molestie diam et sagittis. Integer consequat vestibulum interdum. Integer consequat scelerisque lectus, et viverra massa aliquam
  at. Phasellus consequat faucibus justo eu pulvinar. Maecenas tincidunt non urna in luctus. Vivamus et tellus tortor. In eleifend euismod imperdiet.
</p>

.line-height-1 - line-height: 1
Nullam ornare diam sed arcu interdum condimentum. Maecenas pharetra nibh interdum, laoreet ex et, dapibus lorem. Pellentesque a justo eu dolor tempus luctus. Suspendisse nec nisl quis ligula volutpat scelerisque vel a mi. Vivamus et velit elit. Aliquam consequat orci id arcu venenatis tempus. Donec varius convallis enim, ac auctor libero euismod eu. Nam rutrum molestie diam et sagittis. Integer consequat vestibulum interdum. Integer consequat scelerisque lectus, et viverra massa aliquam at. Phasellus consequat faucibus justo eu pulvinar. Maecenas tincidunt non urna in luctus. Vivamus et tellus tortor. In eleifend euismod imperdiet.

.line-height-condenced - line-height: 1.3
Nullam ornare diam sed arcu interdum condimentum. Maecenas pharetra nibh interdum, laoreet ex et, dapibus lorem. Pellentesque a justo eu dolor tempus luctus. Suspendisse nec nisl quis ligula volutpat scelerisque vel a mi. Vivamus et velit elit. Aliquam consequat orci id arcu venenatis tempus. Donec varius convallis enim, ac auctor libero euismod eu. Nam rutrum molestie diam et sagittis. Integer consequat vestibulum interdum. Integer consequat scelerisque lectus, et viverra massa aliquam at. Phasellus consequat faucibus justo eu pulvinar. Maecenas tincidunt non urna in luctus. Vivamus et tellus tortor. In eleifend euismod imperdiet.

.line-height-inherit - line-height: inherit
Nullam ornare diam sed arcu interdum condimentum. Maecenas pharetra nibh interdum, laoreet ex et, dapibus lorem. Pellentesque a justo eu dolor tempus luctus. Suspendisse nec nisl quis ligula volutpat scelerisque vel a mi. Vivamus et velit elit. Aliquam consequat orci id arcu venenatis tempus. Donec varius convallis enim, ac auctor libero euismod eu. Nam rutrum molestie diam et sagittis. Integer consequat vestibulum interdum. Integer consequat scelerisque lectus, et viverra massa aliquam at. Phasellus consequat faucibus justo eu pulvinar. Maecenas tincidunt non urna in luctus. Vivamus et tellus tortor. In eleifend euismod imperdiet.

Text decoration and transform</>

<p>
  <code>.text-decoration-none</code> -
  <span class="text-decoration-none" style="text-decoration: underline;">Text decoration - none</span>
</p>

<p>
  <code>.text-transform-none</code> -
  <span class="text-transform-none" style="text-transform: uppercase;">Text transform - none</span>
</p>

.text-decoration-none - Text decoration - none

.text-transform-none - Text transform - none

Expanded text</>

<p>
  <code>.text-expanded</code> -
  <span class="text-expanded">Encrease letter-spacing property.</span>
</p>

.text-expanded - Encrease letter-spacing property.

Shadows</>

<p class="box-shadow-none" style="box-shadow: 0 0 10px red">
  <code>.box-shadow-none</code> - box-shadow: none
</p>

.box-shadow-none - box-shadow: none

Overflow</>

<p class="text-nowrap overflow-hidden">
  <code>.overflow-hidden</code> - overflow: hidden
  <br> Nullam ornare diam sed arcu interdum condimentum. Maecenas pharetra nibh interdum, laoreet ex et, dapibus lorem. Pellentesque a justo eu dolor tempus luctus. Suspendisse nec nisl quis ligula volutpat scelerisque vel a mi. Vivamus et velit elit.
  Aliquam consequat orci id arcu venenatis tempus. Donec varius convallis enim, ac auctor libero euismod eu. Nam rutrum molestie diam et sagittis. Integer consequat vestibulum interdum. Integer consequat scelerisque lectus, et viverra massa aliquam
  at. Phasellus consequat faucibus justo eu pulvinar. Maecenas tincidunt non urna in luctus. Vivamus et tellus tortor. In eleifend euismod imperdiet.
</p>

<p class="text-nowrap overflow-scroll">
  <code>.overflow-scroll</code> - overflow: scroll
  <br> Nullam ornare diam sed arcu interdum condimentum. Maecenas pharetra nibh interdum, laoreet ex et, dapibus lorem. Pellentesque a justo eu dolor tempus luctus. Suspendisse nec nisl quis ligula volutpat scelerisque vel a mi. Vivamus et velit elit.
  Aliquam consequat orci id arcu venenatis tempus. Donec varius convallis enim, ac auctor libero euismod eu. Nam rutrum molestie diam et sagittis. Integer consequat vestibulum interdum. Integer consequat scelerisque lectus, et viverra massa aliquam
  at. Phasellus consequat faucibus justo eu pulvinar. Maecenas tincidunt non urna in luctus. Vivamus et tellus tortor. In eleifend euismod imperdiet.
</p>

<p class="overflow-auto text-nowrap">
  <code>.overflow-auto</code> - overflow: auto
  <br> Nullam ornare diam sed arcu interdum condimentum. Maecenas pharetra nibh interdum, laoreet ex et, dapibus lorem. Pellentesque a justo eu dolor tempus luctus. Suspendisse nec nisl quis ligula volutpat scelerisque vel a mi. Vivamus et velit elit.
  Aliquam consequat orci id arcu venenatis tempus. Donec varius convallis enim, ac auctor libero euismod eu. Nam rutrum molestie diam et sagittis. Integer consequat vestibulum interdum. Integer consequat scelerisque lectus, et viverra massa aliquam
  at. Phasellus consequat faucibus justo eu pulvinar. Maecenas tincidunt non urna in luctus. Vivamus et tellus tortor. In eleifend euismod imperdiet.
</p>

.overflow-hidden - overflow: hidden
Nullam ornare diam sed arcu interdum condimentum. Maecenas pharetra nibh interdum, laoreet ex et, dapibus lorem. Pellentesque a justo eu dolor tempus luctus. Suspendisse nec nisl quis ligula volutpat scelerisque vel a mi. Vivamus et velit elit. Aliquam consequat orci id arcu venenatis tempus. Donec varius convallis enim, ac auctor libero euismod eu. Nam rutrum molestie diam et sagittis. Integer consequat vestibulum interdum. Integer consequat scelerisque lectus, et viverra massa aliquam at. Phasellus consequat faucibus justo eu pulvinar. Maecenas tincidunt non urna in luctus. Vivamus et tellus tortor. In eleifend euismod imperdiet.

.overflow-scroll - overflow: scroll
Nullam ornare diam sed arcu interdum condimentum. Maecenas pharetra nibh interdum, laoreet ex et, dapibus lorem. Pellentesque a justo eu dolor tempus luctus. Suspendisse nec nisl quis ligula volutpat scelerisque vel a mi. Vivamus et velit elit. Aliquam consequat orci id arcu venenatis tempus. Donec varius convallis enim, ac auctor libero euismod eu. Nam rutrum molestie diam et sagittis. Integer consequat vestibulum interdum. Integer consequat scelerisque lectus, et viverra massa aliquam at. Phasellus consequat faucibus justo eu pulvinar. Maecenas tincidunt non urna in luctus. Vivamus et tellus tortor. In eleifend euismod imperdiet.

.overflow-auto - overflow: auto
Nullam ornare diam sed arcu interdum condimentum. Maecenas pharetra nibh interdum, laoreet ex et, dapibus lorem. Pellentesque a justo eu dolor tempus luctus. Suspendisse nec nisl quis ligula volutpat scelerisque vel a mi. Vivamus et velit elit. Aliquam consequat orci id arcu venenatis tempus. Donec varius convallis enim, ac auctor libero euismod eu. Nam rutrum molestie diam et sagittis. Integer consequat vestibulum interdum. Integer consequat scelerisque lectus, et viverra massa aliquam at. Phasellus consequat faucibus justo eu pulvinar. Maecenas tincidunt non urna in luctus. Vivamus et tellus tortor. In eleifend euismod imperdiet.

Cursor</>

<div class="ui-bordered p-4 cursor-pointer">
  <code>.cursor-pointer</code> - cursor: pointer
</div>

.cursor-pointer - cursor: pointer

Sizing

Responsive variations for .w-100 and .w-auto:

.w-sm-100
.w-md-100
.w-lg-100
.w-xl-100
.w-sm-auto
.w-md-auto
.w-lg-auto
.w-xl-auto

Layout container spacing</>

<div class="bg-light p-4 mb-4">
  <div class="bg-white container-p-x mb-4"><code>.container-p-x</code></div>
  <div class="bg-white container-p-y"><code>.container-p-y</code></div>
</div>

<p>Negative:</p>

<div class="bg-light p-4">
  <div class="bg-light container-p-x mb-4">
    <div class="bg-white container-m--x"><code>.container-m--x</code></div>
  </div>
  <div class="bg-light container-p-y">
    <div class="bg-white container-m--y"><code>.container-m--y</code></div>
  </div>
</div>

.container-p-x

.container-p-y

Negative:

.container-m--x

.container-m--y

Negative horizontal margins</>

<div class="bg-light p-4">
  <div class="p-3">Top block</div>

  <div class="bg-dark text-white p-3 mx-lg--4">
    Collapse horizontal spacing on large screens
  </div>

  <div class="p-3">Bottom block</div>
</div>

Top block

Collapse horizontal spacing on large screens

Bottom block

The classes are named using the format m{sides}--{size} for xs and m{sides}--{breakpoint}-{size} for sm, md, lg, and xl.

Where sides is one of:

l - for classes that set margin-left
r - for classes that set margin-right
x - for classes that set both *-left and *-right

Where size is one of:

1 - (by default) for classes that set the margin to -1 * ($spacer * .25)
2 - (by default) for classes that set the margin to -1 * ($spacer * .5)
3 - (by default) for classes that set the margin to -1 * ($spacer)
4 - (by default) for classes that set the margin to -1 * ($spacer * 1.5)
5 - (by default) for classes that set the margin to -1 * ($spacer * 3)

Flex

.flex-basis-100 - flex-basis: 100%

.flex-basis-auto - flex-basis: auto

Responsive variations also exist for .flex-basis-100 and .flex-basis-auto.

.flex-basis-sm-100
.flex-basis-md-100
.flex-basis-lg-100
.flex-basis-xl-100
.flex-basis-sm-auto
.flex-basis-md-auto
.flex-basis-lg-auto
.flex-basis-xl-auto

Bordered rows</>

.row-bordered class defines overflow: hidden on the parent container and position: relative on immediate children .col and .col-* blocks.

<div class="row row-bordered">
  <div class="col p-3">Col 1</div>
  <div class="col p-3">Col 2</div>
  <div class="col p-3">Col 3</div>
  <div class="w-100"></div>
  <div class="col p-3">Col 4</div>
  <div class="col p-3">Col 5</div>
  <div class="col p-3">Col 6</div>
</div>
<div class="row row-bordered row-border-light">
  <div class="col-md-4 p-3">Col 1</div>
  <div class="col-md-4 p-3">Col 2</div>
  <div class="col-md-4 p-3">Col 3</div>
  <div class="col-md-4 p-3">Col 4</div>
  <div class="col-md-4 p-3">Col 5</div>
  <div class="col-md-4 p-3">Col 6</div>
</div>

Col 1

Col 2

Col 3

Col 4

Col 5

Col 6

Col 1

Col 2

Col 3

Col 4

Col 5

Col 6

Transforms</>

<p class="font-weight-bold py-4">
  <code>.rotate-90</code> -
  <span class="rotate-90 d-inline-block">ROTATE</span>
</p>

<p class="font-weight-bold py-4">
  <code>.rotate-180</code> -
  <span class="rotate-180 d-inline-block">ROTATE</span>
</p>

<p class="font-weight-bold py-4">
  <code>.rotate-270</code> -
  <span class="rotate-270 d-inline-block">ROTATE</span>
</p>

<p class="font-weight-bold py-4">
  <code>.rotate--90</code> -
  <span class="rotate--90 d-inline-block">ROTATE</span>
</p>

<p class="font-weight-bold py-4">
  <code>.rotate--180</code> -
  <span class="rotate--180 d-inline-block">ROTATE</span>
</p>

<p class="font-weight-bold py-4">
  <code>.rotate--270</code> -
  <span class="rotate--270 d-inline-block">ROTATE</span>
</p>

<p class="font-weight-bold py-4">
  <code>.rotate-0</code> -
  <span class="rotate-0 d-inline-block">ROTATE</span>
</p>

<p class="font-weight-bold py-4">
  <code>.scaleX--1</code> -
  <span class="scaleX--1 d-inline-block">SCALE</span>
</p>

<p class="font-weight-bold py-4">
  <code>.scaleY--1</code> -
  <span class="scaleY--1 d-inline-block">SCALE</span>
</p>

<p>The next classes will have effect only in RTL mode:</p>

<p class="font-weight-bold py-4">
  <code>.scaleX--1-rtl</code> -
  <span class="scaleX--1-rtl d-inline-block">SCALE</span>
</p>

<p class="font-weight-bold py-4">
  <code>.scaleY--1-rtl</code> -
  <span class="scaleY--1-rtl d-inline-block">SCALE</span>
</p>

.rotate-90 - ROTATE

.rotate-180 - ROTATE

.rotate-270 - ROTATE

.rotate--90 - ROTATE

.rotate--180 - ROTATE

.rotate--270 - ROTATE

.rotate-0 - ROTATE

.scaleX--1 - SCALE

.scaleY--1 - SCALE

The next classes will have effect only in RTL mode:

.scaleX--1-rtl - SCALE

.scaleY--1-rtl - SCALE

Fixes</>

<!-- flex-truncate -->
<p><code>.flex-truncate</code> - Fix for truncated text within flexbox container</p>

<!-- ie-mh-1 -->
<p><code>.ie-mh-1</code> - Fix IE parent container height bug when containing image with fluid width</p>

.flex-truncate - Fix for truncated text within flexbox container

.ie-mh-1 - Fix IE parent container height bug when containing image with fluid width

Buttons

Variations</>

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

Outline</>

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-default">Default</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Flat (Material only)</>

<button type="button" class="btn btn-primary md-btn-flat">Primary</button>
<button type="button" class="btn btn-secondary md-btn-flat">Secondary</button>
<button type="button" class="btn btn-default md-btn-flat">Default</button>
<button type="button" class="btn btn-success md-btn-flat">Success</button>
<button type="button" class="btn btn-warning md-btn-flat">Warning</button>
<button type="button" class="btn btn-info md-btn-flat">Info</button>
<button type="button" class="btn btn-danger md-btn-flat">Danger</button>
<button type="button" class="btn btn-dark md-btn-flat">Dark</button>

Round</>

<p>
  <button type="button" class="btn btn-round btn-primary">Primary</button>
  <button type="button" class="btn btn-round btn-secondary">Secondary</button>
  <button type="button" class="btn btn-round btn-default">Default</button>
  <button type="button" class="btn btn-round btn-success">Success</button>
  <button type="button" class="btn btn-round btn-warning">Warning</button>
  <button type="button" class="btn btn-round btn-info">Info</button>
  <button type="button" class="btn btn-round btn-danger">Danger</button>
  <button type="button" class="btn btn-round btn-dark">Dark</button>
</p>

<!-- Outline -->
<p>
  <button type="button" class="btn btn-round btn-outline-primary">Primary</button>
  <button type="button" class="btn btn-round btn-outline-secondary">Secondary</button>
  <button type="button" class="btn btn-round btn-outline-default">Default</button>
  <button type="button" class="btn btn-round btn-outline-success">Success</button>
  <button type="button" class="btn btn-round btn-outline-warning">Warning</button>
  <button type="button" class="btn btn-round btn-outline-info">Info</button>
  <button type="button" class="btn btn-round btn-outline-danger">Danger</button>
  <button type="button" class="btn btn-round btn-outline-dark">Dark</button>
</p>

Extra-large</>

<p>
  <button type="button" class="btn btn-xl btn-primary">Primary</button>
  <button type="button" class="btn btn-xl btn-secondary">Secondary</button>
  <button type="button" class="btn btn-xl btn-default">Default</button>
  <button type="button" class="btn btn-xl btn-success">Success</button>
  <button type="button" class="btn btn-xl btn-warning">Warning</button>
  <button type="button" class="btn btn-xl btn-info">Info</button>
  <button type="button" class="btn btn-xl btn-danger">Danger</button>
  <button type="button" class="btn btn-xl btn-dark">Dark</button>
</p>

<!-- Outline -->
<p>
  <button type="button" class="btn btn-xl btn-outline-primary">Primary</button>
  <button type="button" class="btn btn-xl btn-outline-secondary">Secondary</button>
  <button type="button" class="btn btn-xl btn-outline-default">Default</button>
  <button type="button" class="btn btn-xl btn-outline-success">Success</button>
  <button type="button" class="btn btn-xl btn-outline-warning">Warning</button>
  <button type="button" class="btn btn-xl btn-outline-info">Info</button>
  <button type="button" class="btn btn-xl btn-outline-danger">Danger</button>
  <button type="button" class="btn btn-xl btn-outline-dark">Dark</button>
</p>

Large</>

<p>
  <button type="button" class="btn btn-lg btn-primary">Primary</button>
  <button type="button" class="btn btn-lg btn-secondary">Secondary</button>
  <button type="button" class="btn btn-lg btn-default">Default</button>
  <button type="button" class="btn btn-lg btn-success">Success</button>
  <button type="button" class="btn btn-lg btn-warning">Warning</button>
  <button type="button" class="btn btn-lg btn-info">Info</button>
  <button type="button" class="btn btn-lg btn-danger">Danger</button>
  <button type="button" class="btn btn-lg btn-dark">Dark</button>
</p>

<!-- Outline -->
<p>
  <button type="button" class="btn btn-lg btn-outline-primary">Primary</button>
  <button type="button" class="btn btn-lg btn-outline-secondary">Secondary</button>
  <button type="button" class="btn btn-lg btn-outline-default">Default</button>
  <button type="button" class="btn btn-lg btn-outline-success">Success</button>
  <button type="button" class="btn btn-lg btn-outline-warning">Warning</button>
  <button type="button" class="btn btn-lg btn-outline-info">Info</button>
  <button type="button" class="btn btn-lg btn-outline-danger">Danger</button>
  <button type="button" class="btn btn-lg btn-outline-dark">Dark</button>
</p>

Small</>

<p>
  <button type="button" class="btn btn-sm btn-primary">Primary</button>
  <button type="button" class="btn btn-sm btn-secondary">Secondary</button>
  <button type="button" class="btn btn-sm btn-default">Default</button>
  <button type="button" class="btn btn-sm btn-success">Success</button>
  <button type="button" class="btn btn-sm btn-warning">Warning</button>
  <button type="button" class="btn btn-sm btn-info">Info</button>
  <button type="button" class="btn btn-sm btn-danger">Danger</button>
  <button type="button" class="btn btn-sm btn-dark">Dark</button>
</p>

<!-- Outline -->
<p>
  <button type="button" class="btn btn-sm btn-outline-primary">Primary</button>
  <button type="button" class="btn btn-sm btn-outline-secondary">Secondary</button>
  <button type="button" class="btn btn-sm btn-outline-default">Default</button>
  <button type="button" class="btn btn-sm btn-outline-success">Success</button>
  <button type="button" class="btn btn-sm btn-outline-warning">Warning</button>
  <button type="button" class="btn btn-sm btn-outline-info">Info</button>
  <button type="button" class="btn btn-sm btn-outline-danger">Danger</button>
  <button type="button" class="btn btn-sm btn-outline-dark">Dark</button>
</p>

Extra-small</>

<p>
  <button type="button" class="btn btn-xs btn-primary">Primary</button>
  <button type="button" class="btn btn-xs btn-secondary">Secondary</button>
  <button type="button" class="btn btn-xs btn-default">Default</button>
  <button type="button" class="btn btn-xs btn-success">Success</button>
  <button type="button" class="btn btn-xs btn-warning">Warning</button>
  <button type="button" class="btn btn-xs btn-info">Info</button>
  <button type="button" class="btn btn-xs btn-danger">Danger</button>
  <button type="button" class="btn btn-xs btn-dark">Dark</button>
</p>

<!-- Outline -->
<p>
  <button type="button" class="btn btn-xs btn-outline-primary">Primary</button>
  <button type="button" class="btn btn-xs btn-outline-secondary">Secondary</button>
  <button type="button" class="btn btn-xs btn-outline-default">Default</button>
  <button type="button" class="btn btn-xs btn-outline-success">Success</button>
  <button type="button" class="btn btn-xs btn-outline-warning">Warning</button>
  <button type="button" class="btn btn-xs btn-outline-info">Info</button>
  <button type="button" class="btn btn-xs btn-outline-danger">Danger</button>
  <button type="button" class="btn btn-xs btn-outline-dark">Dark</button>
</p>

With icon</>

<button type="button" class="btn btn-lg btn-primary">
  <span class="far fa-paper-plane"></span>&nbsp;&nbsp;Primary</button>
<button type="button" class="btn btn-lg btn-secondary">
  <span class="oi oi-cloud-download"></span>&nbsp;&nbsp;Secondary</button>
<button type="button" class="btn btn-lg btn-default">
  <span class="pe-7s-users"></span>&nbsp;&nbsp;Default</button>
<button type="button" class="btn btn-lg btn-success">
  <span class="ion ion-md-bulb"></span>&nbsp;&nbsp;Success</button>
<button type="button" class="btn btn-lg btn-warning">
  <span class="lnr lnr-map"></span>&nbsp;&nbsp;Warning</button>
<button type="button" class="btn btn-lg btn-info">
  <span class="far fa-paper-plane"></span>&nbsp;&nbsp;Info</button>
<button type="button" class="btn btn-lg btn-danger">
  <span class="oi oi-cloud-download"></span>&nbsp;&nbsp;Danger</button>
<button type="button" class="btn btn-lg btn-dark">
  <span class="pe-7s-users"></span>&nbsp;&nbsp;Dark</button>

Icon-buttons</>

<!-- Extra-large -->
<p>
  <button type="button" class="btn icon-btn btn-xl btn-outline-primary">
    <span class="far fa-paper-plane"></span>
  </button>
  <button type="button" class="btn icon-btn btn-xl btn-outline-secondary">
    <span class="oi oi-cloud-download"></span>
  </button>
  <button type="button" class="btn icon-btn btn-xl btn-outline-default">
    <span class="pe-7s-users"></span>
  </button>
  <button type="button" class="btn icon-btn btn-xl btn-outline-success">
    <span class="ion ion-md-bulb"></span>
  </button>
  <button type="button" class="btn icon-btn btn-xl btn-outline-warning">
    <span class="lnr lnr-map"></span>
  </button>
  <button type="button" class="btn icon-btn btn-xl btn-outline-info">
    <span class="far fa-paper-plane"></span>
  </button>
  <button type="button" class="btn icon-btn btn-xl btn-outline-danger">
    <span class="oi oi-cloud-download"></span>
  </button>
  <button type="button" class="btn icon-btn btn-xl btn-outline-dark">
    <span class="pe-7s-users"></span>
  </button>
</p>

<!-- Large -->
<p>
  <button type="button" class="btn icon-btn btn-lg btn-outline-primary">
    <span class="far fa-paper-plane"></span>
  </button>
  <button type="button" class="btn icon-btn btn-lg btn-outline-secondary">
    <span class="oi oi-cloud-download"></span>
  </button>
  <button type="button" class="btn icon-btn btn-lg btn-outline-default">
    <span class="pe-7s-users"></span>
  </button>
  <button type="button" class="btn icon-btn btn-lg btn-outline-success">
    <span class="ion ion-md-bulb"></span>
  </button>
  <button type="button" class="btn icon-btn btn-lg btn-outline-warning">
    <span class="lnr lnr-map"></span>
  </button>
  <button type="button" class="btn icon-btn btn-lg btn-outline-info">
    <span class="far fa-paper-plane"></span>
  </button>
  <button type="button" class="btn icon-btn btn-lg btn-outline-danger">
    <span class="oi oi-cloud-download"></span>
  </button>
  <button type="button" class="btn icon-btn btn-lg btn-outline-dark">
    <span class="pe-7s-users"></span>
  </button>
</p>

<!-- Default -->
<p>
  <button type="button" class="btn icon-btn btn-outline-primary">
    <span class="far fa-paper-plane"></span>
  </button>
  <button type="button" class="btn icon-btn btn-outline-secondary">
    <span class="oi oi-cloud-download"></span>
  </button>
  <button type="button" class="btn icon-btn btn-outline-default">
    <span class="pe-7s-users"></span>
  </button>
  <button type="button" class="btn icon-btn btn-outline-success">
    <span class="ion ion-md-bulb"></span>
  </button>
  <button type="button" class="btn icon-btn btn-outline-warning">
    <span class="lnr lnr-map"></span>
  </button>
  <button type="button" class="btn icon-btn btn-outline-info">
    <span class="far fa-paper-plane"></span>
  </button>
  <button type="button" class="btn icon-btn btn-outline-danger">
    <span class="oi oi-cloud-download"></span>
  </button>
  <button type="button" class="btn icon-btn btn-outline-dark">
    <span class="pe-7s-users"></span>
  </button>
</p>

<!-- Small -->
<p>
  <button type="button" class="btn icon-btn btn-sm btn-outline-primary">
    <span class="far fa-paper-plane"></span>
  </button>
  <button type="button" class="btn icon-btn btn-sm btn-outline-secondary">
    <span class="oi oi-cloud-download"></span>
  </button>
  <button type="button" class="btn icon-btn btn-sm btn-outline-default">
    <span class="pe-7s-users"></span>
  </button>
  <button type="button" class="btn icon-btn btn-sm btn-outline-success">
    <span class="ion ion-md-bulb"></span>
  </button>
  <button type="button" class="btn icon-btn btn-sm btn-outline-warning">
    <span class="lnr lnr-map"></span>
  </button>
  <button type="button" class="btn icon-btn btn-sm btn-outline-info">
    <span class="far fa-paper-plane"></span>
  </button>
  <button type="button" class="btn icon-btn btn-sm btn-outline-danger">
    <span class="oi oi-cloud-download"></span>
  </button>
  <button type="button" class="btn icon-btn btn-sm btn-outline-dark">
    <span class="pe-7s-users"></span>
  </button>
</p>

<!-- Extra-small -->
<p>
  <button type="button" class="btn icon-btn btn-xs btn-outline-primary">
    <span class="far fa-paper-plane"></span>
  </button>
  <button type="button" class="btn icon-btn btn-xs btn-outline-secondary">
    <span class="oi oi-cloud-download"></span>
  </button>
  <button type="button" class="btn icon-btn btn-xs btn-outline-default">
    <span class="pe-7s-users"></span>
  </button>
  <button type="button" class="btn icon-btn btn-xs btn-outline-success">
    <span class="ion ion-md-bulb"></span>
  </button>
  <button type="button" class="btn icon-btn btn-xs btn-outline-warning">
    <span class="lnr lnr-map"></span>
  </button>
  <button type="button" class="btn icon-btn btn-xs btn-outline-info">
    <span class="far fa-paper-plane"></span>
  </button>
  <button type="button" class="btn icon-btn btn-xs btn-outline-danger">
    <span class="oi oi-cloud-download"></span>
  </button>
  <button type="button" class="btn icon-btn btn-xs btn-outline-dark">
    <span class="pe-7s-users"></span>
  </button>
</p>

Borderless icon-buttons</>

<button type="button" class="btn icon-btn btn-xl btn-outline-primary borderless">
  <span class="far fa-paper-plane"></span>
</button>
<button type="button" class="btn icon-btn btn-lg btn-outline-secondary borderless">
  <span class="oi oi-cloud-download"></span>
</button>
<button type="button" class="btn icon-btn btn-outline-success borderless">
  <span class="pe-7s-users"></span>
</button>
<button type="button" class="btn icon-btn btn-sm btn-outline-info borderless">
  <span class="lnr lnr-map"></span>
</button>
<button type="button" class="btn icon-btn btn-xs btn-outline-warning borderless">
  <span class="ion ion-md-bulb"></span>
</button>

Disabled</>

<p>
  <button type="button" class="btn btn-primary" disabled>Primary</button>
  <button type="button" class="btn btn-secondary" disabled>Secondary</button>
  <button type="button" class="btn btn-default" disabled>Default</button>
  <button type="button" class="btn btn-success" disabled>Success</button>
  <button type="button" class="btn btn-warning" disabled>Warning</button>
  <button type="button" class="btn btn-info" disabled>Info</button>
  <button type="button" class="btn btn-danger" disabled>Danger</button>
  <button type="button" class="btn btn-dark" disabled>Dark</button>
</p>

<!-- Outline -->
<p>
  <button type="button" class="btn btn-outline-primary" disabled>Primary</button>
  <button type="button" class="btn btn-outline-secondary" disabled>Secondary</button>
  <button type="button" class="btn btn-outline-default" disabled>Default</button>
  <button type="button" class="btn btn-outline-success" disabled>Success</button>
  <button type="button" class="btn btn-outline-warning" disabled>Warning</button>
  <button type="button" class="btn btn-outline-info" disabled>Info</button>
  <button type="button" class="btn btn-outline-danger" disabled>Danger</button>
  <button type="button" class="btn btn-outline-dark" disabled>Dark</button>
</p>

Single toggle</>

<button type="button" class="btn btn-primary" data-toggle="button">
  Single toggle
</button>

Checkbox and radio</>

<!-- Checkbox -->
<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 3
  </label>
</div>

<br>

<!-- Radio -->
<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="btn-radio" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="btn-radio"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="btn-radio"> Radio 3
  </label>
</div>

Checkbox 1 (pre-checked) Checkbox 2 Checkbox 3

Radio 1 (preselected) Radio 2 Radio 3

Badges

Within headings</>

<h1>Example heading
  <span class="badge badge-default">New</span>
</h1>
<h2>Example heading
  <span class="badge badge-default">New</span>
</h2>
<h3>Example heading
  <span class="badge badge-default">New</span>
</h3>
<h4>Example heading
  <span class="badge badge-default">New</span>
</h4>
<h5>Example heading
  <span class="badge badge-default">New</span>
</h5>
<h6>Example heading
  <span class="badge badge-default">New</span>
</h6>

Example heading New

Variations</>

<a href="#" class="badge badge-default">Default</a>
<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-dark">Dark</a>

Default Primary Secondary Success Info Warning Danger Dark

Pills</>

<a href="#" class="badge badge-pill badge-default">Default</a>
<a href="#" class="badge badge-pill badge-primary">Primary</a>
<a href="#" class="badge badge-pill badge-secondary">Secondary</a>
<a href="#" class="badge badge-pill badge-success">Success</a>
<a href="#" class="badge badge-pill badge-info">Info</a>
<a href="#" class="badge badge-pill badge-warning">Warning</a>
<a href="#" class="badge badge-pill badge-danger">Danger</a>
<a href="#" class="badge badge-pill badge-dark">Dark</a>

Default Primary Secondary Success Info Warning Danger Dark

Outline</>

<a href="#" class="badge badge-outline-default">Default</a>
<a href="#" class="badge badge-outline-primary">Primary</a>
<a href="#" class="badge badge-outline-secondary">Secondary</a>
<a href="#" class="badge badge-outline-success">Success</a>
<a href="#" class="badge badge-outline-info">Info</a>
<a href="#" class="badge badge-outline-warning">Warning</a>
<a href="#" class="badge badge-outline-danger">Danger</a>
<a href="#" class="badge badge-outline-dark">Dark</a>

Default Primary Secondary Success Info Warning Danger Dark

Button badges</>

<p>
  <button type="button" class="btn btn-primary">Messages
    <span class="badge">4</span>
  </button>
  <button type="button" class="btn btn-secondary">Messages
    <span class="badge">4</span>
  </button>
  <button type="button" class="btn btn-default">Messages
    <span class="badge">4</span>
  </button>
  <button type="button" class="btn btn-success">Messages
    <span class="badge">4</span>
  </button>
  <button type="button" class="btn btn-warning">Messages
    <span class="badge">4</span>
  </button>
  <button type="button" class="btn btn-info">Messages
    <span class="badge">4</span>
  </button>
  <button type="button" class="btn btn-danger">Messages
    <span class="badge">4</span>
  </button>
  <button type="button" class="btn btn-dark">Messages
    <span class="badge">4</span>
  </button>
</p>
<p>
  <button type="button" class="btn btn-outline-primary">Messages
    <span class="badge">4</span>
  </button>
  <button type="button" class="btn btn-outline-secondary">Messages
    <span class="badge">4</span>
  </button>
  <button type="button" class="btn btn-outline-default">Messages
    <span class="badge">4</span>
  </button>
  <button type="button" class="btn btn-outline-success">Messages
    <span class="badge">4</span>
  </button>
  <button type="button" class="btn btn-outline-warning">Messages
    <span class="badge">4</span>
  </button>
  <button type="button" class="btn btn-outline-info">Messages
    <span class="badge">4</span>
  </button>
  <button type="button" class="btn btn-outline-danger">Messages
    <span class="badge">4</span>
  </button>
  <button type="button" class="btn btn-outline-dark">Messages
    <span class="badge">4</span>
  </button>
</p>

Dot badges</>

<span class="badge badge-dot badge-default"></span> Default&nbsp;&nbsp;
<span class="badge badge-dot badge-primary"></span> Primary&nbsp;&nbsp;
<span class="badge badge-dot badge-success"></span> Success&nbsp;&nbsp;
<span class="badge badge-dot badge-info"></span> Info&nbsp;&nbsp;
<span class="badge badge-dot badge-warning"></span> Warning&nbsp;&nbsp;
<span class="badge badge-dot badge-danger"></span> Danger

Default Primary Success Info Warning Danger

Indicators</>

<button type="button" class="btn btn-default">Badge
  <span class="badge badge-primary indicator">12</span>
</button>
<button type="button" class="btn btn-default">Outlined badge
  <span class="badge badge-outline-success indicator">12</span>
</button>
<button type="button" class="btn btn-default">Pill
  <span class="badge badge-pill badge-info indicator">12</span>
</button>
<button type="button" class="btn btn-default">Outlined pill
  <span class="badge badge-pill badge-outline-danger indicator">12</span>
</button>
<button type="button" class="btn btn-default">Dot
  <span class="badge badge-dot badge-danger indicator"></span>
</button>
<button type="button" class="btn btn-default">Outlined dot
  <span class="badge badge-dot badge-outline-success indicator"></span>
</button>

Button groups

Sizes</>

<!-- Extra-large -->
<div class="btn-group btn-group-xl">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

<br>

<!-- Large -->
<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

<br>

<!-- Default -->
<div class="btn-group">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

<br>

<!-- Small -->
<div class="btn-group btn-group-sm">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

<br>

<!-- Extra-small -->
<div class="btn-group btn-group-xs">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

Button toolbars</>

<div class="btn-toolbar">
  <div class="btn-group mr-2">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="btn-group mr-2">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">8</button>
  </div>
</div>

Nesting</>

<div class="btn-group">
  <button type="button" class="btn btn-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>

  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Dropdown</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

<!-- Javascript -->
<script>
  $(function() {
    if ($('html').attr('dir') === 'rtl' || $('body').attr('dir') === 'rtl') {
      $('#nesting-button-group-demo .dropdown-menu').addClass('dropdown-menu-right')
    }
  });
</script>
<!-- / Javascript -->

Vertical</>

<div class="btn-group-vertical" id="vertical-button-group-demo">
  <button type="button" class="btn btn-secondary">Button</button>
  <button type="button" class="btn btn-secondary">Button</button>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Dropdown</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
  <button type="button" class="btn btn-secondary">Button</button>
  <button type="button" class="btn btn-secondary">Button</button>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Dropdown</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Dropdown</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Dropdown</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

<!-- Javascript -->
<script>
  $(function() {
    if ($('html').attr('dir') === 'rtl' || $('body').attr('dir') === 'rtl') {
      $('#vertical-button-group-demo .dropdown-menu').addClass('dropdown-menu-right')
    }
  });
</script>
<!-- / Javascript -->

Button dropdowns

Variations</>

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default</button>
  <div class="dropdown-menu">
    <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 class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Primary</button>
  <div class="dropdown-menu">
    <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 class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Secondary</button>
  <div class="dropdown-menu">
    <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 class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success</button>
  <div class="dropdown-menu">
    <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 class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info</button>
  <div class="dropdown-menu">
    <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 class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning</button>
  <div class="dropdown-menu">
    <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 class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger</button>
  <div class="dropdown-menu">
    <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 class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-dark dropdown-toggle" data-toggle="dropdown">Dark</button>
  <div class="dropdown-menu">
    <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 class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

<!-- Javascript -->
<script>
  $(function() {
    if ($('html').attr('dir') === 'rtl' || $('body').attr('dir') === 'rtl') {
      $('#button-dropdowns-demo .dropdown-menu').addClass('dropdown-menu-right')
    }
  });
</script>
<!-- / Javascript -->

Hidden arrow</>

<div class="btn-group">
  <button type="button" class="btn btn-primary dropdown-toggle hide-arrow" data-toggle="dropdown">Primary</button>
  <div class="dropdown-menu">
    <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 class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

<div class="btn-group dropdown-toggle-hide-arrow">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Secondary</button>
  <div class="dropdown-menu">
    <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 class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

<!-- Javascript -->
<script>
  $(function() {
    if ($('html').attr('dir') === 'rtl' || $('body').attr('dir') === 'rtl') {
      $('#button-dropdowns-no-arrow-demo .dropdown-menu').addClass('dropdown-menu-right')
    }
  });
</script>
<!-- / Javascript -->

Split</>

<div class="btn-group">
  <button type="button" class="btn btn-default">Default</button>
  <button type="button" class="btn btn-default dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
  <div class="dropdown-menu">
    <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 class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
  <div class="dropdown-menu">
    <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 class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary">Secondary</button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
  <div class="dropdown-menu">
    <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 class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
  <div class="dropdown-menu">
    <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 class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-info">Info</button>
  <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
  <div class="dropdown-menu">
    <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 class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-warning">Warning</button>
  <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
  <div class="dropdown-menu">
    <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 class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
  <div class="dropdown-menu">
    <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 class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-dark">Dark</button>
  <button type="button" class="btn btn-dark dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
  <div class="dropdown-menu">
    <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 class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

<!-- Javascript -->
<script>
  $(function() {
    if ($('html').attr('dir') === 'rtl' || $('body').attr('dir') === 'rtl') {
      $('#split-button-dropdowns-demo .dropdown-menu').addClass('dropdown-menu-right')
    }
  });
</script>
<!-- / Javascript -->

Sizes</>

<div class="btn-group">
  <button class="btn btn-default btn-xl dropdown-toggle" type="button" data-toggle="dropdown">Extra large button</button>
  <div class="dropdown-menu">
    <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 class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>
<br>

<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">Large button</button>
  <div class="dropdown-menu">
    <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 class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>
<br>

<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">Small button</button>
  <div class="dropdown-menu">
    <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 class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>
<br>

<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">Extra small button</button>
  <div class="dropdown-menu">
    <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 class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

<!-- Javascript -->
<script>
  $(function() {
    if ($('html').attr('dir') === 'rtl' || $('body').attr('dir') === 'rtl') {
      $('#sizes-button-dropdowns-demo .dropdown-menu').addClass('dropdown-menu-right')
    }
  });
</script>
<!-- / Javascript -->

Dropdowns

Example</>

<div class="dropdown-menu float-left" style="display: block; position: relative;">
  <a class="dropdown-item" href="#">
    <span class="badge badge-success float-right">34</span>Action</a>
  <a class="dropdown-item" href="#">
    <span class="badge badge-pill badge-primary float-right">16</span>Another action</a>
  <a class="dropdown-item disabled" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <h6 class="dropdown-header">Dropdown header</h6>
  <a class="dropdown-item active" href="#">
    <i class="ion ion-md-cloud"></i> &nbsp;With icon</a>
  <a class="dropdown-item" href="#">Last action</a>
</div>

Hover dropdowns</>

<script src="assets/vendor/js/dropdown-hover.js"></script>

<div class="btn-group" id="hover-dropdown-demo">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-trigger="hover">Hover</button>
  <div class="dropdown-menu">
    <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 class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

<!-- Javascript -->
<script>
  $(function() {
    if ($('html').attr('dir') === 'rtl' || $('body').attr('dir') === 'rtl') {
      $('#hover-dropdown-demo .dropdown-menu').addClass('dropdown-menu-right')
    }
  });
</script>
<!-- / Javascript -->

Nested</>

<div class="dropdown">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Nested dropdowns</button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">First action</a>

    <!-- Level two -->
    <div class="dropdown-toggle">
      <div class="dropdown-item">First menu</div>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">First action</a>
        <a class="dropdown-item" href="#">Second action</a>

        <!-- Level three -->
        <div class="dropdown-toggle">
          <div class="dropdown-item">Second menu</div>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#">First action</a>
            <a class="dropdown-item" href="#">Second action</a>
          </div>
        </div>

      </div>
    </div>

    <a class="dropdown-item" href="#">Second action</a>

    <!-- Level two -->
    <div class="dropdown-toggle">
      <div class="dropdown-item">Second menu</div>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">First action</a>
        <a class="dropdown-item" href="#">Second action</a>
      </div>
    </div>
  </div>
</div>

<!-- Javascript -->
<script>
  $(function() {
    if ($('html').attr('dir') === 'rtl' || $('body').attr('dir') === 'rtl') {
      $('#nesting-dropdown-demo .dropdown > .dropdown-menu').addClass('dropdown-menu-right')
    }
  });
</script>
<!-- / Javascript -->

Navs

Base</>

<!-- Left -->
<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

<!-- Center -->
<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

<!-- Right -->
<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Vertical</>

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Tabs & pills</>

<!-- Default tabs -->
<ul class="nav nav-tabs nav-responsive-xl">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active
      <span class="badge badge-primary">22</span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link
      <span class="badge badge-outline-success">22</span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

<!-- Alt tabs -->
<ul class="nav nav-tabs tabs-alt nav-responsive-xl">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active
      <span class="badge badge-primary">22</span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link
      <span class="badge badge-outline-success">22</span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

<!-- Pills -->
<ul class="nav nav-pills nav-responsive-xl">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active
      <span class="badge badge-primary">22</span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link
      <span class="badge badge-outline-success">22</span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Sizes</>

<!-- Large -->
<ul class="nav nav-lg nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active
      <span class="badge badge-primary">22</span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link
      <span class="badge badge-outline-success">22</span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>
<ul class="nav nav-lg nav-tabs tabs-alt">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active
      <span class="badge badge-primary">22</span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link
      <span class="badge badge-outline-success">22</span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>
<ul class="nav nav-lg nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active
      <span class="badge badge-primary">22</span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link
      <span class="badge badge-outline-success">22</span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

<!-- Small -->
<ul class="nav nav-sm nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active
      <span class="badge badge-primary">22</span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link
      <span class="badge badge-outline-success">22</span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>
<ul class="nav nav-sm nav-tabs tabs-alt">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active
      <span class="badge badge-primary">22</span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link
      <span class="badge badge-outline-success">22</span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>
<ul class="nav nav-sm nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active
      <span class="badge badge-primary">22</span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link
      <span class="badge badge-outline-success">22</span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Fill & justify</>

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active
      <span class="badge badge-primary">22</span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link
      <span class="badge badge-outline-success">22</span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active
      <span class="badge badge-primary">22</span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link
      <span class="badge badge-outline-success">22</span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Using dropdowns</>

<!-- Default tabs -->
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
    <div class="dropdown-menu">
      <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 class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

<!-- Alt tabs -->
<ul class="nav nav-tabs tabs-alt">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
    <div class="dropdown-menu">
      <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 class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

<!-- Pills -->
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
    <div class="dropdown-menu">
      <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 class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

<!-- Javascript -->
<script>
  $(function() {
    if ($('html').attr('dir') === 'rtl' || $('body').attr('dir') === 'rtl') {
      $('#nav-dropdowns-demo .dropdown-menu').addClass('dropdown-menu-right')
    }
  });
</script>
<!-- / Javascript -->

Light navs (Material only)</>

<div class="bg-primary p-4">
  <!-- Default tabs -->
  <ul class="nav nav-tabs md-tabs-light">
    <li class="nav-item">
      <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
      <div class="dropdown-menu">
        <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 class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
      </div>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>

  <!-- Alt tabs -->
  <ul class="nav nav-tabs tabs-alt md-tabs-light">
    <li class="nav-item">
      <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
      <div class="dropdown-menu">
        <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 class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
      </div>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>

  <!-- Pills -->
  <ul class="nav nav-pills md-pills-light">
    <li class="nav-item">
      <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
      <div class="dropdown-menu">
        <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 class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
      </div>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</div>

<!-- Javascript -->
<script>
  $(function() {
    if ($('html').attr('dir') === 'rtl' || $('body').attr('dir') === 'rtl') {
      $('#light-navs-demo .dropdown-menu').addClass('dropdown-menu-right')
    }
  });
</script>
<!-- / Javascript -->

Top tabs</>

<div class="nav-tabs-top">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#navs-top-home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#navs-top-profile">Profile</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#navs-top-messages">Messages</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade show active" id="navs-top-home">
      <div class="card-body">
        <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.
          Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
      </div>
    </div>
    <div class="tab-pane fade" id="navs-top-profile">
      <div class="card-body">
        <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress,
          commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny
          pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
      </div>
    </div>
    <div class="tab-pane fade" id="navs-top-messages">
      <div class="card-body">
        <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy
          salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably
          haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
      </div>
    </div>
  </div>
</div>

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Left tabs</>

<div class="nav-tabs-left">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#navs-left-home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#navs-left-profile">Profile</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#navs-left-messages">Messages</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade show active" id="navs-left-home">
      <div class="card-body">
        <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.
          Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
      </div>
    </div>
    <div class="tab-pane fade" id="navs-left-profile">
      <div class="card-body">
        <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress,
          commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny
          pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
      </div>
    </div>
    <div class="tab-pane fade" id="navs-left-messages">
      <div class="card-body">
        <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy
          salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably
          haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
      </div>
    </div>
  </div>
</div>

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Right tabs</>

<div class="nav-tabs-right">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#navs-right-home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#navs-right-profile">Profile</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#navs-right-messages">Messages</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade show active" id="navs-right-home">
      <div class="card-body">
        <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.
          Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
      </div>
    </div>
    <div class="tab-pane fade" id="navs-right-profile">
      <div class="card-body">
        <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress,
          commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny
          pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
      </div>
    </div>
    <div class="tab-pane fade" id="navs-right-messages">
      <div class="card-body">
        <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy
          salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably
          haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
      </div>
    </div>
  </div>
</div>

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Bottom tabs</>

<div class="nav-tabs-bottom">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#navs-bottom-home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#navs-bottom-profile">Profile</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#navs-bottom-messages">Messages</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade show active" id="navs-bottom-home">
      <div class="card-body">
        <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.
          Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
      </div>
    </div>
    <div class="tab-pane fade" id="navs-bottom-profile">
      <div class="card-body">
        <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress,
          commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny
          pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
      </div>
    </div>
    <div class="tab-pane fade" id="navs-bottom-messages">
      <div class="card-body">
        <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy
          salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably
          haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
      </div>
    </div>
  </div>
</div>

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Responsive navs</>

Try to resize window.

<!-- .nav-responsive-md - stacked on extra small and small screens -->
<div class="nav-responsive-md">
  <ul class="nav justify-content-end">
    <li class="nav-item">
      <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</div>

<!-- .nav-responsive-lg - stacked on extra small, small and medium screens -->
<div class="nav-responsive-lg">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" href="#">Active
        <span class="badge badge-primary">22</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link
        <span class="badge badge-outline-success">22</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</div>

<!-- .nav-responsive-lg - stacked on extra small, small and medium screens -->
<div class="nav-responsive-lg">
  <ul class="nav nav-tabs tabs-alt">
    <li class="nav-item">
      <a class="nav-link active" href="#">Active
        <span class="badge badge-primary">22</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link
        <span class="badge badge-outline-success">22</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</div>

<!-- .nav-responsive-lg - stacked on extra small, small and medium screens -->
<div class="nav-responsive-lg">
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link active" href="#">Active
        <span class="badge badge-primary">22</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link
        <span class="badge badge-outline-success">22</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</div>

<!-- .nav-responsive-xl - stacked on extra small, small, medium and large screens -->
<div class="nav-tabs-top nav-responsive-xl">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#navs-top-responsive-link-1">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#navs-top-responsive-link-2">Link 2</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade show active" id="navs-top-responsive-link-1">
      <div class="card-body">
        <p>Stacked on extra small, small, medium and large screens</p>
      </div>
    </div>
    <div class="tab-pane fade" id="navs-top-responsive-link-2">
      <div class="card-body">
        <p>Tab content</p>
      </div>
    </div>
  </div>
</div>

<!-- .nav-responsive-lg - stacked on extra small, small and medium screens -->
<div class="nav-tabs-left nav-responsive-lg">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#navs-left-responsive-link-1">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#navs-left-responsive-link-2">Link 2</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade show active" id="navs-left-responsive-link-1">
      <div class="card-body">
        <p>Stacked on extra small, small and medium screens</p>
      </div>
    </div>
    <div class="tab-pane fade" id="navs-left-responsive-link-2">
      <div class="card-body">
        <p>Tab content</p>
      </div>
    </div>
  </div>
</div>

<!-- .nav-responsive-md - stacked on extra small and small screens -->
<div class="nav-tabs-right nav-responsive-md">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#navs-right-responsive-link-1">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#navs-right-responsive-link-2">Link 2</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade show active" id="navs-right-responsive-link-1">
      <div class="card-body">
        <p>Stacked on extra small and small screens</p>
      </div>
    </div>
    <div class="tab-pane fade" id="navs-right-responsive-link-2">
      <div class="card-body">
        <p>Tab content</p>
      </div>
    </div>
  </div>
</div>

<!-- .nav-responsive-sm - stacked on extra small screens -->
<div class="nav-tabs-bottom nav-responsive-sm">
  <ul class="nav nav-tabs nav-justified">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#navs-bottom-responsive-link-1">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#navs-bottom-responsive-link-2">Link 2</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade show active" id="navs-bottom-responsive-link-1">
      <div class="card-body">
        <p>Stacked on extra small screens</p>
      </div>
    </div>
    <div class="tab-pane fade" id="navs-bottom-responsive-link-2">
      <div class="card-body">
        <p>Tab content</p>
      </div>
    </div>
  </div>
</div>

Link 1
Link 2

Stacked on extra small, small, medium and large screens

Tab content

Link 1
Link 2

Stacked on extra small, small and medium screens

Tab content

Link 1
Link 2

Stacked on extra small and small screens

Tab content

Link 1
Link 2

Stacked on extra small screens

Tab content

Pagination

Example</>

<nav>
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#">«</a>
    </li>
    <li class="page-item active">
      <a class="page-link" href="#">1</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">2</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">3</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">4</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">5</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">»</a>
    </li>
  </ul>
</nav>

Sizes</>

<ul class="pagination pagination-sm">
  <li class="page-item disabled">
    <a class="page-link" href="#">«</a>
  </li>
  <li class="page-item active">
    <a class="page-link" href="#">1</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">2</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">3</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">4</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">5</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">»</a>
  </li>
</ul>

<ul class="pagination pagination-lg">
  <li class="page-item disabled">
    <a class="page-link" href="#">«</a>
  </li>
  <li class="page-item active">
    <a class="page-link" href="#">1</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">2</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">3</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">4</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">5</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">»</a>
  </li>
</ul>

«
1
2
3
4
5
»

«
1
2
3
4
5
»

Progress bars

Basic</>

<div class="progress">
  <div class="progress-bar" style="width: 60%;"></div>
</div>

Height</>

<div class="progress" style="height: 6px;">
  <div class="progress-bar" style="width: 60%;"></div>
</div>

With label</>

<div class="progress">
  <div class="progress-bar" style="width: 30%;">30%</div>
</div>

30%

Variations</>

<div class="progress">
  <div class="progress-bar bg-secondary" style="width: 30%"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-success" style="width: 40%"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-info" style="width: 20%"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-warning" style="width: 60%"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-danger" style="width: 80%"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-dark" style="width: 50%"></div>
</div>

Striped</>

<div class="progress">
  <div class="progress-bar progress-bar-striped" style="width: 45%"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-secondary" style="width: 30%"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-success" style="width: 40%"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-info" style="width: 20%"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-warning" style="width: 60%"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-danger" style="width: 80%"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-dark" style="width: 50%"></div>
</div>

Animated</>

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 45%"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated bg-secondary" style="width: 30%"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" style="width: 40%"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" style="width: 60%"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 80%"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated bg-dark" style="width: 50%"></div>
</div>

List groups

Example</>

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">Dapibus ac facilisis in
    <span class="badge badge-default">14</span>
  </li>
  <li class="list-group-item disabled">Cras justo odio</li>
  <li class="list-group-item d-flex justify-content-between align-items-center">Morbi leo risus
    <span class="badge badge-success">22</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">Porta ac consectetur ac
    <span class="badge badge-danger badge-pill">13</span>
  </li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Dapibus ac facilisis in 14
Cras justo odio
Morbi leo risus 22
Porta ac consectetur ac 13
Vestibulum at eros

Linked items</>

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">Cras justo odio</a>
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-action">Vestibulum at eros</a>
</div>

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

Contextual classes</>

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-primary">This is a primary list group item</a>
  <a href="#" class="list-group-item list-group-item-secondary">This is a secondary list group item</a>
  <a href="#" class="list-group-item list-group-item-success">This is a success list group item</a>
  <a href="#" class="list-group-item list-group-item-danger">This is a danger list group item</a>
  <a href="#" class="list-group-item list-group-item-warning">This is a warning list group item</a>
  <a href="#" class="list-group-item list-group-item-info">This is an info list group item</a>
  <a href="#" class="list-group-item list-group-item-dark">This is a dark list group item</a>
</div>

This is a primary list group item This is a secondary list group item This is a success list group item This is a danger list group item This is a warning list group item This is an info list group item This is a dark list group item

Custom content</>

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
    <div class="d-flex justify-content-between w-100">
      <h4 class="mb-1">List group item heading</h4>
      <small>3 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="d-flex justify-content-between w-100">
      <h4 class="mb-1">List group item heading</h4>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="d-flex justify-content-between w-100">
      <h4 class="mb-1">List group item heading</h4>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
</div>

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

JavaScript behavior</>

<div class="row">
  <div class="col-4">
    <div class="list-group">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings">Settings</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content">
      <div class="tab-pane fade show active" id="list-home">
        Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur
        exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.
      </div>
      <div class="tab-pane fade" id="list-profile">
        Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt
        veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.
      </div>
      <div class="tab-pane fade" id="list-messages">
        Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur
        irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.
      </div>
      <div class="tab-pane fade" id="list-settings">
        Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip
        sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.
      </div>
    </div>
  </div>
</div>

Home Profile Messages Settings

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.

Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.

Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.

Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.

Alerts

Light alerts</>

<div class="alert alert-primary alert-dismissible fade show">
  <button type="button" class="close" data-dismiss="alert">×</button>
  This is a primary alert — check it out!
</div>

<div class="alert alert-secondary alert-dismissible fade show">
  <button type="button" class="close" data-dismiss="alert">×</button>
  This is a secondary alert — check it out!
</div>

<div class="alert alert-success alert-dismissible fade show">
  <button type="button" class="close" data-dismiss="alert">×</button>
  This is a success alert — check it out!
</div>

<div class="alert alert-danger alert-dismissible fade show">
  <button type="button" class="close" data-dismiss="alert">×</button>
  This is a danger alert — check it out!
</div>

<div class="alert alert-warning alert-dismissible fade show">
  <button type="button" class="close" data-dismiss="alert">×</button>
  This is a warning alert — check it out!
</div>

<div class="alert alert-info alert-dismissible fade show">
  <button type="button" class="close" data-dismiss="alert">×</button>
  This is an info alert — check it out!
</div>

<div class="alert alert-dark alert-dismissible fade show">
  <button type="button" class="close" data-dismiss="alert">×</button>
  This is a dark alert — check it out!
</div>

This is a primary alert — check it out!

This is a secondary alert — check it out!

This is a success alert — check it out!

This is a danger alert — check it out!

This is a warning alert — check it out!

This is an info alert — check it out!

This is a dark alert — check it out!

Dark alerts</>

<div class="alert alert-dark-primary alert-dismissible fade show">
  <button type="button" class="close" data-dismiss="alert">×</button>
  This is a primary alert — check it out!
</div>

<div class="alert alert-dark-secondary alert-dismissible fade show">
  <button type="button" class="close" data-dismiss="alert">×</button>
  This is a secondary alert — check it out!
</div>

<div class="alert alert-dark-success alert-dismissible fade show">
  <button type="button" class="close" data-dismiss="alert">×</button>
  This is a success alert — check it out!
</div>

<div class="alert alert-dark-danger alert-dismissible fade show">
  <button type="button" class="close" data-dismiss="alert">×</button>
  This is a danger alert — check it out!
</div>

<div class="alert alert-dark-warning alert-dismissible fade show">
  <button type="button" class="close" data-dismiss="alert">×</button>
  This is a warning alert — check it out!
</div>

<div class="alert alert-dark-info alert-dismissible fade show">
  <button type="button" class="close" data-dismiss="alert">×</button>
  This is an info alert — check it out!
</div>

<div class="alert alert-dark-dark alert-dismissible fade show">
  <button type="button" class="close" data-dismiss="alert">×</button>
  This is a dark alert — check it out!
</div>

This is a primary alert — check it out!

This is a secondary alert — check it out!

This is a success alert — check it out!

This is a danger alert — check it out!

This is a warning alert — check it out!

This is an info alert — check it out!

This is a dark alert — check it out!

Tooltips

Position</>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Right</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Left</button>

<!-- Javascript -->
<script>
  $(function() {
    if ($('html').attr('dir') === 'rtl' || $('body').attr('dir') === 'rtl') {
      $('#tooltip-position-demo [data-placement=right]').attr('data-placement', 'left').addClass('rtled');
      $('#tooltip-position-demo [data-placement=left]:not(.rtled)').attr('data-placement', 'right').addClass('rtled');
    }
  });
</script>
<!-- / Javascript -->

Variations</>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-state="primary" title="Primary tooltip">Primary</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-state="secondary" title="Secondary tooltip">Secondary</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" data-state="success" title="Success tooltip">Success</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-state="info" title="Info tooltip">Info</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-state="warning" title="Warning tooltip">Warning</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" data-state="danger" title="Danger tooltip">Danger</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-state="dark" title="Dark tooltip">Dark</button>

<!-- Javascript -->
<script>
  $(function() {
    if ($('html').attr('dir') === 'rtl' || $('body').attr('dir') === 'rtl') {
      $('#tooltip-variations-demo [data-placement=right]').attr('data-placement', 'left').addClass('rtled');
      $('#tooltip-variations-demo [data-placement=left]:not(.rtled)').attr('data-placement', 'right').addClass('rtled');
    }
  });
</script>
<!-- / Javascript -->

Popovers

Position</>

<button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover title">Popover on right</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover title">Popover on top</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover title">Popover on bottom</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover title">Popover on left</button>

<!-- Javascript -->
<script>
  $(function() {
    if ($('html').attr('dir') === 'rtl' || $('body').attr('dir') === 'rtl') {
      $('#popover-position-demo [data-placement=right]').attr('data-placement', 'left').addClass('rtled');
      $('#popover-position-demo [data-placement=left]:not(.rtled)').attr('data-placement', 'right').addClass('rtled');
    }
  });
</script>
<!-- / Javascript -->

Variations</>

<button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" data-state="primary" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover title">Primary</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" data-state="success" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover title">Success</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="bottom" data-state="info" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover title">Info</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="left" data-state="warning" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover title">Warning</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" data-state="danger" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover title">Danger</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" data-state="dark" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover title">Dark</button>

<!-- Javascript -->
<script>
  $(function() {
    if ($('html').attr('dir') === 'rtl' || $('body').attr('dir') === 'rtl') {
      $('#popover-variations-demo [data-placement=right]').attr('data-placement', 'left').addClass('rtled');
      $('#popover-variations-demo [data-placement=left]:not(.rtled)').attr('data-placement', 'right').addClass('rtled');
    }
  });
</script>
<!-- / Javascript -->

Modals

Default modals</>

<div class="mb-3">
  <label class="custom-control custom-radio">
    <input name="modals-default-size" type="radio" class="custom-control-input" value="lg">
    <span class="custom-control-label">Large</span>
  </label>
  <label class="custom-control custom-radio">
    <input name="modals-default-size" type="radio" class="custom-control-input" value="md" checked>
    <span class="custom-control-label">Medium</span>
  </label>
  <label class="custom-control custom-radio">
    <input name="modals-default-size" type="radio" class="custom-control-input" value="sm">
    <span class="custom-control-label">Small</span>
  </label>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modals-default">Show</button>

<script>
  $(function() {
    $('[name=modals-default-size]').on('change', function() {
      $('#modals-default .modal-dialog').removeClass('modal-sm').removeClass('modal-lg');

      if (this.value !== 'md') {
        $('#modals-default .modal-dialog').addClass('modal-' + this.value);
      }
    });
  });
</script>

<!-- Modal template -->
<div class="modal fade" id="modals-default">
  <div class="modal-dialog">
    <form class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">
          Payment
          <span class="font-weight-light">Information</span>
          <br>
          <small class="text-muted">We need payment information to process your order.</small>
        </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
      </div>
      <div class="modal-body">
        <div class="form-row">
          <div class="form-group col">
            <label class="form-label">Card number</label>
            <input type="text" class="form-control" placeholder="XXXX XXXX XXXX XXXX">
          </div>
        </div>
        <div class="form-row">
          <div class="form-group col mb-0">
            <label class="form-label">Expiration date</label>
            <input type="text" class="form-control" placeholder="DD / MM">
          </div>
          <div class="form-group col mb-0">
            <label class="form-label">Card holder</label>
            <input type="text" class="form-control" placeholder="Name on card">
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save</button>
      </div>
    </form>
  </div>
</div>

Large Medium Small

Top modals</>

<div class="mb-3">
  <label class="custom-control custom-radio">
    <input name="modals-top-size" type="radio" class="custom-control-input" value="lg">
    <span class="custom-control-label">Large</span>
  </label>
  <label class="custom-control custom-radio">
    <input name="modals-top-size" type="radio" class="custom-control-input" value="md" checked>
    <span class="custom-control-label">Medium</span>
  </label>
  <label class="custom-control custom-radio">
    <input name="modals-top-size" type="radio" class="custom-control-input" value="sm">
    <span class="custom-control-label">Small</span>
  </label>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modals-top">Show</button>

<script>
  $(function() {
    $('[name=modals-top-size]').on('change', function() {
      $('#modals-top .modal-dialog').removeClass('modal-sm').removeClass('modal-lg');

      if (this.value !== 'md') {
        $('#modals-top .modal-dialog').addClass('modal-' + this.value);
      }
    });
  });
</script>

<!-- Modal template -->
<div class="modal modal-top fade" id="modals-top">
  <div class="modal-dialog">
    <form class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">
          Payment
          <span class="font-weight-light">Information</span>
          <br>
          <small class="text-muted">We need payment information to process your order.</small>
        </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
      </div>
      <div class="modal-body">
        <div class="form-row">
          <div class="form-group col">
            <label class="form-label">Card number</label>
            <input type="text" class="form-control" placeholder="XXXX XXXX XXXX XXXX">
          </div>
        </div>
        <div class="form-row">
          <div class="form-group col mb-0">
            <label class="form-label">Expiration date</label>
            <input type="text" class="form-control" placeholder="DD / MM">
          </div>
          <div class="form-group col mb-0">
            <label class="form-label">Card holder</label>
            <input type="text" class="form-control" placeholder="Name on card">
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save</button>
      </div>
    </form>
  </div>
</div>

Large Medium Small

Slide modals</>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modals-slide">Show</button>

<!-- Modal template -->
<div class="modal modal-slide fade" id="modals-slide">
  <div class="modal-dialog">
    <form class="modal-content">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
      <div class="modal-body">
        <p class="text-center text-big mb-4">Before you proceed, you have to login to make the necessary changes</p>
        <button type="button" class="btn btn-primary btn-block">Continue</button>
        <button type="button" class="btn btn-default btn-block" data-dismiss="modal">Cancel</button>
      </div>
    </form>
  </div>
</div>

Fill-In modals</>

<div class="mb-3">
  <label class="custom-control custom-radio">
    <input name="modals-fill-in-size" type="radio" class="custom-control-input" value="lg">
    <span class="custom-control-label">Large</span>
  </label>
  <label class="custom-control custom-radio">
    <input name="modals-fill-in-size" type="radio" class="custom-control-input" value="md" checked>
    <span class="custom-control-label">Medium</span>
  </label>
  <label class="custom-control custom-radio">
    <input name="modals-fill-in-size" type="radio" class="custom-control-input" value="sm">
    <span class="custom-control-label">Small</span>
  </label>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modals-fill-in">Show</button>

<script>
  $(function() {
    $('[name=modals-fill-in-size]').on('change', function() {
      $('#modals-fill-in .modal-dialog').removeClass('modal-sm').removeClass('modal-lg');

      if (this.value !== 'md') {
        $('#modals-fill-in .modal-dialog').addClass('modal-' + this.value);
      }
    });
  });
</script>

<!-- Modal template -->
<div class="modal modal-fill-in fade" id="modals-fill-in">
  <div class="modal-dialog">
    <div class="modal-content">
      <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">×</button>
      <div class="modal-body">
        <p class="text-white text-large font-weight-light mb-3">Subscribe to our newsletter</p>
        <div class="input-group input-group-lg mb-3">
          <input type="text" class="form-control bg-white border-0" placeholder="Your email">
          <span class="input-group-append">
            <button class="btn btn-primary" type="button">Subscribe</button>
          </span>
        </div>
        <div class="text-center text-right text-white opacity-50">We will not sell/rent your email address</div>
      </div>
    </div>
  </div>
</div>

Large Medium Small

Breadcrumbs

Example</>

<ol class="breadcrumb">
  <li class="breadcrumb-item active">Home</li>
</ol>
<ol class="breadcrumb">
  <li class="breadcrumb-item">
    <a href="#">Home</a>
  </li>
  <li class="breadcrumb-item active">Library</li>
</ol>
<ol class="breadcrumb">
  <li class="breadcrumb-item">
    <a href="#">Home</a>
  </li>
  <li class="breadcrumb-item">
    <a href="#">Library</a>
  </li>
  <li class="breadcrumb-item active">Data</li>
</ol>

Form controls

Inputs</>

<input type="text" class="form-control" placeholder="Text input">

Textarea</>

<textarea class="form-control" rows="3"></textarea>

Checkboxes and radios</>

<!-- Checkboxes -->
<div>
  <label class="form-check">
    <input class="form-check-input" type="checkbox" value>
    <div class="form-check-label">
      Option one is this and that—be sure to include why it's great
    </div>
  </label>
  <label class="form-check">
    <input class="form-check-input" type="checkbox" value disabled>
    <div class="form-check-label">
      Option two is disabled
    </div>
  </label>
</div>

<!-- Radios -->
<div>
  <label class="form-check">
    <input class="form-check-input" type="radio" value="option1" name="radios-example" checked>
    <div class="form-check-label">
      Option one is this and that—be sure to include why it's great
    </div>
  </label>
  <label class="form-check">
    <input class="form-check-input" type="radio" value="option2" name="radios-example">
    <div class="form-check-label">
      Option two can be something else and selecting it will deselect option one
    </div>
  </label>
  <label class="form-check">
    <input class="form-check-input" type="radio" value="option3" name="radios-example" disabled>
    <div class="form-check-label">
      Option three is disabled
    </div>
  </label>
</div>

Option one is this and that—be sure to include why it's great

Option two is disabled

Option one is this and that—be sure to include why it's great

Option two can be something else and selecting it will deselect option one

Option three is disabled

Inline checkboxes and radios</>

<!-- Checkboxes -->
<div>
  <label class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" value="option1">
    <span class="form-check-label">
      1
    </span>
  </label>
  <label class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" value="option2">
    <span class="form-check-label">
      2
    </span>
  </label>
  <label class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" value="option3" disabled>
    <span class="form-check-label">
      3
    </span>
  </label>
</div>

<!-- Radios -->
<div>
  <label class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inline-radios-example" value="option1">
    <span class="form-check-label">
      1
    </span>
  </label>
  <label class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inline-radios-example" value="option2">
    <span class="form-check-label">
      2
    </span>
  </label>
  <label class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inline-radios-example" value="option3" disabled>
    <span class="form-check-label">
      3
    </span>
  </label>
</div>

1 2 3

Checkboxes and radios without label text</>

<label class="form-check">
  <input class="form-check-input" type="checkbox" value="option1">
</label>

<label class="form-check">
  <input class="form-check-input" type="radio" value="option1">
</label>

Selects</>

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<!-- Multiple -->
<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Inverted</>

<div class="bg-dark p-4">
  <input type="text" class="form-control form-control-inverted" placeholder="Text input">

  <textarea class="form-control form-control-inverted" rows="3"></textarea>

  <select class="form-control form-control-inverted">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>

Disabled</>

<fieldset disabled>
  <div class="form-group">
    <label class="form-label">Disabled input</label>
    <input type="text" class="form-control" placeholder="Disabled input">
  </div>
  <div class="form-group">
    <label class="form-label">Disabled select menu</label>
    <select class="form-control">
      <option>Disabled select</option>
    </select>
  </div>
  <label class="form-check">
    <input class="form-check-input" type="checkbox" value disabled>
    <div class="form-check-label">
      Can't check this
    </div>
  </label>
  <button type="submit" class="btn btn-primary">Submit</button>
</fieldset>

<div class="bg-dark p-4">
  <input type="text" class="form-control form-control-inverted" placeholder="Text input" disabled>

  <textarea class="form-control form-control-inverted" rows="3" disabled></textarea>

  <select class="form-control form-control-inverted" disabled>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>

Disabled input

Disabled select menu

Can't check this

Read only</>

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Sizes</>

<input class="form-control form-control-lg" placeholder=".form-control-lg">
<input class="form-control" placeholder="Default input">
<input class="form-control form-control-sm" placeholder=".form-control-sm">
<select class="form-control form-control-lg">
  <option>.form-control-lg</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>.form-control-sm</option>
</select>

Custom checkboxes and radios

Example</>

<!-- Custom checkbox -->
<label class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input">
  <span class="custom-control-label">Check this custom checkbox</span>
</label>

<!-- Custom radios -->
<div>
  <label class="custom-control custom-control-inline custom-radio">
    <input name="custom-radio" type="radio" class="custom-control-input">
    <span class="custom-control-label">Toggle this custom radio</span>
  </label>
  <label class="custom-control custom-control-inline custom-radio">
    <input name="custom-radio" type="radio" class="custom-control-input">
    <span class="custom-control-label">Or toggle this other custom radio</span>
  </label>
</div>

Check this custom checkbox

Toggle this custom radio Or toggle this other custom radio

Disabled</>

<!-- Custom checkboxes -->
<div>
  <label class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" disabled checked>
    <span class="custom-control-label">Check this custom checkbox</span>
  </label>
  <label class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" disabled>
    <span class="custom-control-label">Check this custom checkbox</span>
  </label>
</div>

<!-- Custom radios -->
<fieldset disabled>
  <label class="custom-control custom-radio">
    <input name="custom-radio-2" type="radio" class="custom-control-input" checked>
    <span class="custom-control-label">Toggle this custom radio</span>
  </label>
  <label class="custom-control custom-radio">
    <input name="custom-radio-2" type="radio" class="custom-control-input">
    <span class="custom-control-label">Or toggle this other custom radio</span>
  </label>
</fieldset>

Check this custom checkbox Check this custom checkbox

Toggle this custom radio Or toggle this other custom radio

Validations states</>

<div class="form-group">
  <label class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input is-valid">
    <span class="custom-control-label">Valid state</span>
  </label>
</div>

<div class="form-group">
  <label class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input is-invalid">
    <span class="custom-control-label">Invalid state</span>
  </label>
</div>

Valid state

Invalid state

Stacked</>

<div class="custom-controls-stacked">
  <label class="custom-control custom-radio">
    <input name="custom-radio-3" type="radio" class="custom-control-input" checked>
    <span class="custom-control-label">Toggle this custom radio</span>
  </label>
  <label class="custom-control custom-radio">
    <input name="custom-radio-3" type="radio" class="custom-control-input">
    <span class="custom-control-label">Or toggle this other custom radio</span>
  </label>
  <label class="custom-control custom-radio">
    <input name="custom-radio-3" type="radio" class="custom-control-input">
    <span class="custom-control-label">Or toggle this other custom radio</span>
  </label>
</div>

Toggle this custom radio Or toggle this other custom radio Or toggle this other custom radio

Custom select

Example</>

<select class="custom-select">
  <option selected>Open this select menu</option>
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
</select>
<select class="custom-select" multiple>
  <option>Open this select menu</option>
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
</select>

Sizes</>

<select class="custom-select custom-select-lg">
  <option selected>Open this select menu</option>
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
</select>
<select class="custom-select custom-select-lg" multiple>
  <option>Open this select menu</option>
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
</select>

<select class="custom-select custom-select-sm">
  <option selected>Open this select menu</option>
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
</select>
<select class="custom-select custom-select-sm" multiple>
  <option>Open this select menu</option>
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
</select>

Inverted</>

<div class="bg-dark p-4">
  <select class="custom-select custom-select-inverted">
    <option selected>Open this select menu</option>
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
  </select>
</div>

Disabled</>

<select class="custom-select" disabled>
  <option selected>Open this select menu</option>
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
</select>

<div class="bg-dark p-4">
  <select class="custom-select custom-select-inverted" disabled>
    <option selected>Open this select menu</option>
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
  </select>
</div>

Validations states</>

<div class="form-group">
  <select class="custom-select is-valid">
    <option selected>Open this select menu</option>
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
  </select>
</div>

<div class="form-group">
  <select class="custom-select is-invalid">
    <option selected>Open this select menu</option>
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
  </select>
</div>

File browser

Example</>

<label class="custom-file">
  <input type="file" class="custom-file-input">
  <span class="custom-file-label"></span>
</label>

Disabled</>

<label class="custom-file">
  <input type="file" class="custom-file-input" disabled>
  <span class="custom-file-label"></span>
</label>

Validations states</>

<label class="custom-file">
  <input type="file" class="custom-file-input is-valid">
  <span class="custom-file-label"></span>
</label>

<label class="custom-file">
  <input type="file" class="custom-file-input is-invalid">
  <span class="custom-file-label"></span>
</label>

Forms

Example</>

<form>
  <div class="form-group">
    <label class="form-label">Email address</label>
    <input type="email" class="form-control" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="form-label">Password</label>
    <input type="password" class="form-control" placeholder="Password">
  </div>
  <div class="form-group">
    <label class="form-label w-100">File input</label>
    <input type="file">
    <small class="form-text text-muted">Example block-level help text here.</small>
  </div>
  <div class="form-group">
    <label class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input">
      <span class="custom-control-label">Check this custom checkbox</span>
    </label>
  </div>
  <div class="form-group">
    <label class="form-check">
      <input class="form-check-input" type="checkbox" checked>
      <div class="form-check-label">
        Check me out
      </div>
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Form row</>

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label class="form-label">Email</label>
      <input type="email" class="form-control" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label class="form-label">Password</label>
      <input type="password" class="form-control" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <label class="form-label">Address</label>
    <input type="text" class="form-control" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label class="form-label">Address 2</label>
    <input type="text" class="form-control" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label class="form-label">City</label>
      <input type="text" class="form-control">
    </div>
    <div class="form-group col-md-4">
      <label class="form-label">State</label>
      <select class="custom-select">
        <option>Select state</option>
        <option>California</option>
        <option>Hawaii</option>
        <option>Florida</option>
        <option>Texas</option>
        <option>Massachusetts</option>
        <option>Alabama</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label class="form-label">Zip</label>
      <input type="text" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <label class="custom-control custom-checkbox m-0">
      <input type="checkbox" class="custom-control-input">
      <span class="custom-control-label">Check this custom checkbox</span>
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Horizontal</>

<form>
  <div class="form-group row">
    <label class="col-form-label col-sm-2 text-sm-right">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label class="col-form-label col-sm-2 text-sm-right">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" placeholder="Password">
    </div>
  </div>
  <div class="form-group row">
    <label class="col-form-label col-sm-2 text-sm-right">Textarea</label>
    <div class="col-sm-10">
      <textarea class="form-control" placeholder="Textarea"></textarea>
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <label class="col-form-label col-sm-2 text-sm-right mt-sm-0">Radios</label>
      <div class="col-sm-10">
        <div class="custom-controls-stacked">
          <label class="custom-control custom-radio">
            <input name="custom-radio-3" type="radio" class="custom-control-input" checked>
            <span class="custom-control-label">Option one is this and that—be sure to include why it's great</span>
          </label>
          <label class="custom-control custom-radio">
            <input name="custom-radio-3" type="radio" class="custom-control-input">
            <span class="custom-control-label">Option two can be something else and selecting it will deselect option one</span>
          </label>
          <label class="custom-control custom-radio">
            <input name="custom-radio-3" type="radio" class="custom-control-input" disabled>
            <span class="custom-control-label">Option three is disabled</span>
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <label class="col-form-label col-sm-2 text-sm-right mt-sm-0">Checkbox</label>
    <div class="col-sm-10">
      <label class="custom-control custom-checkbox m-0">
        <input type="checkbox" class="custom-control-input">
        <span class="custom-control-label">Check me out</span>
      </label>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10 ml-sm-auto">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>

Email

Password

Textarea

Radios

Option one is this and that—be sure to include why it's great Option two can be something else and selecting it will deselect option one Option three is disabled

Checkbox

Check me out

Inline</>

<form class="form-inline">
  <label class="sr-only">Name</label>
  <input type="text" class="form-control mr-sm-2 mb-2 mb-sm-0" placeholder="Jane Doe">

  <label class="sr-only">Username</label>
  <div class="input-group mr-sm-2 mb-2 mb-sm-0">
    <div class="input-group-prepend">
      <span class="input-group-text">@</span>
    </div>
    <input type="text" class="form-control" placeholder="Username">
  </div>

  <label class="form-check mr-sm-2 mb-2 mb-sm-0">
    <input class="form-check-input" type="checkbox">
    <div class="form-check-label">
      Remember me
    </div>
  </label>

  <button type="submit" class="btn btn-primary">Submit</button>
</form>

<form class="form-inline">
  <label class="form-label mr-sm-2">Preference</label>
  <select class="custom-select mr-sm-2 mb-2 mb-sm-0">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <label class="custom-control custom-checkbox mr-sm-2 mb-2 mb-sm-0">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-label">Remember my preference</span>
  </label>

  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Help text</>

<form>
  <div class="form-group">
    <label class="form-label">Password</label>
    <input type="password" class="form-control">
    <small class="form-text text-muted">
      Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
    </small>
  </div>
</form>

<form class="form-inline">
  <label class="form-label">Password</label>
  <input type="password" class="form-control mx-sm-3">
  <small class="form-text text-muted">
    Must be 8-20 characters long.
  </small>
</form>

Static controls</>

<form>
  <div class="form-group row">
    <label class="col-form-label col-sm-2 text-sm-right">Email</label>
    <div class="col-sm-10">
      <div class="form-control-plaintext">example.email.com</div>
    </div>
  </div>
  <div class="form-group row">
    <label class="col-form-label col-sm-2 text-sm-right">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" placeholder="Password">
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10 ml-sm-auto">
      <button type="submit" class="btn btn-default">Confirm identity</button>
    </div>
  </div>
</form>

<!-- Inline form -->
<form class="form-inline">
  <div class="form-control-plaintext mr-sm-2 mb-2 mb-sm-0">example.email.com</div>
  <input type="password" class="form-control mr-sm-2 mb-2 mb-sm-0" placeholder="Password">
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

States</>

<!-- Valid -->
<div class="form-group">
  <label class="form-label">Valid</label>
  <input type="text" class="form-control is-valid">
  <small class="valid-feedback">A block of help text that breaks onto a new line and may extend beyond one line.</small>
</div>

<!-- Invalid -->
<div class="form-group">
  <label class="form-label">Invalid</label>
  <input type="text" class="form-control is-invalid">
  <small class="invalid-feedback">A block of help text that breaks onto a new line and may extend beyond one line.</small>
</div>

<!-- With tooltip -->
<div class="form-group position-relative">
  <label class="form-label">Invalid with tooltip</label>
  <input type="text" class="form-control is-invalid">
  <div class="invalid-tooltip">Please provide a valid state.</div>
</div>

Valid A block of help text that breaks onto a new line and may extend beyond one line.

Invalid A block of help text that breaks onto a new line and may extend beyond one line.

Invalid with tooltip

Sizes</>

<form>
  <!-- Large -->
  <div class="form-group">
    <label class="form-label form-label-lg">Large label</label>
    <input type="text" class="form-control form-control-lg" placeholder="Large input">
  </div>

  <!-- Small -->
  <div class="form-group">
    <label class="form-label form-label-sm">Small label</label>
    <input type="text" class="form-control form-control-sm" placeholder="Small input">
  </div>
</form>

<form>
  <!-- Large -->
  <div class="form-group row">
    <label class="col-form-label col-form-label-lg col-sm-2 text-sm-right">Large label</label>
    <div class="col-sm-10">
      <input type="text" class="form-control form-control-lg" placeholder="Large input">
    </div>
  </div>

  <!-- Small -->
  <div class="form-group row">
    <label class="col-form-label col-form-label-sm col-sm-2 text-sm-right">Small label</label>
    <div class="col-sm-10">
      <input type="text" class="form-control form-control-sm" placeholder="Small input">
    </div>
  </div>
</form>

Input groups

Example</>

<div class="input-group">
  <div class="input-group-prepend">
    <div class="input-group-text">@</div>
  </div>
  <input type="text" class="form-control" placeholder="Username">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username">
  <div class="input-group-append">
    <div class="input-group-text">@example.com</div>
  </div>
</div>

<div class="input-group">
  <div class="input-group-prepend">
    <div class="input-group-text">https://example.com/users/</div>
  </div>
  <input type="text" class="form-control">
</div>

<div class="input-group">
  <div class="input-group-prepend">
    <div class="input-group-text">$</div>
  </div>
  <input type="text" class="form-control">
  <div class="input-group-append">
    <div class="input-group-text">.00</div>
  </div>
</div>

<div class="input-group">
  <div class="input-group-prepend">
    <div class="input-group-text">$</div>
    <span class="input-group-text">0.00</span>
  </div>
  <input type="text" class="form-control">
</div>

@

@example.com

https://example.com/users/

$

.00

$

0.00

Sizing</>

<div class="input-group input-group-lg">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username">
</div>

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username">
</div>

<div class="input-group input-group-sm">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username">
</div>

@

Checkbox and radio addons</>

<div class="row">
  <div class="col-md">

    <div class="form-group">
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">
            <input type="checkbox">
          </div>
        </div>
        <input type="text" class="form-control">
      </div>
    </div>

  </div>
  <div class="col-md">

    <div class="form-group">
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">
            <input type="radio">
          </div>
        </div>
        <input type="text" class="form-control">
      </div>
    </div>

  </div>
  <div class="w-100"></div>
  <div class="col-md">

    <!-- Custom checkbox -->
    <div class="form-group">
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">
            <label class="custom-control custom-checkbox px-2 m-0">
              <input type="checkbox" class="custom-control-input">
              <span class="custom-control-label"></span>
            </label>
          </div>
        </div>
        <input type="text" class="form-control">
      </div>
    </div>

  </div>
  <div class="col-md">

    <!-- Custom radio -->
    <div class="form-group">
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">
            <label class="custom-control custom-radio px-2 m-0">
              <input type="radio" class="custom-control-input">
              <span class="custom-control-label"></span>
            </label>
          </div>
        </div>
        <input type="text" class="form-control">
      </div>
    </div>

  </div>
</div>

Custom select</>

<div class="input-group">
  <select class="custom-select flex-grow-1">
    <option>Select...</option>
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
  </select>
  <span class="input-group-append">
    <button class="btn btn-secondary" type="button">Go!</button>
  </span>
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Search for...">
  <select class="custom-select">
    <option>Select...</option>
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
  </select>
  <span class="input-group-append">
    <button class="btn btn-secondary" type="button">Go!</button>
  </span>
</div>

<div class="input-group">
  <select class="custom-select">
    <option>Select...</option>
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
  </select>
  <input type="text" class="form-control" placeholder="Search for...">
  <span class="input-group-append">
    <button class="btn btn-secondary" type="button">Go!</button>
  </span>
</div>

<div class="input-group">
  <span class="input-group-prepend">
    <button class="btn btn-secondary" type="button">Go!</button>
  </span>
  <input type="text" class="form-control" placeholder="Search for...">
  <select class="custom-select">
    <option>Select...</option>
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
  </select>
</div>

Multiple addons</>

<div class="row">
  <div class="col-md">

    <div class="form-group">
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">
            <input type="checkbox">
          </div>
          <div class="input-group-text">$</div>
        </div>
        <input type="text" class="form-control">
      </div>
    </div>

  </div>
  <div class="col-md">

    <div class="form-group">
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">$</div>
          <div class="input-group-text">0.00</div>
        </div>
        <input type="text" class="form-control">
      </div>
    </div>

  </div>
</div>

$

0.00

Button addons</>

<div class="row">
  <div class="col-md">

    <div class="form-group">
      <div class="input-group">
        <span class="input-group-prepend">
          <button class="btn btn-secondary" type="button">Go!</button>
        </span>
        <input type="text" class="form-control" placeholder="Search for...">
      </div>
    </div>

  </div>
  <div class="col-md">

    <div class="form-group">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search for...">
        <span class="input-group-append">
          <button class="btn btn-secondary" type="button">Go!</button>
        </span>
      </div>
    </div>

  </div>
  <div class="w-100"></div>
  <div class="col-md">

    <div class="form-group">
      <div class="input-group">
        <span class="input-group-prepend">
          <button class="btn btn-secondary" type="button">Hate it</button>
        </span>
        <input type="text" class="form-control" placeholder="Product name">
        <span class="input-group-append">
          <button class="btn btn-secondary" type="button">Love it</button>
        </span>
      </div>
    </div>

  </div>
</div>

Buttons with dropdowns</>

<div class="row">
  <div class="col-md">

    <div class="input-group">
      <div class="input-group-prepend">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Action</button>
        <div class="dropdown-menu">
          <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 role="separator" class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Separated link</a>
        </div>
      </div>
      <input type="text" class="form-control">
    </div>

  </div>
  <div class="col-md">

    <div class="input-group">
      <input type="text" class="form-control">
      <div class="input-group-append">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Action</button>
        <div class="dropdown-menu dropdown-menu-right">
          <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 role="separator" class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Separated link</a>
        </div>
      </div>
    </div>

  </div>
</div>

<!-- Javascript -->
<script>
  $(function() {
    if ($('html').attr('dir') === 'rtl' || $('body').attr('dir') === 'rtl') {
      $('#button-dropdown-input-group-demo .dropdown-menu-right').removeClass('dropdown-menu-right').addClass('rtled');
      $('#button-dropdown-input-group-demo .dropdown-menu:not(.rtled)').addClass('dropdown-menu-right');
    }
  });
</script>
<!-- / Javascript -->

Segmented buttons</>

<div class="row">
  <div class="col-md">

    <div class="input-group">
      <div class="input-group-prepend">
        <button type="button" class="btn btn-secondary">Action</button>
        <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
        <div class="dropdown-menu">
          <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 role="separator" class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Separated link</a>
        </div>
      </div>
      <input type="text" class="form-control">
    </div>

  </div>
  <div class="col-md">

    <div class="input-group">
      <input type="text" class="form-control">
      <div class="input-group-append">
        <button type="button" class="btn btn-secondary">Action</button>
        <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
        <div class="dropdown-menu dropdown-menu-right">
          <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 role="separator" class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Separated link</a>
        </div>
      </div>
    </div>

  </div>
</div>

<!-- Javascript -->
<script>
  $(function() {
    if ($('html').attr('dir') === 'rtl' || $('body').attr('dir') === 'rtl') {
      $('#segmented-button-dropdown-input-group-demo .dropdown-menu-right').removeClass('dropdown-menu-right').addClass('rtled');
      $('#segmented-button-dropdown-input-group-demo .dropdown-menu:not(.rtled)').addClass('dropdown-menu-right');
    }
  });
</script>
<!-- / Javascript -->

Switchers

Example</>

<label class="switcher">
  <input type="checkbox" class="switcher-input">
  <span class="switcher-indicator">
    <span class="switcher-yes"></span>
    <span class="switcher-no"></span>
  </span>
  <span class="switcher-label">Default</span>
</label>

Default

With icon</>

<label class="switcher">
  <input type="checkbox" class="switcher-input">
  <span class="switcher-indicator">
    <span class="switcher-yes">
      <span class="ion ion-md-checkmark"></span>
    </span>
    <span class="switcher-no">
      <span class="ion ion-md-close"></span>
    </span>
  </span>
  <span class="switcher-label">With icon</span>
</label>

With icon

Square</>

<label class="switcher switcher-square">
  <input type="checkbox" class="switcher-input">
  <span class="switcher-indicator">
    <span class="switcher-yes"></span>
    <span class="switcher-no"></span>
  </span>
  <span class="switcher-label">Square</span>
</label>

Square

Sizes</>

<label class="switcher switcher-sm">
  <input type="checkbox" class="switcher-input">
  <span class="switcher-indicator">
    <span class="switcher-yes">
      <span class="ion ion-md-checkmark"></span>
    </span>
    <span class="switcher-no">
      <span class="ion ion-md-close"></span>
    </span>
  </span>
  <span class="switcher-label">Small</span>
</label>

<br>

<label class="switcher switcher-lg">
  <input type="checkbox" class="switcher-input">
  <span class="switcher-indicator">
    <span class="switcher-yes">
      <span class="ion ion-md-checkmark"></span>
    </span>
    <span class="switcher-no">
      <span class="ion ion-md-close"></span>
    </span>
  </span>
  <span class="switcher-label">Large</span>
</label>

Small
Large

Variations</>

<label class="switcher switcher-success">
  <input type="checkbox" class="switcher-input" checked>
  <span class="switcher-indicator">
    <span class="switcher-yes">
      <span class="ion ion-md-checkmark"></span>
    </span>
    <span class="switcher-no">
      <span class="ion ion-md-close"></span>
    </span>
  </span>
  <span class="switcher-label">Success</span>
</label>

<label class="switcher switcher-info">
  <input type="checkbox" class="switcher-input" checked>
  <span class="switcher-indicator">
    <span class="switcher-yes">
      <span class="ion ion-md-checkmark"></span>
    </span>
    <span class="switcher-no">
      <span class="ion ion-md-close"></span>
    </span>
  </span>
  <span class="switcher-label">Info</span>
</label>

<label class="switcher switcher-warning">
  <input type="checkbox" class="switcher-input" checked>
  <span class="switcher-indicator">
    <span class="switcher-yes">
      <span class="ion ion-md-checkmark"></span>
    </span>
    <span class="switcher-no">
      <span class="ion ion-md-close"></span>
    </span>
  </span>
  <span class="switcher-label">Warning</span>
</label>

<label class="switcher switcher-danger">
  <input type="checkbox" class="switcher-input" checked>
  <span class="switcher-indicator">
    <span class="switcher-yes">
      <span class="ion ion-md-checkmark"></span>
    </span>
    <span class="switcher-no">
      <span class="ion ion-md-close"></span>
    </span>
  </span>
  <span class="switcher-label">Danger</span>
</label>

<label class="switcher switcher-secondary">
  <input type="checkbox" class="switcher-input" checked>
  <span class="switcher-indicator">
    <span class="switcher-yes">
      <span class="ion ion-md-checkmark"></span>
    </span>
    <span class="switcher-no">
      <span class="ion ion-md-close"></span>
    </span>
  </span>
  <span class="switcher-label">Secondary</span>
</label>

<label class="switcher switcher-dark">
  <input type="checkbox" class="switcher-input" checked>
  <span class="switcher-indicator">
    <span class="switcher-yes">
      <span class="ion ion-md-checkmark"></span>
    </span>
    <span class="switcher-no">
      <span class="ion ion-md-close"></span>
    </span>
  </span>
  <span class="switcher-label">Dark</span>
</label>

Success Info Warning Danger Secondary Dark

Disabled</>

<div>
  <label class="switcher">
    <input type="checkbox" class="switcher-input" disabled>
    <span class="switcher-indicator">
      <span class="switcher-yes"></span>
      <span class="switcher-no"></span>
    </span>
    <span class="switcher-label">Default - OFF</span>
  </label>

  <label class="switcher">
    <input type="checkbox" class="switcher-input" checked disabled>
    <span class="switcher-indicator">
      <span class="switcher-yes"></span>
      <span class="switcher-no"></span>
    </span>
    <span class="switcher-label">Default - ON</span>
  </label>
</div>

<fieldset disabled>
  <label class="switcher switcher-success">
    <input type="checkbox" class="switcher-input" checked>
    <span class="switcher-indicator">
      <span class="switcher-yes"></span>
      <span class="switcher-no"></span>
    </span>
    <span class="switcher-label">Success - ON</span>
  </label>
</fieldset>

Default - OFF Default - ON

Success - ON

Validation states</>

<div class="form-group">
  <label class="switcher">
    <input type="checkbox" class="switcher-input is-valid" checked>
    <span class="switcher-indicator">
      <span class="switcher-yes"></span>
      <span class="switcher-no"></span>
    </span>
    <span class="switcher-label">Valid</span>
  </label>
</div>

<div class="form-group has-error">
  <label class="switcher">
    <input type="checkbox" class="switcher-input is-invalid" checked>
    <span class="switcher-indicator">
      <span class="switcher-yes"></span>
      <span class="switcher-no"></span>
    </span>
    <span class="switcher-label">Invalid</span>
  </label>
</div>

Valid

Invalid

Stacked</>

<div class="switchers-stacked">
  <label class="switcher">
    <input type="radio" class="switcher-input" name="switchers-stacked-radio" checked>
    <span class="switcher-indicator">
      <span class="switcher-yes"></span>
      <span class="switcher-no"></span>
    </span>
    <span class="switcher-label">Option 1</span>
  </label>

  <label class="switcher">
    <input type="radio" class="switcher-input" name="switchers-stacked-radio">
    <span class="switcher-indicator">
      <span class="switcher-yes"></span>
      <span class="switcher-no"></span>
    </span>
    <span class="switcher-label">Option 2</span>
  </label>

  <label class="switcher">
    <input type="radio" class="switcher-input" name="switchers-stacked-radio">
    <span class="switcher-indicator">
      <span class="switcher-yes"></span>
      <span class="switcher-no"></span>
    </span>
    <span class="switcher-label">Option 3</span>
  </label>
</div>

Option 1 Option 2 Option 3

App brand

Examples</>

<div class="ui-bordered p-4 mb-4">
  <div class="app-brand">
    <a href="#" class="app-brand-text text-dark text-big">Brand</a>
  </div>
</div>

<div class="ui-bordered p-4">
  <div class="app-brand">
    <img src="assets/img/logo.png" alt class="app-brand-logo ui-w-40">
    <a href="#" class="app-brand-text text-dark text-big ml-2">Brand</a>
  </div>
</div>

Brand

Within navbar</>

<nav class="navbar navbar-expand-lg bg-light">
  <!-- Brand -->
  <a class="navbar-brand app-brand" href="#">
    <img src="assets/img/logo.png" alt class="app-brand-logo ui-w-40">
    <span class="app-brand-text ml-2">Brand</span>
  </a>
  <!-- / Brand -->

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-app-brand-example">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbar-app-brand-example">
    <div class="navbar-nav mr-auto">
      <a class="nav-item nav-link active" href="#">Home</a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
    </div>
  </div>
</nav>

Within sidenav</>

<div>
  <button type="button" id="sidenav-app-brand-toggle-collapsed" class="btn btn-primary mb-4">Toggle collapsed</button>
</div>

<!-- Simple text -->

<div id="sidenav-app-brand-1" class="sidenav sidenav-vertical d-inline-flex bg-light align-top mr-4 mb-4" style="height: 400px">
  <!-- Brand -->
  <div class="app-brand py-3">
    <a href="#" class="app-brand-text sidenav-text text-big">Brand</a>
  </div>
  <div class="sidenav-divider my-0"></div>
  <!-- / Brand -->

  <ul class="sidenav-inner py-3">
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-notifications-outline"></i>
        <div>Item 1</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-settings"></i>
        <div>Item 2</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-paper"></i>
        <div>Item 3</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-flask"></i>
        <div>Item 4</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-basketball"></i>
        <div>Item 5</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-bonfire"></i>
        <div>Item 6</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cafe"></i>
        <div>Item 7</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cloud-outline"></i>
        <div>Item 8</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-code"></i>
        <div>Item 9</div>
      </a>
    </li>
  </ul>
</div>

<!-- With logo -->

<div id="sidenav-app-brand-2" class="sidenav sidenav-vertical d-inline-flex bg-light align-top mr-4 mb-4" style="height: 400px">
  <!-- Brand -->
  <div class="app-brand py-3">
    <img src="assets/img/logo.png" alt class="app-brand-logo ui-w-40">
    <a href="#" class="app-brand-text sidenav-text text-big ml-2">
      Brand
      <br>
      <span class="text-tiny font-weight-semibold opacity-25">ADMIN AREA</span>
    </a>
  </div>
  <div class="sidenav-divider my-0"></div>
  <!-- / Brand -->

  <ul class="sidenav-inner py-3">
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-notifications-outline"></i>
        <div>Item 1</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-settings"></i>
        <div>Item 2</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-paper"></i>
        <div>Item 3</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-flask"></i>
        <div>Item 4</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-basketball"></i>
        <div>Item 5</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-bonfire"></i>
        <div>Item 6</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cafe"></i>
        <div>Item 7</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cloud-outline"></i>
        <div>Item 8</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-code"></i>
        <div>Item 9</div>
      </a>
    </li>
  </ul>
</div>

<!-- With layout sidenav toggle -->

<div id="sidenav-app-brand-3" class="sidenav sidenav-vertical d-inline-flex bg-light align-top mr-4 mb-4" style="height: 400px">
  <!-- Brand -->
  <div class="app-brand py-3">
    <img src="assets/img/logo.png" alt class="app-brand-logo ui-w-40">
    <a href="#" class="app-brand-text sidenav-text text-big ml-2">Brand</a>
    <a href="#" class="layout-sidenav-toggle sidenav-link text-large ml-auto">
      <i class="ion ion-md-menu align-middle"></i>
    </a>
  </div>
  <div class="sidenav-divider my-0"></div>
  <!-- / Brand -->

  <ul class="sidenav-inner py-3">
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-notifications-outline"></i>
        <div>Item 1</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-settings"></i>
        <div>Item 2</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-paper"></i>
        <div>Item 3</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-flask"></i>
        <div>Item 4</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-basketball"></i>
        <div>Item 5</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-bonfire"></i>
        <div>Item 6</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cafe"></i>
        <div>Item 7</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cloud-outline"></i>
        <div>Item 8</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-code"></i>
        <div>Item 9</div>
      </a>
    </li>
  </ul>
</div>

<!-- Javascript -->
<script>
$(function() {
  new SideNav($('#sidenav-app-brand-1')[0]);
  new SideNav($('#sidenav-app-brand-2')[0]);
  new SideNav($('#sidenav-app-brand-3')[0]);

  $('#sidenav-app-brand-toggle-collapsed').click(function() {
    $('#sidenav-app-brand-1').toggleClass('sidenav-collapsed');
    $('#sidenav-app-brand-2').toggleClass('sidenav-collapsed');
    $('#sidenav-app-brand-3').toggleClass('sidenav-collapsed');
  });
});
    </script>
<!-- / Javascript -->

Brand

Brand
ADMIN AREA

Brand

Navbar

Example</>

<nav class="navbar navbar-expand-lg bg-light" style="z-index: 20">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-example-1">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbar-example-1">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Dropdown link</a>
        <div class="dropdown-menu">
          <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>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>

    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

<!-- Javascript -->
<script>
  $(function() {
    if ($('html').attr('dir') === 'rtl' || $('body').attr('dir') === 'rtl') {
      $('#navbar-demo .dropdown-menu').addClass('dropdown-menu-right');
    }
  });
</script>
<!-- / Javascript -->

Elements</>

<nav class="navbar navbar-expand-lg bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-example-2">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbar-example-2">
    <div class="navbar-nav mr-auto">
      <a class="nav-item nav-link active" href="#">Home</a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
    </div>

    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

<nav class="navbar navbar-expand-lg bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-example-3">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbar-example-3">
    <div class="navbar-nav mr-auto">
      <a class="nav-item nav-link active" href="#">Home</a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
    </div>

    <form class="form-inline">
      <button class="btn btn-outline-success mr-3" type="button">Main button</button>
      <button class="btn btn-sm btn-outline-secondary align-middle" type="button">Smaller button</button>
    </form>
  </div>
</nav>

<nav class="navbar navbar-expand-lg bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-example-4">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbar-example-4">
    <div class="navbar-nav mr-auto">
      <a class="nav-item nav-link active" href="#">Home</a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
    </div>

    <form class="form-inline">
      <div class="input-group">
        <span class="input-group-prepend">
          <span class="input-group-text">@</span>
        </span>
        <input type="text" class="form-control" placeholder="Username">
      </div>
    </form>
  </div>
</nav>

Styling</>

<div class="bg-light p-3">
  <!-- Theme navbar -->
  <nav class="navbar navbar-expand-lg bg-navbar-theme">
    <a class="navbar-brand" href="#">.bg-navbar-theme</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-example-5">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbar-example-5">
      <div class="navbar-nav mr-auto">
        <a class="nav-item nav-link active" href="#">Home</a>
        <a class="nav-item nav-link" href="#">Features</a>
        <a class="nav-item nav-link" href="#">Pricing</a>
        <a class="nav-item nav-link disabled" href="#">Disabled</a>
      </div>

      <span class="navbar-text">
        Navbar text with an inline element
      </span>
    </div>
  </nav>

  <!-- White navbar -->
  <nav class="navbar navbar-expand-lg bg-white">
    <a class="navbar-brand" href="#">.bg-white</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-example-6">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbar-example-6">
      <div class="navbar-nav mr-auto">
        <a class="nav-item nav-link active" href="#">Home</a>
        <a class="nav-item nav-link" href="#">Features</a>
        <a class="nav-item nav-link" href="#">Pricing</a>
        <a class="nav-item nav-link disabled" href="#">Disabled</a>
      </div>

      <span class="navbar-text">
        Navbar text with an inline element
      </span>
    </div>
  </nav>

  <!-- Primary navbar -->
  <nav class="navbar navbar-expand-lg bg-primary">
    <a class="navbar-brand" href="#">.bg-primary</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-example-7">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbar-example-7">
      <div class="navbar-nav mr-auto">
        <a class="nav-item nav-link active" href="#">Home</a>
        <a class="nav-item nav-link" href="#">Features</a>
        <a class="nav-item nav-link" href="#">Pricing</a>
        <a class="nav-item nav-link disabled" href="#">Disabled</a>
      </div>

      <span class="navbar-text">
        Navbar text with an inline element
      </span>
    </div>
  </nav>

  <!-- Secondary navbar -->
  <nav class="navbar navbar-expand-lg bg-secondary">
    <a class="navbar-brand" href="#">.bg-secondary</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-example-8">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbar-example-8">
      <div class="navbar-nav mr-auto">
        <a class="nav-item nav-link active" href="#">Home</a>
        <a class="nav-item nav-link" href="#">Features</a>
        <a class="nav-item nav-link" href="#">Pricing</a>
        <a class="nav-item nav-link disabled" href="#">Disabled</a>
      </div>

      <span class="navbar-text">
        Navbar text with an inline element
      </span>
    </div>
  </nav>

  <!-- Success navbar -->
  <nav class="navbar navbar-expand-lg bg-success">
    <a class="navbar-brand" href="#">.bg-success</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-example-9">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbar-example-9">
      <div class="navbar-nav mr-auto">
        <a class="nav-item nav-link active" href="#">Home</a>
        <a class="nav-item nav-link" href="#">Features</a>
        <a class="nav-item nav-link" href="#">Pricing</a>
        <a class="nav-item nav-link disabled" href="#">Disabled</a>
      </div>

      <span class="navbar-text">
        Navbar text with an inline element
      </span>
    </div>
  </nav>

  <!-- Info navbar -->
  <nav class="navbar navbar-expand-lg bg-info">
    <a class="navbar-brand" href="#">.bg-info</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-example-10">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbar-example-10">
      <div class="navbar-nav mr-auto">
        <a class="nav-item nav-link active" href="#">Home</a>
        <a class="nav-item nav-link" href="#">Features</a>
        <a class="nav-item nav-link" href="#">Pricing</a>
        <a class="nav-item nav-link disabled" href="#">Disabled</a>
      </div>

      <span class="navbar-text">
        Navbar text with an inline element
      </span>
    </div>
  </nav>

  <!-- Warning navbar -->
  <nav class="navbar navbar-expand-lg bg-warning">
    <a class="navbar-brand" href="#">.bg-warning</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-example-11">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbar-example-11">
      <div class="navbar-nav mr-auto">
        <a class="nav-item nav-link active" href="#">Home</a>
        <a class="nav-item nav-link" href="#">Features</a>
        <a class="nav-item nav-link" href="#">Pricing</a>
        <a class="nav-item nav-link disabled" href="#">Disabled</a>
      </div>

      <span class="navbar-text">
        Navbar text with an inline element
      </span>
    </div>
  </nav>

  <!-- Danger navbar -->
  <nav class="navbar navbar-expand-lg bg-danger">
    <a class="navbar-brand" href="#">.bg-danger</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-example-12">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbar-example-12">
      <div class="navbar-nav mr-auto">
        <a class="nav-item nav-link active" href="#">Home</a>
        <a class="nav-item nav-link" href="#">Features</a>
        <a class="nav-item nav-link" href="#">Pricing</a>
        <a class="nav-item nav-link disabled" href="#">Disabled</a>
      </div>

      <span class="navbar-text">
        Navbar text with an inline element
      </span>
    </div>
  </nav>

  <!-- Dark navbar -->
  <nav class="navbar navbar-expand-lg bg-dark">
    <a class="navbar-brand" href="#">.bg-dark</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-example-13">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbar-example-13">
      <div class="navbar-nav mr-auto">
        <a class="nav-item nav-link active" href="#">Home</a>
        <a class="nav-item nav-link" href="#">Features</a>
        <a class="nav-item nav-link" href="#">Pricing</a>
        <a class="nav-item nav-link disabled" href="#">Disabled</a>
      </div>

      <span class="navbar-text">
        Navbar text with an inline element
      </span>
    </div>
  </nav>
</div>

Layouts</>

<nav class="navbar navbar-expand-lg bg-light">
  <a class="navbar-brand w-lg-100 mr-0" href="#">Brand</a>

  <div class="navbar-text order-lg-2 w-lg-100 text-right small text-truncate">always show</div>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-example-14">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="navbar-collapse collapse order-lg-1 flex-shrink-0" id="navbar-example-14">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home</a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav>

<nav class="navbar navbar-expand-lg bg-light">
  <a href="#" class="navbar-brand order-lg-2 flex-shrink-0 mr-0">Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-example-15">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="navbar-collapse collapse navbar-example-15 order-lg-1 w-lg-100">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home</a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
  <div class="navbar-collapse collapse navbar-example-15 justify-content-end order-lg-3 w-lg-100">
    <div class="nav navbar-nav">
      <a class="nav-item nav-link" href="#">
        <i class="ion ion-logo-twitter"></i>
      </a>
      <a class="nav-item nav-link" href="#">
        <i class="ion ion-logo-github"></i>
      </a>
    </div>
  </div>
</nav>

<nav class="navbar navbar-expand-lg bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-example-16">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbar-example-16">
    <div class="navbar-nav mr-auto">
      <a class="nav-item nav-link active" href="#">Home</a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav>

<nav class="navbar navbar-expand-lg bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-example-17">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbar-example-17">
    <div class="navbar-nav ml-auto">
      <a class="nav-item nav-link active" href="#">Home</a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav>

<nav class="navbar navbar-expand-lg bg-light">
  <a href="#" class="navbar-brand">Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-example-18">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="navbar-collapse collapse justify-content-between" id="navbar-example-18">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home</a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
    <div class="navbar-nav ml-auto">
      <a class="nav-item nav-link" href="#">Sign In</a>
      <a class="nav-item nav-link" href="#">Sign Up</a>
    </div>
  </div>
</nav>

Mega dropdown</>

<script src="assets/vendor/js/mega-dropdown.js"></script>

<nav class="navbar navbar-expand-lg bg-light" style="z-index: 21">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-example-19">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbar-example-19">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Dropdown</a>
        <div class="dropdown-menu">
          <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>
      </li>
      <li class="nav-item mega-dropdown">
        <a class="nav-link dropdown-toggle navbar-example-19-mega-dropdown" href="#" data-toggle="mega-dropdown">Mega (click)</a>
        <div class="dropdown-menu p-4">
          <div class="alert alert-info">
            Add <code>.mega-link</code> class to the element to close menu on click
          </div>
          <div class="row row-bordered ui-bordered">
            <div class="col-sm-6 col-lg p-3">
              <a href="#">Column</a>
            </div>
            <div class="col-sm-6 col-lg p-3">
              <a href="#" class="mega-link">.mega-link</a>
            </div>
            <div class="col-sm-6 col-lg p-3">
              <a href="#" class="btn btn-primary">Button</a>
            </div>
            <div class="col-sm-6 col-lg p-3">
              <input type="text" class="form-control" placeholder="Input">
            </div>
          </div>
        </div>
      </li>
      <li class="nav-item mega-dropdown">
        <a class="nav-link dropdown-toggle navbar-example-19-mega-dropdown" href="#" data-toggle="mega-dropdown" data-trigger="hover">Mega (hover)</a>
        <div class="dropdown-menu p-4">
          <div class="alert alert-info">
            Add <code>.mega-link</code> class to the element to close menu on click
          </div>
          <div class="row row-bordered ui-bordered">
            <div class="col-sm-6 col-lg p-3">
              <a href="#">Column</a>
            </div>
            <div class="col-sm-6 col-lg p-3">
              <a href="#" class="mega-link">.mega-link</a>
            </div>
            <div class="col-sm-6 col-lg p-3">
              <a href="#" class="btn btn-primary">Button</a>
            </div>
            <div class="col-sm-6 col-lg p-3">
              <input type="text" class="form-control" placeholder="Input">
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</nav>

<!-- Within container
     Note: Do not forget to add `.position-relative` to `.container`
-->
<nav class="navbar navbar-expand-lg bg-light" style="z-index: 20">
  <div class="container position-relative">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-example-20">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbar-example-20">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" data-trigger="hover">Dropdown (hover)</a>
          <div class="dropdown-menu">
            <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>
        </li>
        <li class="nav-item mega-dropdown">
          <a href="#" class="nav-link dropdown-toggle navbar-example-20-mega-dropdown">Mega (click)</a>
          <div class="dropdown-menu p-4">
            <div class="alert alert-info">
              Add <code>.mega-link</code> class to the element to close menu on click
            </div>
            <div class="row row-bordered ui-bordered">
              <div class="col-sm-6 col-lg p-3">
                <a href="#">Column</a>
              </div>
              <div class="col-sm-6 col-lg p-3">
                <a href="#" class="mega-link">.mega-link</a>
              </div>
              <div class="col-sm-6 col-lg p-3">
                <a href="#" class="btn btn-primary">Button</a>
              </div>
              <div class="col-sm-6 col-lg p-3">
                <input type="text" class="form-control" placeholder="Input">
              </div>
            </div>
          </div>
        </li>
        <li class="nav-item mega-dropdown">
          <a href="#" class="nav-link dropdown-toggle navbar-example-20-mega-dropdown" data-trigger="hover">Mega (hover)</a>
          <div class="dropdown-menu p-4">
            <div class="alert alert-info">
              Add <code>.mega-link</code> class to the element to close menu on click
            </div>
            <div class="row row-bordered ui-bordered">
              <div class="col-sm-6 col-lg p-3">
                <a href="#">Column</a>
              </div>
              <div class="col-sm-6 col-lg p-3">
                <a href="#" class="mega-link">.mega-link</a>
              </div>
              <div class="col-sm-6 col-lg p-3">
                <a href="#" class="btn btn-primary">Button</a>
              </div>
              <div class="col-sm-6 col-lg p-3">
                <input type="text" class="form-control" placeholder="Input">
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- Javascript -->
<script>
  $(function() {
    if ($('html').attr('dir') === 'rtl' || $('body').attr('dir') === 'rtl') {
      $('#navbar-demo-2 .dropdown-menu').addClass('dropdown-menu-right');
    }

    $('.navbar-example-19-mega-dropdown, .navbar-example-20-mega-dropdown').each(function() {
      new MegaDropdown(this);
    });
  });
</script>
<!-- / Javascript -->

Dropdown
Action Another action Something else here
Mega (click)

Add .mega-link class to the element to close menu on click

Column

.mega-link

Button
Mega (hover)

Add .mega-link class to the element to close menu on click

Column

.mega-link

Button

Dropdown (hover)
Action Another action Something else here
Mega (click)

Add .mega-link class to the element to close menu on click

Column

.mega-link

Button
Mega (hover)

Add .mega-link class to the element to close menu on click

Column

.mega-link

Button

Navbar search</>

<nav class="navbar navbar-expand-lg bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-example-21">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbar-example-21">
    <ul class="navbar-nav align-items-lg-center mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <label class="nav-link navbar-search-box">
          <i class="ion ion-ios-search navbar-icon align-middle"></i>
          <span class="navbar-search-input">
            <input type="text" class="form-control mx-2" placeholder="Search..." style="width:140px">
            <a href="#" class="navbar-search-cancel">×</a>
          </span>
        </label>
      </li>
    </ul>
  </div>
</nav>

<!-- Javascript -->
<script>
  $(function() {
    $('#navbar-example-21 .navbar-search-input > input').on('focus', function() {
      $('#navbar-example-21 .navbar-search-box').addClass('active');
    });
    $('#navbar-example-21 .navbar-search-cancel').on('click', function(e) {
      e.preventDefault();
      $('#navbar-example-21 .navbar-search-box').removeClass('active');
    });
  });
</script>
<!-- / Javascript -->

Side Nav

<script src="assets/vendor/js/sidenav.js"></script>

Vertical</>

<button type="button" id="sidenav-1-toggle-collapsed" class="btn btn-primary mb-4">Toggle collapsed</button>

<div id="sidenav-1" class="sidenav sidenav-vertical bg-dark" style="height: 450px">
  <ul class="sidenav-inner py-3">
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-notifications-outline"></i>
        <div>Some Long Long Long Long Long Item</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-ios-settings"></i>
        <div>Item 1</div>
      </a>
      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.2</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.3</div>
          </a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-md-paper"></i>
        <div>Item 2</div>
      </a>

      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 2.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.2</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link" id="111">
                <div>Item 2.2.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.3</div>
              </a>
            </li>
          </ul>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.3</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.3</div>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="sidenav-item active">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-flask"></i>
        <div>Item 3</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-basketball"></i>
        <div>Item 4</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-bonfire"></i>
        <div>Item 5</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cafe"></i>
        <div>Item 6</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cloud-outline"></i>
        <div>Item 7</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-code"></i>
        <div>Item 8</div>
      </a>
    </li>
  </ul>
</div>

<!-- Javascript -->
<script>
$(function() {
  new SideNav($('#sidenav-1')[0]);

  $('#sidenav-1-toggle-collapsed').click(function() {
    $('#sidenav-1').toggleClass('sidenav-collapsed');
  });
});
    </script>
<!-- / Javascript -->

Horizontal</>

<div id="sidenav-2" class="sidenav sidenav-horizontal bg-dark" style="position: relative;z-index: 100">
  <ul class="sidenav-inner">
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-notifications-outline"></i>
        <div>Some Long Long Long Long Long Item</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-ios-settings"></i>
        <div>Item 1</div>
      </a>
      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.2</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.3</div>
          </a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-md-paper"></i>
        <div>Item 2</div>
      </a>

      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 2.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.2</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.3</div>
              </a>
            </li>
          </ul>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.3</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.3</div>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="sidenav-item active">
      <a href="#" class="sidenav-link">
        <div>Item 3</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-basketball"></i>
        <div>Item 4</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-bonfire"></i>
        <div>Item 5</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cafe"></i>
        <div>Item 6</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cloud-outline"></i>
        <div>Item 7</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-code"></i>
        <div>Item 8</div>
      </a>
    </li>
  </ul>
</div>

<!-- Javascript -->
<script>
$(function() {
  new SideNav($('#sidenav-2')[0], {
    orientation: 'horizontal'
  });
});
    </script>
<!-- / Javascript -->

Horizontal (show dropdown on hover)</>

<div id="sidenav-3" class="sidenav sidenav-horizontal bg-dark" style="position: relative;z-index: 99">
  <ul class="sidenav-inner">
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-notifications-outline"></i>
        <div>Some Long Long Long Long Long Item</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-ios-settings"></i>
        <div>Item 1</div>
      </a>
      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.2</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.3</div>
          </a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-md-paper"></i>
        <div>Item 2</div>
      </a>

      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 2.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.2</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.3</div>
              </a>
            </li>
          </ul>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.3</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.3</div>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="sidenav-item active">
      <a href="#" class="sidenav-link">
        <div>Item 3</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-basketball"></i>
        <div>Item 4</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-bonfire"></i>
        <div>Item 5</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cafe"></i>
        <div>Item 6</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cloud-outline"></i>
        <div>Item 7</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-code"></i>
        <div>Item 8</div>
      </a>
    </li>
  </ul>
</div>

<!-- Javascript -->
<script>
$(function() {
  new SideNav($('#sidenav-3')[0], {
    orientation: 'horizontal',
    showDropdownOnHover: true
  });
});
    </script>
<!-- / Javascript -->

Horizontal within container</>

<div id="sidenav-4" class="sidenav sidenav-horizontal bg-dark" style="position: relative;z-index: 98">
  <div class="container d-flex">
    <ul class="sidenav-inner">
      <li class="sidenav-item">
        <a href="#" class="sidenav-link">
          <i class="sidenav-icon ion ion-md-notifications-outline"></i>
          <div>Some Long Long Long Long Long Item</div>
        </a>
      </li>
      <li class="sidenav-item">
        <a href="#" class="sidenav-link sidenav-toggle">
          <i class="sidenav-icon ion ion-ios-settings"></i>
          <div>Item 1</div>
        </a>
        <ul class="sidenav-menu">
          <li class="sidenav-item">
            <a href="#" class="sidenav-link">
              <div>Item 1.1</div>
            </a>
          </li>
          <li class="sidenav-item">
            <a href="#" class="sidenav-link">
              <div>Item 1.2</div>
            </a>
          </li>
          <li class="sidenav-item">
            <a href="#" class="sidenav-link">
              <div>Item 1.3</div>
            </a>
          </li>
        </ul>
      </li>
      <li class="sidenav-item">
        <a href="#" class="sidenav-link sidenav-toggle">
          <i class="sidenav-icon ion ion-md-paper"></i>
          <div>Item 2</div>
        </a>

        <ul class="sidenav-menu">
          <li class="sidenav-item">
            <a href="#" class="sidenav-link">
              <div>Item 2.1</div>
            </a>
          </li>
          <li class="sidenav-item">
            <a href="#" class="sidenav-link sidenav-toggle">
              <div>Item 2.2</div>
            </a>

            <ul class="sidenav-menu">
              <li class="sidenav-item">
                <a href="#" class="sidenav-link">
                  <div>Item 2.2.1</div>
                </a>
              </li>
              <li class="sidenav-item">
                <a href="#" class="sidenav-link">
                  <div>Item 2.2.2</div>
                </a>
              </li>
              <li class="sidenav-item">
                <a href="#" class="sidenav-link">
                  <div>Item 2.2.3</div>
                </a>
              </li>
            </ul>
          </li>
          <li class="sidenav-item">
            <a href="#" class="sidenav-link sidenav-toggle">
              <div>Item 2.3</div>
            </a>

            <ul class="sidenav-menu">
              <li class="sidenav-item">
                <a href="#" class="sidenav-link">
                  <div>Item 2.3.1</div>
                </a>
              </li>
              <li class="sidenav-item">
                <a href="#" class="sidenav-link">
                  <div>Item 2.3.2</div>
                </a>
              </li>
              <li class="sidenav-item">
                <a href="#" class="sidenav-link">
                  <div>Item 2.3.3</div>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="sidenav-item active">
        <a href="#" class="sidenav-link">
          <div>Item 3</div>
        </a>
      </li>
      <li class="sidenav-item">
        <a href="#" class="sidenav-link">
          <i class="sidenav-icon ion ion-md-basketball"></i>
          <div>Item 4</div>
        </a>
      </li>
      <li class="sidenav-item">
        <a href="#" class="sidenav-link">
          <i class="sidenav-icon ion ion-ios-bonfire"></i>
          <div>Item 5</div>
        </a>
      </li>
      <li class="sidenav-item">
        <a href="#" class="sidenav-link">
          <i class="sidenav-icon ion ion-ios-cafe"></i>
          <div>Item 6</div>
        </a>
      </li>
      <li class="sidenav-item">
        <a href="#" class="sidenav-link">
          <i class="sidenav-icon ion ion-ios-cloud-outline"></i>
          <div>Item 7</div>
        </a>
      </li>
      <li class="sidenav-item">
        <a href="#" class="sidenav-link">
          <i class="sidenav-icon ion ion-md-code"></i>
          <div>Item 8</div>
        </a>
      </li>
    </ul>
  </div>
</div>

<!-- Javascript -->
<script>
$(function() {
  new SideNav($('#sidenav-4')[0], {
    orientation: 'horizontal'
  });
});
    </script>
<!-- / Javascript -->

No animation</>

<button type="button" id="sidenav-5-toggle-collapsed" class="btn btn-primary mb-4">Toggle collapsed</button>

<div id="sidenav-5" class="sidenav sidenav-vertical bg-dark mb-4" style="height: 450px">
  <ul class="sidenav-inner py-3">
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-notifications-outline"></i>
        <div>Some Long Long Long Long Long Item</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-ios-settings"></i>
        <div>Item 1</div>
      </a>
      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.2</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.3</div>
          </a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-md-paper"></i>
        <div>Item 2</div>
      </a>

      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 2.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.2</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.3</div>
              </a>
            </li>
          </ul>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.3</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.3</div>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="sidenav-item active">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-flask"></i>
        <div>Item 3</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-basketball"></i>
        <div>Item 4</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-bonfire"></i>
        <div>Item 5</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cafe"></i>
        <div>Item 6</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cloud-outline"></i>
        <div>Item 7</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-code"></i>
        <div>Item 8</div>
      </a>
    </li>
  </ul>
</div>

<div id="sidenav-6" class="sidenav sidenav-horizontal bg-dark" style="position: relative;z-index: 97">
  <ul class="sidenav-inner">
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-notifications-outline"></i>
        <div>Some Long Long Long Long Long Item</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-ios-settings"></i>
        <div>Item 1</div>
      </a>
      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.2</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.3</div>
          </a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-md-paper"></i>
        <div>Item 2</div>
      </a>

      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 2.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.2</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.3</div>
              </a>
            </li>
          </ul>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.3</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.3</div>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="sidenav-item active">
      <a href="#" class="sidenav-link">
        <div>Item 3</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-basketball"></i>
        <div>Item 4</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-bonfire"></i>
        <div>Item 5</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cafe"></i>
        <div>Item 6</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cloud-outline"></i>
        <div>Item 7</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-code"></i>
        <div>Item 8</div>
      </a>
    </li>
  </ul>
</div>

<!-- Javascript -->
<script>
$(function() {
  new SideNav($('#sidenav-5')[0], {
    animate: false
  });

  new SideNav($('#sidenav-6')[0], {
    orientation: 'horizontal',
    animate: false
  });

  $('#sidenav-5-toggle-collapsed').click(function() {
    $('#sidenav-5').toggleClass('sidenav-collapsed');
  });
});
    </script>
<!-- / Javascript -->

No accordion</>

<button type="button" id="sidenav-7-toggle-collapsed" class="btn btn-primary mb-4">Toggle collapsed</button>

<div id="sidenav-7" class="sidenav sidenav-vertical bg-dark mb-4" style="height: 450px">
  <ul class="sidenav-inner py-3">
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-notifications-outline"></i>
        <div>Some Long Long Long Long Long Item</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-ios-settings"></i>
        <div>Item 1</div>
      </a>
      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.2</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.3</div>
          </a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-md-paper"></i>
        <div>Item 2</div>
      </a>

      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 2.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.2</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.3</div>
              </a>
            </li>
          </ul>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.3</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.3</div>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="sidenav-item active">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-flask"></i>
        <div>Item 3</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-basketball"></i>
        <div>Item 4</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-bonfire"></i>
        <div>Item 5</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cafe"></i>
        <div>Item 6</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cloud-outline"></i>
        <div>Item 7</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-code"></i>
        <div>Item 8</div>
      </a>
    </li>
  </ul>
</div>

<div id="sidenav-8" class="sidenav sidenav-horizontal bg-dark" style="position: relative;z-index: 96">
  <ul class="sidenav-inner">
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-notifications-outline"></i>
        <div>Some Long Long Long Long Long Item</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-ios-settings"></i>
        <div>Item 1</div>
      </a>
      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.2</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.3</div>
          </a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-md-paper"></i>
        <div>Item 2</div>
      </a>

      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 2.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.2</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.3</div>
              </a>
            </li>
          </ul>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.3</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.3</div>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="sidenav-item active">
      <a href="#" class="sidenav-link">
        <div>Item 3</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-basketball"></i>
        <div>Item 4</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-bonfire"></i>
        <div>Item 5</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cafe"></i>
        <div>Item 6</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cloud-outline"></i>
        <div>Item 7</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-code"></i>
        <div>Item 8</div>
      </a>
    </li>
  </ul>
</div>

<!-- Javascript -->
<script>
$(function() {
  new SideNav($('#sidenav-7')[0], {
    accordion: false
  });

  new SideNav($('#sidenav-8')[0], {
    orientation: 'horizontal',
    accordion: false
  });

  $('#sidenav-7-toggle-collapsed').click(function() {
    $('#sidenav-7').toggleClass('sidenav-collapsed');
  });
});
    </script>
<!-- / Javascript -->

Elements</>

<div class="mb-4">
  <button type="button" id="sidenavs-9-toggle-collapsed" class="btn btn-primary">Toggle collapsed</button>
</div>

<!-- Blocks within scrollable area -->

<div class="sidenavs-9 sidenav sidenav-vertical d-inline-flex bg-dark mr-4" style="height: 450px">
  <ul class="sidenav-inner">
    <li class="sidenav-block my-1">
      <div class="media align-items-center">
        <img src="assets/img/avatars/1-small.png" class="d-block ui-w-50 rounded-circle" alt>
        <div class="media-body pl-3">
          <h5 class="sidenav-text mb-1">Mike Greene</h5>
          <div class="small">
            <a href="#" class="sidenav-link">
              <strong class="sidenav-text">5</strong> new messages</a>
          </div>
        </div>
      </div>
    </li>

    <li class="sidenav-divider mt-0"></li>

    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-notifications-outline"></i>
        <div>Some Long Long Long Long Long Item</div>
      </a>
    </li>
    <li class="sidenav-item disabled">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-ios-settings"></i>
        <div>Item 1</div>
      </a>
      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.2</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.3</div>
          </a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-md-paper"></i>
        <div>Item 2</div>
      </a>

      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 2.1</div>
          </a>
        </li>
        <li class="sidenav-item disabled">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.2</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.3</div>
              </a>
            </li>
          </ul>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.3</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.3</div>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>

    <li class="sidenav-divider mb-0"></li>
    <li class="sidenav-header small font-weight-semibold">SECTION HEADER</li>

    <li class="sidenav-item active">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-flask"></i>
        <div>Item 3</div>
      </a>
    </li>
    <li class="sidenav-item disabled">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-basketball"></i>
        <div>Item 4</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-bonfire"></i>
        <div>Item 5</div>
      </a>
    </li>

    <li class="sidenav-divider"></li>

    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cafe"></i>
        <div>Item 6</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cloud-outline"></i>
        <div>Item 7</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-code"></i>
        <div>Item 8</div>
      </a>
    </li>

    <li class="sidenav-divider mb-0"></li>

    <li class="sidenav-block my-1">
      <div class="small">
        Milestone
        <div class="float-right">55%</div>
      </div>
      <div class="progress mt-1 mb-3" style="height: 4px;">
        <div class="progress-bar bg-success" style="width: 55%;"></div>
      </div>

      <div class="small">
        Release
        <div class="float-right">80%</div>
      </div>
      <div class="progress mt-1" style="height: 4px;">
        <div class="progress-bar bg-danger" style="width: 80%;"></div>
      </div>
    </li>
  </ul>
</div>

<!-- Blocks outside of scrollable area -->

<div class="sidenavs-9 sidenav sidenav-vertical d-inline-flex bg-dark mr-4" style="height: 450px">
  <div class="sidenav-block my-1">
    <div class="media align-items-center">
      <img src="assets/img/avatars/1-small.png" class="d-block ui-w-50 rounded-circle" alt>
      <div class="media-body pl-3">
        <h5 class="sidenav-text mb-1">Mike Greene</h5>
        <div class="small">
          <a href="#" class="sidenav-link">
            <strong class="sidenav-text">5</strong> new messages</a>
        </div>
      </div>
    </div>
  </div>
  <div class="sidenav-divider mt-0"></div>

  <ul class="sidenav-inner">
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-notifications-outline"></i>
        <div>Some Long Long Long Long Long Item</div>
      </a>
    </li>
    <li class="sidenav-item disabled">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-ios-settings"></i>
        <div>Item 1</div>
      </a>
      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.2</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.3</div>
          </a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-md-paper"></i>
        <div>Item 2</div>
      </a>

      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 2.1</div>
          </a>
        </li>
        <li class="sidenav-item disabled">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.2</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.3</div>
              </a>
            </li>
          </ul>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.3</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.3</div>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>

    <li class="sidenav-divider mb-0"></li>
    <li class="sidenav-header small font-weight-semibold">SECTION HEADER</li>

    <li class="sidenav-item active">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-flask"></i>
        <div>Item 3</div>
      </a>
    </li>
    <li class="sidenav-item disabled">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-basketball"></i>
        <div>Item 4</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-bonfire"></i>
        <div>Item 5</div>
      </a>
    </li>

    <li class="sidenav-divider"></li>

    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cafe"></i>
        <div>Item 6</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cloud-outline"></i>
        <div>Item 7</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-code"></i>
        <div>Item 8</div>
      </a>
    </li>
  </ul>

  <div class="sidenav-divider mb-0"></div>

  <div class="sidenav-block my-1">
    <div class="small">
      Milestone
      <div class="float-right">55%</div>
    </div>
    <div class="progress mt-1 mb-3" style="height: 4px;">
      <div class="progress-bar bg-success" style="width: 55%;"></div>
    </div>

    <div class="small">
      Release
      <div class="float-right">80%</div>
    </div>
    <div class="progress mt-1" style="height: 4px;">
      <div class="progress-bar bg-danger" style="width: 80%;"></div>
    </div>
  </div>
</div>

<!-- Javascript -->
<script>
$(function() {
  $('.sidenavs-9').each(function() {
    new SideNav(this);
  });

  $('#sidenavs-9-toggle-collapsed').click(function() {
    $('.sidenavs-9').toggleClass('sidenav-collapsed');
  });
});
    </script>
<!-- / Javascript -->

Mike Greene

5 new messages

Milestone

55%

Release

80%

Colors (vertical)</>

<div class="mb-4">
  <button type="button" id="sidenavs-10-toggle-collapsed" class="btn btn-primary">Toggle collapsed</button>
</div>

<div class="sidenavs-10 sidenav sidenav-vertical d-inline-flex bg-sidenav-theme mr-4 mb-4" style="height: 450px">
  <ul class="sidenav-inner">
    <li class="sidenav-block my-1">
      <div class="media align-items-center">
        <img src="assets/img/avatars/1-small.png" class="d-block ui-w-50 rounded-circle" alt>
        <div class="media-body pl-3">
          <h5 class="sidenav-text mb-1">Mike Greene</h5>
          <div class="small">
            <a href="#" class="sidenav-link">
              <strong class="sidenav-text">5</strong> new messages</a>
          </div>
        </div>
      </div>
    </li>

    <li class="sidenav-divider mt-0"></li>

    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-notifications-outline"></i>
        <div>Some Long Long Long Long Long Item</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-ios-settings"></i>
        <div>Item 1</div>
      </a>
      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.2</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.3</div>
          </a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-md-paper"></i>
        <div>Item 2</div>
      </a>

      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 2.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.2</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.3</div>
              </a>
            </li>
          </ul>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.3</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.3</div>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>

    <li class="sidenav-divider mb-0"></li>
    <li class="sidenav-header small font-weight-semibold">SECTION HEADER</li>

    <li class="sidenav-item active">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-flask"></i>
        <div>Item 3</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-basketball"></i>
        <div>Item 4</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-bonfire"></i>
        <div>Item 5</div>
      </a>
    </li>

    <li class="sidenav-divider"></li>

    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cafe"></i>
        <div>Item 6</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cloud-outline"></i>
        <div>Item 7</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-code"></i>
        <div>Item 8</div>
      </a>
    </li>
  </ul>
</div>

<div class="sidenavs-10 sidenav sidenav-vertical d-inline-flex bg-primary mr-4 mb-4" style="height: 450px">
  <ul class="sidenav-inner">
    <li class="sidenav-block my-1">
      <div class="media align-items-center">
        <img src="assets/img/avatars/1-small.png" class="d-block ui-w-50 rounded-circle" alt>
        <div class="media-body pl-3">
          <h5 class="sidenav-text mb-1">Mike Greene</h5>
          <div class="small">
            <a href="#" class="sidenav-link">
              <strong class="sidenav-text">5</strong> new messages</a>
          </div>
        </div>
      </div>
    </li>

    <li class="sidenav-divider mt-0"></li>

    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-notifications-outline"></i>
        <div>Some Long Long Long Long Long Item</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-ios-settings"></i>
        <div>Item 1</div>
      </a>
      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.2</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.3</div>
          </a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-md-paper"></i>
        <div>Item 2</div>
      </a>

      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 2.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.2</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.3</div>
              </a>
            </li>
          </ul>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.3</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.3</div>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>

    <li class="sidenav-divider mb-0"></li>
    <li class="sidenav-header small font-weight-semibold">SECTION HEADER</li>

    <li class="sidenav-item active">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-flask"></i>
        <div>Item 3</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-basketball"></i>
        <div>Item 4</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-bonfire"></i>
        <div>Item 5</div>
      </a>
    </li>

    <li class="sidenav-divider"></li>

    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cafe"></i>
        <div>Item 6</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cloud-outline"></i>
        <div>Item 7</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-code"></i>
        <div>Item 8</div>
      </a>
    </li>
  </ul>
</div>

<div class="sidenavs-10 sidenav sidenav-vertical d-inline-flex bg-secondary mr-4 mb-4" style="height: 450px">
  <ul class="sidenav-inner">
    <li class="sidenav-block my-1">
      <div class="media align-items-center">
        <img src="assets/img/avatars/1-small.png" class="d-block ui-w-50 rounded-circle" alt>
        <div class="media-body pl-3">
          <h5 class="sidenav-text mb-1">Mike Greene</h5>
          <div class="small">
            <a href="#" class="sidenav-link">
              <strong class="sidenav-text">5</strong> new messages</a>
          </div>
        </div>
      </div>
    </li>

    <li class="sidenav-divider mt-0"></li>

    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-notifications-outline"></i>
        <div>Some Long Long Long Long Long Item</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-ios-settings"></i>
        <div>Item 1</div>
      </a>
      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.2</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.3</div>
          </a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-md-paper"></i>
        <div>Item 2</div>
      </a>

      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 2.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.2</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.3</div>
              </a>
            </li>
          </ul>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.3</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.3</div>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>

    <li class="sidenav-divider mb-0"></li>
    <li class="sidenav-header small font-weight-semibold">SECTION HEADER</li>

    <li class="sidenav-item active">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-flask"></i>
        <div>Item 3</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-basketball"></i>
        <div>Item 4</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-bonfire"></i>
        <div>Item 5</div>
      </a>
    </li>

    <li class="sidenav-divider"></li>

    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cafe"></i>
        <div>Item 6</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cloud-outline"></i>
        <div>Item 7</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-code"></i>
        <div>Item 8</div>
      </a>
    </li>
  </ul>
</div>

<div class="sidenavs-10 sidenav sidenav-vertical d-inline-flex bg-success mr-4 mb-4" style="height: 450px">
  <ul class="sidenav-inner">
    <li class="sidenav-block my-1">
      <div class="media align-items-center">
        <img src="assets/img/avatars/1-small.png" class="d-block ui-w-50 rounded-circle" alt>
        <div class="media-body pl-3">
          <h5 class="sidenav-text mb-1">Mike Greene</h5>
          <div class="small">
            <a href="#" class="sidenav-link">
              <strong class="sidenav-text">5</strong> new messages</a>
          </div>
        </div>
      </div>
    </li>

    <li class="sidenav-divider mt-0"></li>

    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-notifications-outline"></i>
        <div>Some Long Long Long Long Long Item</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-ios-settings"></i>
        <div>Item 1</div>
      </a>
      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.2</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.3</div>
          </a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-md-paper"></i>
        <div>Item 2</div>
      </a>

      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 2.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.2</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.3</div>
              </a>
            </li>
          </ul>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.3</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.3</div>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>

    <li class="sidenav-divider mb-0"></li>
    <li class="sidenav-header small font-weight-semibold">SECTION HEADER</li>

    <li class="sidenav-item active">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-flask"></i>
        <div>Item 3</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-basketball"></i>
        <div>Item 4</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-bonfire"></i>
        <div>Item 5</div>
      </a>
    </li>

    <li class="sidenav-divider"></li>

    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cafe"></i>
        <div>Item 6</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cloud-outline"></i>
        <div>Item 7</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-code"></i>
        <div>Item 8</div>
      </a>
    </li>
  </ul>
</div>

<div class="sidenavs-10 sidenav sidenav-vertical d-inline-flex bg-info mr-4 mb-4" style="height: 450px">
  <ul class="sidenav-inner">
    <li class="sidenav-block my-1">
      <div class="media align-items-center">
        <img src="assets/img/avatars/1-small.png" class="d-block ui-w-50 rounded-circle" alt>
        <div class="media-body pl-3">
          <h5 class="sidenav-text mb-1">Mike Greene</h5>
          <div class="small">
            <a href="#" class="sidenav-link">
              <strong class="sidenav-text">5</strong> new messages</a>
          </div>
        </div>
      </div>
    </li>

    <li class="sidenav-divider mt-0"></li>

    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-notifications-outline"></i>
        <div>Some Long Long Long Long Long Item</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-ios-settings"></i>
        <div>Item 1</div>
      </a>
      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.2</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.3</div>
          </a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-md-paper"></i>
        <div>Item 2</div>
      </a>

      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 2.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.2</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.3</div>
              </a>
            </li>
          </ul>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.3</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.3</div>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>

    <li class="sidenav-divider mb-0"></li>
    <li class="sidenav-header small font-weight-semibold">SECTION HEADER</li>

    <li class="sidenav-item active">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-flask"></i>
        <div>Item 3</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-basketball"></i>
        <div>Item 4</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-bonfire"></i>
        <div>Item 5</div>
      </a>
    </li>

    <li class="sidenav-divider"></li>

    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cafe"></i>
        <div>Item 6</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cloud-outline"></i>
        <div>Item 7</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-code"></i>
        <div>Item 8</div>
      </a>
    </li>
  </ul>
</div>

<div class="sidenavs-10 sidenav sidenav-vertical d-inline-flex bg-warning mr-4 mb-4" style="height: 450px">
  <ul class="sidenav-inner">
    <li class="sidenav-block my-1">
      <div class="media align-items-center">
        <img src="assets/img/avatars/1-small.png" class="d-block ui-w-50 rounded-circle" alt>
        <div class="media-body pl-3">
          <h5 class="sidenav-text mb-1">Mike Greene</h5>
          <div class="small">
            <a href="#" class="sidenav-link">
              <strong class="sidenav-text">5</strong> new messages</a>
          </div>
        </div>
      </div>
    </li>

    <li class="sidenav-divider mt-0"></li>

    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-notifications-outline"></i>
        <div>Some Long Long Long Long Long Item</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-ios-settings"></i>
        <div>Item 1</div>
      </a>
      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.2</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.3</div>
          </a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-md-paper"></i>
        <div>Item 2</div>
      </a>

      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 2.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.2</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.3</div>
              </a>
            </li>
          </ul>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.3</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.3</div>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>

    <li class="sidenav-divider mb-0"></li>
    <li class="sidenav-header small font-weight-semibold">SECTION HEADER</li>

    <li class="sidenav-item active">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-flask"></i>
        <div>Item 3</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-basketball"></i>
        <div>Item 4</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-bonfire"></i>
        <div>Item 5</div>
      </a>
    </li>

    <li class="sidenav-divider"></li>

    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cafe"></i>
        <div>Item 6</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cloud-outline"></i>
        <div>Item 7</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-code"></i>
        <div>Item 8</div>
      </a>
    </li>
  </ul>
</div>

<div class="sidenavs-10 sidenav sidenav-vertical d-inline-flex bg-danger mr-4 mb-4" style="height: 450px">
  <ul class="sidenav-inner">
    <li class="sidenav-block my-1">
      <div class="media align-items-center">
        <img src="assets/img/avatars/1-small.png" class="d-block ui-w-50 rounded-circle" alt>
        <div class="media-body pl-3">
          <h5 class="sidenav-text mb-1">Mike Greene</h5>
          <div class="small">
            <a href="#" class="sidenav-link">
              <strong class="sidenav-text">5</strong> new messages</a>
          </div>
        </div>
      </div>
    </li>

    <li class="sidenav-divider mt-0"></li>

    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-notifications-outline"></i>
        <div>Some Long Long Long Long Long Item</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-ios-settings"></i>
        <div>Item 1</div>
      </a>
      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.2</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.3</div>
          </a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-md-paper"></i>
        <div>Item 2</div>
      </a>

      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 2.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.2</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.3</div>
              </a>
            </li>
          </ul>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.3</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.3</div>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>

    <li class="sidenav-divider mb-0"></li>
    <li class="sidenav-header small font-weight-semibold">SECTION HEADER</li>

    <li class="sidenav-item active">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-flask"></i>
        <div>Item 3</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-basketball"></i>
        <div>Item 4</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-bonfire"></i>
        <div>Item 5</div>
      </a>
    </li>

    <li class="sidenav-divider"></li>

    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cafe"></i>
        <div>Item 6</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cloud-outline"></i>
        <div>Item 7</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-code"></i>
        <div>Item 8</div>
      </a>
    </li>
  </ul>
</div>

<div class="sidenavs-10 sidenav sidenav-vertical d-inline-flex bg-white mr-4 mb-4" style="height: 450px">
  <ul class="sidenav-inner">
    <li class="sidenav-block my-1">
      <div class="media align-items-center">
        <img src="assets/img/avatars/1-small.png" class="d-block ui-w-50 rounded-circle" alt>
        <div class="media-body pl-3">
          <h5 class="sidenav-text mb-1">Mike Greene</h5>
          <div class="small">
            <a href="#" class="sidenav-link">
              <strong class="sidenav-text">5</strong> new messages</a>
          </div>
        </div>
      </div>
    </li>

    <li class="sidenav-divider mt-0"></li>

    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-notifications-outline"></i>
        <div>Some Long Long Long Long Long Item</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-ios-settings"></i>
        <div>Item 1</div>
      </a>
      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.2</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.3</div>
          </a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-md-paper"></i>
        <div>Item 2</div>
      </a>

      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 2.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.2</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.3</div>
              </a>
            </li>
          </ul>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.3</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.3</div>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>

    <li class="sidenav-divider mb-0"></li>
    <li class="sidenav-header small font-weight-semibold">SECTION HEADER</li>

    <li class="sidenav-item active">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-flask"></i>
        <div>Item 3</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-basketball"></i>
        <div>Item 4</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-bonfire"></i>
        <div>Item 5</div>
      </a>
    </li>

    <li class="sidenav-divider"></li>

    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cafe"></i>
        <div>Item 6</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cloud-outline"></i>
        <div>Item 7</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-code"></i>
        <div>Item 8</div>
      </a>
    </li>
  </ul>
</div>

<div class="sidenavs-10 sidenav sidenav-vertical d-inline-flex bg-lighter mr-4 mb-4" style="height: 450px">
  <ul class="sidenav-inner">
    <li class="sidenav-block my-1">
      <div class="media align-items-center">
        <img src="assets/img/avatars/1-small.png" class="d-block ui-w-50 rounded-circle" alt>
        <div class="media-body pl-3">
          <h5 class="sidenav-text mb-1">Mike Greene</h5>
          <div class="small">
            <a href="#" class="sidenav-link">
              <strong class="sidenav-text">5</strong> new messages</a>
          </div>
        </div>
      </div>
    </li>

    <li class="sidenav-divider mt-0"></li>

    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-notifications-outline"></i>
        <div>Some Long Long Long Long Long Item</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-ios-settings"></i>
        <div>Item 1</div>
      </a>
      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.2</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.3</div>
          </a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-md-paper"></i>
        <div>Item 2</div>
      </a>

      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 2.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.2</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.3</div>
              </a>
            </li>
          </ul>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.3</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.3</div>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>

    <li class="sidenav-divider mb-0"></li>
    <li class="sidenav-header small font-weight-semibold">SECTION HEADER</li>

    <li class="sidenav-item active">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-flask"></i>
        <div>Item 3</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-basketball"></i>
        <div>Item 4</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-bonfire"></i>
        <div>Item 5</div>
      </a>
    </li>

    <li class="sidenav-divider"></li>

    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cafe"></i>
        <div>Item 6</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cloud-outline"></i>
        <div>Item 7</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-code"></i>
        <div>Item 8</div>
      </a>
    </li>
  </ul>
</div>

<div class="sidenavs-10 sidenav sidenav-vertical d-inline-flex bg-light mr-4 mb-4" style="height: 450px">
  <ul class="sidenav-inner">
    <li class="sidenav-block my-1">
      <div class="media align-items-center">
        <img src="assets/img/avatars/1-small.png" class="d-block ui-w-50 rounded-circle" alt>
        <div class="media-body pl-3">
          <h5 class="sidenav-text mb-1">Mike Greene</h5>
          <div class="small">
            <a href="#" class="sidenav-link">
              <strong class="sidenav-text">5</strong> new messages</a>
          </div>
        </div>
      </div>
    </li>

    <li class="sidenav-divider mt-0"></li>

    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-notifications-outline"></i>
        <div>Some Long Long Long Long Long Item</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-ios-settings"></i>
        <div>Item 1</div>
      </a>
      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.2</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.3</div>
          </a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-md-paper"></i>
        <div>Item 2</div>
      </a>

      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 2.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.2</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.3</div>
              </a>
            </li>
          </ul>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.3</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.3</div>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>

    <li class="sidenav-divider mb-0"></li>
    <li class="sidenav-header small font-weight-semibold">SECTION HEADER</li>

    <li class="sidenav-item active">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-flask"></i>
        <div>Item 3</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-basketball"></i>
        <div>Item 4</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-bonfire"></i>
        <div>Item 5</div>
      </a>
    </li>

    <li class="sidenav-divider"></li>

    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cafe"></i>
        <div>Item 6</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cloud-outline"></i>
        <div>Item 7</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-code"></i>
        <div>Item 8</div>
      </a>
    </li>
  </ul>
</div>

<!-- Javascript -->
<script>
$(function() {
  $('.sidenavs-10').each(function() {
    new SideNav(this);
  });

  $('#sidenavs-10-toggle-collapsed').click(function() {
    $('.sidenavs-10').toggleClass('sidenav-collapsed');
  });
});
    </script>
<!-- / Javascript -->

Colors (horizontal)</>

<div class="sidenavs-11 sidenav sidenav-horizontal bg-sidenav-theme mb-4" style="position: relative; z-index: 95">
  <ul class="sidenav-inner">
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-notifications-outline"></i>
        <div>Some Long Long Long Long Long Item</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-ios-settings"></i>
        <div>Item 1</div>
      </a>
      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.2</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.3</div>
          </a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-md-paper"></i>
        <div>Item 2</div>
      </a>

      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 2.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.2</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.3</div>
              </a>
            </li>
          </ul>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.3</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.3</div>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>

    <li class="sidenav-item active">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-flask"></i>
        <div>Item 3</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-basketball"></i>
        <div>Item 4</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-bonfire"></i>
        <div>Item 5</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cafe"></i>
        <div>Item 6</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cloud-outline"></i>
        <div>Item 7</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-code"></i>
        <div>Item 8</div>
      </a>
    </li>
  </ul>
</div>

<div class="sidenavs-11 sidenav sidenav-horizontal bg-primary mb-4" style="position: relative; z-index: 94">
  <ul class="sidenav-inner">
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-notifications-outline"></i>
        <div>Some Long Long Long Long Long Item</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-ios-settings"></i>
        <div>Item 1</div>
      </a>
      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.2</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.3</div>
          </a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-md-paper"></i>
        <div>Item 2</div>
      </a>

      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 2.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.2</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.3</div>
              </a>
            </li>
          </ul>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.3</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.3</div>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>

    <li class="sidenav-item active">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-flask"></i>
        <div>Item 3</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-basketball"></i>
        <div>Item 4</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-bonfire"></i>
        <div>Item 5</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cafe"></i>
        <div>Item 6</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cloud-outline"></i>
        <div>Item 7</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-code"></i>
        <div>Item 8</div>
      </a>
    </li>
  </ul>
</div>

<div class="sidenavs-11 sidenav sidenav-horizontal bg-secondary mb-4" style="position: relative; z-index: 93">
  <ul class="sidenav-inner">
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-notifications-outline"></i>
        <div>Some Long Long Long Long Long Item</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-ios-settings"></i>
        <div>Item 1</div>
      </a>
      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.2</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.3</div>
          </a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-md-paper"></i>
        <div>Item 2</div>
      </a>

      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 2.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.2</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.3</div>
              </a>
            </li>
          </ul>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.3</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.3</div>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="sidenav-item active">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-flask"></i>
        <div>Item 3</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-basketball"></i>
        <div>Item 4</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-bonfire"></i>
        <div>Item 5</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cafe"></i>
        <div>Item 6</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cloud-outline"></i>
        <div>Item 7</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-code"></i>
        <div>Item 8</div>
      </a>
    </li>
  </ul>
</div>

<div class="sidenavs-11 sidenav sidenav-horizontal bg-success mb-4" style="position: relative; z-index: 92">
  <ul class="sidenav-inner">
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-notifications-outline"></i>
        <div>Some Long Long Long Long Long Item</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-ios-settings"></i>
        <div>Item 1</div>
      </a>
      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.2</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.3</div>
          </a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-md-paper"></i>
        <div>Item 2</div>
      </a>

      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 2.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.2</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.3</div>
              </a>
            </li>
          </ul>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.3</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.3</div>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="sidenav-item active">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-flask"></i>
        <div>Item 3</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-basketball"></i>
        <div>Item 4</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-bonfire"></i>
        <div>Item 5</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cafe"></i>
        <div>Item 6</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cloud-outline"></i>
        <div>Item 7</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-code"></i>
        <div>Item 8</div>
      </a>
    </li>
  </ul>
</div>

<div class="sidenavs-11 sidenav sidenav-horizontal bg-info mb-4" style="position: relative; z-index: 91">
  <ul class="sidenav-inner">
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-notifications-outline"></i>
        <div>Some Long Long Long Long Long Item</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-ios-settings"></i>
        <div>Item 1</div>
      </a>
      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.2</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.3</div>
          </a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-md-paper"></i>
        <div>Item 2</div>
      </a>

      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 2.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.2</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.3</div>
              </a>
            </li>
          </ul>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.3</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.3</div>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="sidenav-item active">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-flask"></i>
        <div>Item 3</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-basketball"></i>
        <div>Item 4</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-bonfire"></i>
        <div>Item 5</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cafe"></i>
        <div>Item 6</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cloud-outline"></i>
        <div>Item 7</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-code"></i>
        <div>Item 8</div>
      </a>
    </li>
  </ul>
</div>

<div class="sidenavs-11 sidenav sidenav-horizontal bg-warning mb-4" style="position: relative; z-index: 90">
  <ul class="sidenav-inner">
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-notifications-outline"></i>
        <div>Some Long Long Long Long Long Item</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-ios-settings"></i>
        <div>Item 1</div>
      </a>
      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.2</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.3</div>
          </a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-md-paper"></i>
        <div>Item 2</div>
      </a>

      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 2.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.2</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.3</div>
              </a>
            </li>
          </ul>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.3</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.3</div>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="sidenav-item active">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-flask"></i>
        <div>Item 3</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-basketball"></i>
        <div>Item 4</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-bonfire"></i>
        <div>Item 5</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cafe"></i>
        <div>Item 6</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cloud-outline"></i>
        <div>Item 7</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-code"></i>
        <div>Item 8</div>
      </a>
    </li>
  </ul>
</div>

<div class="sidenavs-11 sidenav sidenav-horizontal bg-danger mb-4" style="position: relative; z-index: 89">
  <ul class="sidenav-inner">
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-notifications-outline"></i>
        <div>Some Long Long Long Long Long Item</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-ios-settings"></i>
        <div>Item 1</div>
      </a>
      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.2</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.3</div>
          </a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-md-paper"></i>
        <div>Item 2</div>
      </a>

      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 2.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.2</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.3</div>
              </a>
            </li>
          </ul>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.3</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.3</div>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="sidenav-item active">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-flask"></i>
        <div>Item 3</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-basketball"></i>
        <div>Item 4</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-bonfire"></i>
        <div>Item 5</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cafe"></i>
        <div>Item 6</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cloud-outline"></i>
        <div>Item 7</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-code"></i>
        <div>Item 8</div>
      </a>
    </li>
  </ul>
</div>

<div class="sidenavs-11 sidenav sidenav-horizontal bg-white mb-4" style="position: relative; z-index: 88">
  <ul class="sidenav-inner">
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-notifications-outline"></i>
        <div>Some Long Long Long Long Long Item</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-ios-settings"></i>
        <div>Item 1</div>
      </a>
      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.2</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.3</div>
          </a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-md-paper"></i>
        <div>Item 2</div>
      </a>

      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 2.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.2</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.3</div>
              </a>
            </li>
          </ul>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.3</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.3</div>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="sidenav-item active">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-flask"></i>
        <div>Item 3</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-basketball"></i>
        <div>Item 4</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-bonfire"></i>
        <div>Item 5</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cafe"></i>
        <div>Item 6</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cloud-outline"></i>
        <div>Item 7</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-code"></i>
        <div>Item 8</div>
      </a>
    </li>
  </ul>
</div>

<div class="sidenavs-11 sidenav sidenav-horizontal bg-lighter mb-4" style="position: relative; z-index: 87">
  <ul class="sidenav-inner">
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-notifications-outline"></i>
        <div>Some Long Long Long Long Long Item</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-ios-settings"></i>
        <div>Item 1</div>
      </a>
      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.2</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.3</div>
          </a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-md-paper"></i>
        <div>Item 2</div>
      </a>

      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 2.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.2</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.3</div>
              </a>
            </li>
          </ul>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.3</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.3</div>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="sidenav-item active">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-flask"></i>
        <div>Item 3</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-basketball"></i>
        <div>Item 4</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-bonfire"></i>
        <div>Item 5</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cafe"></i>
        <div>Item 6</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cloud-outline"></i>
        <div>Item 7</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-code"></i>
        <div>Item 8</div>
      </a>
    </li>
  </ul>
</div>

<div class="sidenavs-11 sidenav sidenav-horizontal bg-light mb-4" style="position: relative; z-index: 86">
  <ul class="sidenav-inner">
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-notifications-outline"></i>
        <div>Some Long Long Long Long Long Item</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-ios-settings"></i>
        <div>Item 1</div>
      </a>
      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.2</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.3</div>
          </a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-md-paper"></i>
        <div>Item 2</div>
      </a>

      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 2.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.2</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.3</div>
              </a>
            </li>
          </ul>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.3</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.3</div>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="sidenav-item active">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-flask"></i>
        <div>Item 3</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-basketball"></i>
        <div>Item 4</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-bonfire"></i>
        <div>Item 5</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cafe"></i>
        <div>Item 6</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cloud-outline"></i>
        <div>Item 7</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-code"></i>
        <div>Item 8</div>
      </a>
    </li>
  </ul>
</div>

<!-- Javascript -->
<script>
$(function() {
  $('.sidenavs-11').each(function() {
    new SideNav(this, {
      orientation: 'horizontal'
    });
  });
});
    </script>
<!-- / Javascript -->

With background</>

<div class="mb-4">
  <button type="button" id="sidenavs-12-toggle-collapsed" class="btn btn-primary">Toggle collapsed</button>
</div>

<div class="sidenavs-12 sidenav sidenav-vertical sidenav-dark d-inline-flex ui-bg-cover ui-bg-overlay-container mr-4 mb-4" style="background-image: url('assets/img/bg/1.jpg'); height: 450px">
  <div class="ui-bg-overlay bg-dark opacity-25"></div>

  <ul class="sidenav-inner">
    <li class="sidenav-block my-1">
      <div class="media align-items-center">
        <img src="assets/img/avatars/1-small.png" class="d-block ui-w-50 rounded-circle" alt>
        <div class="media-body pl-3">
          <h5 class="sidenav-text mb-1">Mike Greene</h5>
          <div class="small">
            <a href="#" class="sidenav-link">
              <strong class="sidenav-text">5</strong> new messages</a>
          </div>
        </div>
      </div>
    </li>

    <li class="sidenav-divider mt-0"></li>

    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-notifications-outline"></i>
        <div>Some Long Long Long Long Long Item</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-ios-settings"></i>
        <div>Item 1</div>
      </a>
      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.2</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.3</div>
          </a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-md-paper"></i>
        <div>Item 2</div>
      </a>

      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 2.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.2</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.3</div>
              </a>
            </li>
          </ul>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.3</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.3</div>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>

    <li class="sidenav-divider mb-0"></li>
    <li class="sidenav-header small font-weight-semibold">SECTION HEADER</li>

    <li class="sidenav-item active">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-flask"></i>
        <div>Item 3</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-basketball"></i>
        <div>Item 4</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-bonfire"></i>
        <div>Item 5</div>
      </a>
    </li>

    <li class="sidenav-divider"></li>

    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cafe"></i>
        <div>Item 6</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cloud-outline"></i>
        <div>Item 7</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-code"></i>
        <div>Item 8</div>
      </a>
    </li>
  </ul>
</div>

<div class="sidenavs-12 sidenav sidenav-vertical sidenav-dark d-inline-flex ui-bg-cover ui-bg-overlay-container mr-4 mb-4" style="background-image: url('assets/img/bg/13.jpg'); height: 450px">
  <div class="ui-bg-overlay bg-warning opacity-25"></div>

  <ul class="sidenav-inner">
    <li class="sidenav-block my-1">
      <div class="media align-items-center">
        <img src="assets/img/avatars/1-small.png" class="d-block ui-w-50 rounded-circle" alt>
        <div class="media-body pl-3">
          <h5 class="sidenav-text mb-1">Mike Greene</h5>
          <div class="small">
            <a href="#" class="sidenav-link">
              <strong class="sidenav-text">5</strong> new messages</a>
          </div>
        </div>
      </div>
    </li>

    <li class="sidenav-divider mt-0"></li>

    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-notifications-outline"></i>
        <div>Some Long Long Long Long Long Item</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-ios-settings"></i>
        <div>Item 1</div>
      </a>
      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.2</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.3</div>
          </a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-md-paper"></i>
        <div>Item 2</div>
      </a>

      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 2.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.2</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.3</div>
              </a>
            </li>
          </ul>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.3</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.3</div>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>

    <li class="sidenav-divider mb-0"></li>
    <li class="sidenav-header small font-weight-semibold">SECTION HEADER</li>

    <li class="sidenav-item active">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-flask"></i>
        <div>Item 3</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-basketball"></i>
        <div>Item 4</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-bonfire"></i>
        <div>Item 5</div>
      </a>
    </li>

    <li class="sidenav-divider"></li>

    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cafe"></i>
        <div>Item 6</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cloud-outline"></i>
        <div>Item 7</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-code"></i>
        <div>Item 8</div>
      </a>
    </li>
  </ul>
</div>

<div class="sidenavs-12 sidenav sidenav-vertical sidenav-light d-inline-flex ui-bg-cover ui-bg-overlay-container mr-4 mb-4" style="background-image: url('assets/img/bg/16.jpg'); height: 450px">
  <div class="ui-bg-overlay bg-white opacity-75"></div>

  <ul class="sidenav-inner">
    <li class="sidenav-block my-1">
      <div class="media align-items-center">
        <img src="assets/img/avatars/1-small.png" class="d-block ui-w-50 rounded-circle" alt>
        <div class="media-body pl-3">
          <h5 class="sidenav-text mb-1">Mike Greene</h5>
          <div class="small">
            <a href="#" class="sidenav-link">
              <strong class="sidenav-text">5</strong> new messages</a>
          </div>
        </div>
      </div>
    </li>

    <li class="sidenav-divider mt-0"></li>

    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-notifications-outline"></i>
        <div>Some Long Long Long Long Long Item</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-ios-settings"></i>
        <div>Item 1</div>
      </a>
      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.2</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 1.3</div>
          </a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link sidenav-toggle">
        <i class="sidenav-icon ion ion-md-paper"></i>
        <div>Item 2</div>
      </a>

      <ul class="sidenav-menu">
        <li class="sidenav-item">
          <a href="#" class="sidenav-link">
            <div>Item 2.1</div>
          </a>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.2</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.2.3</div>
              </a>
            </li>
          </ul>
        </li>
        <li class="sidenav-item">
          <a href="#" class="sidenav-link sidenav-toggle">
            <div>Item 2.3</div>
          </a>

          <ul class="sidenav-menu">
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.1</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.2</div>
              </a>
            </li>
            <li class="sidenav-item">
              <a href="#" class="sidenav-link">
                <div>Item 2.3.3</div>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>

    <li class="sidenav-divider mb-0"></li>
    <li class="sidenav-header small font-weight-semibold">SECTION HEADER</li>

    <li class="sidenav-item active">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-flask"></i>
        <div>Item 3</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-basketball"></i>
        <div>Item 4</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-bonfire"></i>
        <div>Item 5</div>
      </a>
    </li>

    <li class="sidenav-divider"></li>

    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cafe"></i>
        <div>Item 6</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-ios-cloud-outline"></i>
        <div>Item 7</div>
      </a>
    </li>
    <li class="sidenav-item">
      <a href="#" class="sidenav-link">
        <i class="sidenav-icon ion ion-md-code"></i>
        <div>Item 8</div>
      </a>
    </li>
  </ul>
</div>

<!-- Javascript -->
<script>
$(function() {
  $('.sidenavs-12').each(function() {
    new SideNav(this);
  });

  $('#sidenavs-12-toggle-collapsed').click(function() {
    $('.sidenavs-12').toggleClass('sidenav-collapsed');
  });
});
    </script>
<!-- / Javascript -->

Usage

<script src="assets/vendor/js/sidenav.js"></script> <div class="sidenav sidenav-vertical" id="vertical-sidenav-id"> ... </div> <div class="sidenav sidenav-horizontal" id="horizontal-sidenav-id"> ... </div> <script> var sidenav1 = new SideNav(document.getElementById('vertical-sidenav-id'), { ...options }); var sidenav2 = new SideNav(document.getElementById('horizontal-sidenav-id'), { orientation: 'horizontal', ...options }); // SideNav instance also can be accessed using element attribute: document.getElementById('sidenav-id').sidenavInstance </script>

OPTIONS

Option	Default	Description
orientation	`'vertical'`	Sidenav orientation. Values: `'vertical'`, `'horizontal'`
accordion	`true`	Enable/disable accordion behaviour. Values: `true`, `false`
animate	`true`	Enable/disable animations. Values: `true`, `false`
closeChildren	`false`	Close all children menus when the parent menu closes. Values: `true`, `false`
showDropdownOnHover	`false`	Open dropdown on hover (horizontal mode only). Values: `true`, `false`
onOpen		Called immediately after toggle link clicked. `new SideNav(document.getElementById('sidenav-id'), { onOpen: function(sidenavInstance, itemEl, toggleLinkEl, menuEl) { ... } });`
onOpened		Called after menu/dropdown open animation ends. `new SideNav(document.getElementById('sidenav-id'), { onOpened: function(sidenavInstance, itemEl, toggleLinkEl, menuEl) { ... } });`
onClose		Called immediately after toggle link clicked. `new SideNav(document.getElementById('sidenav-id'), { onClose: function(sidenavInstance, itemEl, toggleLinkEl, menuEl) { ... } });`
onClosed		Called after menu/dropdown close animation ends. `new SideNav(document.getElementById('sidenav-id'), { onClosed: function(sidenavInstance, itemEl, toggleLinkEl, menuEl) { ... } });`

METHODS

sidenavInstance.method(...arguments);

Method	Arguments	Description
`open(el[, closeChildren=options.closeChildren])`	`el` - `.sidenav-item` or `.sidenav-toggle` element `closeChildren` - Close all children menus when the parent menu closes. (optional)	Open menu/dropdown
`close(el[, closeChildren=options.closeChildren])`	`el` - `.sidenav-item` or `.sidenav-toggle` element `closeChildren` - Close all children menus when the parent menu closes. (optional)	Close menu/dropdown
`toggle(el[, closeChildren=options.closeChildren])`	`el` - `.sidenav-item` or `.sidenav-toggle` element `closeChildren` - Close all children menus when the parent menu closes. (optional)	Toggle menu/dropdown
`closeAll([closeChildren=options.closeChildren])`	`closeChildren` - Close all children menus when the parent menu closes. (optional)	Close all menus/dropdowns
`setActive(el, active[, openTree=true[, deactivateOthers=true]])`	`el` - `.sidenav-item` or `.sidenav-link` element `active` - Set to `true` to activate; `false` to deactivate `openTree` - Open parent menu tree `deactivateOthers` - Deactivate currently active items	Activate/deactivate item
`setDisabled(el, disabled)`	`el` - `.sidenav-item` or `.sidenav-link` element `disabled` - Set to `true` to disable; `false` to enable	Disable/enable item
`isActive(el)`	`el` - `.sidenav-item` or `.sidenav-link` element	Returns `true` if item is active
`isOpened(el)`	`el` - `.sidenav-item` or `.sidenav-link` element	Returns `true` if menu item is opened
`isDisabled(el)`	`el` - `.sidenav-item` or `.sidenav-link` element	Returns `true` if item is disabled
`update()`		Update scrollbar (vertical mode) / scrollable area (horizontal mode)
`destroy()`		Destroy SideNav instance

Footer

Colors</>

<nav class="footer bg-footer-theme pt-4 mb-4">
  <div class="container text-center py-4">
    <div class="pb-3">
      <a href="#" class="footer-text text-large font-weight-normal">.bg-footer-theme</a>
      <span class="align-top">©</span>
    </div>
    <hr class="mb-4">
    <div class="row">
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">ABOUT US</div>
        <a href="#" class="footer-link d-block pb-2">About</a>
        <a href="#" class="footer-link d-block pb-2">Our Story</a>
        <a href="#" class="footer-link d-block pb-2">Shipping</a>
      </div>
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">CATEGORY</div>
        <a href="#" class="footer-link d-block pb-2">Woman</a>
        <a href="#" class="footer-link d-block pb-2">Man</a>
        <a href="#" class="footer-link d-block pb-2">Kids</a>
      </div>
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">SUPPORT</div>
        <a href="#" class="footer-link d-block pb-2">FAQ</a>
        <a href="#" class="footer-link d-block pb-2">Support</a>
        <a href="#" class="footer-link d-block pb-2">Consultant</a>
      </div>
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">PARTNERS</div>
        <a href="#" class="footer-link d-block pb-2">Wholesale</a>
        <a href="#" class="footer-link d-block pb-2">Office solutions</a>
        <a href="#" class="footer-link d-block pb-2">Press Resource</a>
      </div>
    </div>
  </div>
</nav>

<nav class="footer bg-white pt-4 mb-4">
  <div class="container text-center py-4">
    <div class="pb-3">
      <a href="#" class="footer-text text-large font-weight-normal">.bg-white</a>
      <span class="align-top">©</span>
    </div>
    <hr class="mb-4">
    <div class="row">
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">ABOUT US</div>
        <a href="#" class="footer-link d-block pb-2">About</a>
        <a href="#" class="footer-link d-block pb-2">Our Story</a>
        <a href="#" class="footer-link d-block pb-2">Shipping</a>
      </div>
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">CATEGORY</div>
        <a href="#" class="footer-link d-block pb-2">Woman</a>
        <a href="#" class="footer-link d-block pb-2">Man</a>
        <a href="#" class="footer-link d-block pb-2">Kids</a>
      </div>
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">SUPPORT</div>
        <a href="#" class="footer-link d-block pb-2">FAQ</a>
        <a href="#" class="footer-link d-block pb-2">Support</a>
        <a href="#" class="footer-link d-block pb-2">Consultant</a>
      </div>
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">PARTNERS</div>
        <a href="#" class="footer-link d-block pb-2">Wholesale</a>
        <a href="#" class="footer-link d-block pb-2">Office solutions</a>
        <a href="#" class="footer-link d-block pb-2">Press Resource</a>
      </div>
    </div>
  </div>
</nav>

<nav class="footer bg-primary pt-4 mb-4">
  <div class="container text-center py-4">
    <div class="pb-3">
      <a href="#" class="footer-text text-large font-weight-normal">.bg-primary</a>
      <span class="align-top">©</span>
    </div>
    <hr class="mb-4">
    <div class="row">
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">ABOUT US</div>
        <a href="#" class="footer-link d-block pb-2">About</a>
        <a href="#" class="footer-link d-block pb-2">Our Story</a>
        <a href="#" class="footer-link d-block pb-2">Shipping</a>
      </div>
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">CATEGORY</div>
        <a href="#" class="footer-link d-block pb-2">Woman</a>
        <a href="#" class="footer-link d-block pb-2">Man</a>
        <a href="#" class="footer-link d-block pb-2">Kids</a>
      </div>
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">SUPPORT</div>
        <a href="#" class="footer-link d-block pb-2">FAQ</a>
        <a href="#" class="footer-link d-block pb-2">Support</a>
        <a href="#" class="footer-link d-block pb-2">Consultant</a>
      </div>
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">PARTNERS</div>
        <a href="#" class="footer-link d-block pb-2">Wholesale</a>
        <a href="#" class="footer-link d-block pb-2">Office solutions</a>
        <a href="#" class="footer-link d-block pb-2">Press Resource</a>
      </div>
    </div>
  </div>
</nav>

<nav class="footer bg-secondary pt-4 mb-4">
  <div class="container text-center py-4">
    <div class="pb-3">
      <a href="#" class="footer-text text-large font-weight-normal">.bg-secondary</a>
      <span class="align-top">©</span>
    </div>
    <hr class="mb-4">
    <div class="row">
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">ABOUT US</div>
        <a href="#" class="footer-link d-block pb-2">About</a>
        <a href="#" class="footer-link d-block pb-2">Our Story</a>
        <a href="#" class="footer-link d-block pb-2">Shipping</a>
      </div>
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">CATEGORY</div>
        <a href="#" class="footer-link d-block pb-2">Woman</a>
        <a href="#" class="footer-link d-block pb-2">Man</a>
        <a href="#" class="footer-link d-block pb-2">Kids</a>
      </div>
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">SUPPORT</div>
        <a href="#" class="footer-link d-block pb-2">FAQ</a>
        <a href="#" class="footer-link d-block pb-2">Support</a>
        <a href="#" class="footer-link d-block pb-2">Consultant</a>
      </div>
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">PARTNERS</div>
        <a href="#" class="footer-link d-block pb-2">Wholesale</a>
        <a href="#" class="footer-link d-block pb-2">Office solutions</a>
        <a href="#" class="footer-link d-block pb-2">Press Resource</a>
      </div>
    </div>
  </div>
</nav>

<nav class="footer bg-success pt-4 mb-4">
  <div class="container text-center py-4">
    <div class="pb-3">
      <a href="#" class="footer-text text-large font-weight-normal">.bg-success</a>
      <span class="align-top">©</span>
    </div>
    <hr class="mb-4">
    <div class="row">
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">ABOUT US</div>
        <a href="#" class="footer-link d-block pb-2">About</a>
        <a href="#" class="footer-link d-block pb-2">Our Story</a>
        <a href="#" class="footer-link d-block pb-2">Shipping</a>
      </div>
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">CATEGORY</div>
        <a href="#" class="footer-link d-block pb-2">Woman</a>
        <a href="#" class="footer-link d-block pb-2">Man</a>
        <a href="#" class="footer-link d-block pb-2">Kids</a>
      </div>
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">SUPPORT</div>
        <a href="#" class="footer-link d-block pb-2">FAQ</a>
        <a href="#" class="footer-link d-block pb-2">Support</a>
        <a href="#" class="footer-link d-block pb-2">Consultant</a>
      </div>
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">PARTNERS</div>
        <a href="#" class="footer-link d-block pb-2">Wholesale</a>
        <a href="#" class="footer-link d-block pb-2">Office solutions</a>
        <a href="#" class="footer-link d-block pb-2">Press Resource</a>
      </div>
    </div>
  </div>
</nav>

<nav class="footer bg-info pt-4 mb-4">
  <div class="container text-center py-4">
    <div class="pb-3">
      <a href="#" class="footer-text text-large font-weight-normal">.bg-info</a>
      <span class="align-top">©</span>
    </div>
    <hr class="mb-4">
    <div class="row">
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">ABOUT US</div>
        <a href="#" class="footer-link d-block pb-2">About</a>
        <a href="#" class="footer-link d-block pb-2">Our Story</a>
        <a href="#" class="footer-link d-block pb-2">Shipping</a>
      </div>
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">CATEGORY</div>
        <a href="#" class="footer-link d-block pb-2">Woman</a>
        <a href="#" class="footer-link d-block pb-2">Man</a>
        <a href="#" class="footer-link d-block pb-2">Kids</a>
      </div>
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">SUPPORT</div>
        <a href="#" class="footer-link d-block pb-2">FAQ</a>
        <a href="#" class="footer-link d-block pb-2">Support</a>
        <a href="#" class="footer-link d-block pb-2">Consultant</a>
      </div>
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">PARTNERS</div>
        <a href="#" class="footer-link d-block pb-2">Wholesale</a>
        <a href="#" class="footer-link d-block pb-2">Office solutions</a>
        <a href="#" class="footer-link d-block pb-2">Press Resource</a>
      </div>
    </div>
  </div>
</nav>

<nav class="footer bg-warning pt-4 mb-4">
  <div class="container text-center py-4">
    <div class="pb-3">
      <a href="#" class="footer-text text-large font-weight-normal">.bg-warning</a>
      <span class="align-top">©</span>
    </div>
    <hr class="mb-4">
    <div class="row">
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">ABOUT US</div>
        <a href="#" class="footer-link d-block pb-2">About</a>
        <a href="#" class="footer-link d-block pb-2">Our Story</a>
        <a href="#" class="footer-link d-block pb-2">Shipping</a>
      </div>
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">CATEGORY</div>
        <a href="#" class="footer-link d-block pb-2">Woman</a>
        <a href="#" class="footer-link d-block pb-2">Man</a>
        <a href="#" class="footer-link d-block pb-2">Kids</a>
      </div>
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">SUPPORT</div>
        <a href="#" class="footer-link d-block pb-2">FAQ</a>
        <a href="#" class="footer-link d-block pb-2">Support</a>
        <a href="#" class="footer-link d-block pb-2">Consultant</a>
      </div>
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">PARTNERS</div>
        <a href="#" class="footer-link d-block pb-2">Wholesale</a>
        <a href="#" class="footer-link d-block pb-2">Office solutions</a>
        <a href="#" class="footer-link d-block pb-2">Press Resource</a>
      </div>
    </div>
  </div>
</nav>

<nav class="footer bg-danger pt-4 mb-4">
  <div class="container text-center py-4">
    <div class="pb-3">
      <a href="#" class="footer-text text-large font-weight-normal">.bg-danger</a>
      <span class="align-top">©</span>
    </div>
    <hr class="mb-4">
    <div class="row">
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">ABOUT US</div>
        <a href="#" class="footer-link d-block pb-2">About</a>
        <a href="#" class="footer-link d-block pb-2">Our Story</a>
        <a href="#" class="footer-link d-block pb-2">Shipping</a>
      </div>
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">CATEGORY</div>
        <a href="#" class="footer-link d-block pb-2">Woman</a>
        <a href="#" class="footer-link d-block pb-2">Man</a>
        <a href="#" class="footer-link d-block pb-2">Kids</a>
      </div>
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">SUPPORT</div>
        <a href="#" class="footer-link d-block pb-2">FAQ</a>
        <a href="#" class="footer-link d-block pb-2">Support</a>
        <a href="#" class="footer-link d-block pb-2">Consultant</a>
      </div>
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">PARTNERS</div>
        <a href="#" class="footer-link d-block pb-2">Wholesale</a>
        <a href="#" class="footer-link d-block pb-2">Office solutions</a>
        <a href="#" class="footer-link d-block pb-2">Press Resource</a>
      </div>
    </div>
  </div>
</nav>

<nav class="footer bg-dark pt-4 mb-4">
  <div class="container text-center py-4">
    <div class="pb-3">
      <a href="#" class="footer-text text-large font-weight-normal">.bg-dark</a>
      <span class="align-top">©</span>
    </div>
    <hr class="mb-4">
    <div class="row">
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">ABOUT US</div>
        <a href="#" class="footer-link d-block pb-2">About</a>
        <a href="#" class="footer-link d-block pb-2">Our Story</a>
        <a href="#" class="footer-link d-block pb-2">Shipping</a>
      </div>
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">CATEGORY</div>
        <a href="#" class="footer-link d-block pb-2">Woman</a>
        <a href="#" class="footer-link d-block pb-2">Man</a>
        <a href="#" class="footer-link d-block pb-2">Kids</a>
      </div>
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">SUPPORT</div>
        <a href="#" class="footer-link d-block pb-2">FAQ</a>
        <a href="#" class="footer-link d-block pb-2">Support</a>
        <a href="#" class="footer-link d-block pb-2">Consultant</a>
      </div>
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">PARTNERS</div>
        <a href="#" class="footer-link d-block pb-2">Wholesale</a>
        <a href="#" class="footer-link d-block pb-2">Office solutions</a>
        <a href="#" class="footer-link d-block pb-2">Press Resource</a>
      </div>
    </div>
  </div>
</nav>

<nav class="footer bg-lighter pt-4 mb-4">
  <div class="container text-center py-4">
    <div class="pb-3">
      <a href="#" class="footer-text text-large font-weight-normal">.bg-lighter</a>
      <span class="align-top">©</span>
    </div>
    <hr class="mb-4">
    <div class="row">
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">ABOUT US</div>
        <a href="#" class="footer-link d-block pb-2">About</a>
        <a href="#" class="footer-link d-block pb-2">Our Story</a>
        <a href="#" class="footer-link d-block pb-2">Shipping</a>
      </div>
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">CATEGORY</div>
        <a href="#" class="footer-link d-block pb-2">Woman</a>
        <a href="#" class="footer-link d-block pb-2">Man</a>
        <a href="#" class="footer-link d-block pb-2">Kids</a>
      </div>
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">SUPPORT</div>
        <a href="#" class="footer-link d-block pb-2">FAQ</a>
        <a href="#" class="footer-link d-block pb-2">Support</a>
        <a href="#" class="footer-link d-block pb-2">Consultant</a>
      </div>
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">PARTNERS</div>
        <a href="#" class="footer-link d-block pb-2">Wholesale</a>
        <a href="#" class="footer-link d-block pb-2">Office solutions</a>
        <a href="#" class="footer-link d-block pb-2">Press Resource</a>
      </div>
    </div>
  </div>
</nav>

<nav class="footer bg-light pt-4 mb-4">
  <div class="container text-center py-4">
    <div class="pb-3">
      <a href="#" class="footer-text text-large font-weight-normal">.bg-light</a>
      <span class="align-top">©</span>
    </div>
    <hr class="mb-4">
    <div class="row">
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">ABOUT US</div>
        <a href="#" class="footer-link d-block pb-2">About</a>
        <a href="#" class="footer-link d-block pb-2">Our Story</a>
        <a href="#" class="footer-link d-block pb-2">Shipping</a>
      </div>
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">CATEGORY</div>
        <a href="#" class="footer-link d-block pb-2">Woman</a>
        <a href="#" class="footer-link d-block pb-2">Man</a>
        <a href="#" class="footer-link d-block pb-2">Kids</a>
      </div>
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">SUPPORT</div>
        <a href="#" class="footer-link d-block pb-2">FAQ</a>
        <a href="#" class="footer-link d-block pb-2">Support</a>
        <a href="#" class="footer-link d-block pb-2">Consultant</a>
      </div>
      <div class="col-sm pb-4">
        <div class="footer-text small font-weight-bold mb-3">PARTNERS</div>
        <a href="#" class="footer-link d-block pb-2">Wholesale</a>
        <a href="#" class="footer-link d-block pb-2">Office solutions</a>
        <a href="#" class="footer-link d-block pb-2">Press Resource</a>
      </div>
    </div>
  </div>
</nav>

Tables

Basic</>

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table table-dark">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Table head options</>

<table class="table">
  <thead class="thead-dark">
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-light">
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Striped rows</>

<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table table-striped table-dark">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Bordered table</>

<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@TwBootstrap</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table table-bordered table-dark">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@TwBootstrap</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Mark	Otto	@TwBootstrap
3	Jacob	Thornton	@fat
4	Larry the Bird		@twitter

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Mark	Otto	@TwBootstrap
3	Jacob	Thornton	@fat
4	Larry the Bird		@twitter

Bordereless table</>

<table class="table table-borderless">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@TwBootstrap</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table table-borderless table-dark">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@TwBootstrap</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Mark	Otto	@TwBootstrap
3	Jacob	Thornton	@fat
4	Larry the Bird		@twitter

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Mark	Otto	@TwBootstrap
3	Jacob	Thornton	@fat
4	Larry the Bird		@twitter

Hoverable rows</>

<table class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table table-hover table-dark">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Small table</>

<table class="table table-sm">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table table-sm table-dark">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Contextual classes</>

<table class="table">
  <thead>
    <tr>
      <th>Type</th>
      <th>Column heading</th>
      <th>Column heading</th>
      <th>Column heading</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-active">
      <th scope="row">Active</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <th scope="row">Default</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="table-primary">
      <th scope="row">Primary</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="table-secondary">
      <th scope="row">Secondary</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="table-success">
      <th scope="row">Success</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="table-danger">
      <th scope="row">Danger</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="table-warning">
      <th scope="row">Warning</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="table-info">
      <th scope="row">Info</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="table-dark">
      <th scope="row">Dark</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
  </tbody>
</table>

<table class="table table-dark">
  <thead>
    <tr>
      <th>#</th>
      <th>Column heading</th>
      <th>Column heading</th>
      <th>Column heading</th>
    </tr>
  </thead>
  <tbody>
    <tr class="bg-primary">
      <th scope="row">1</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="bg-secondary">
      <th scope="row">3</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="bg-success">
      <th scope="row">5</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <th scope="row">6</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="bg-danger">
      <th scope="row">7</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <th scope="row">8</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="bg-warning">
      <th scope="row">9</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <th scope="row">10</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="bg-info">
      <th scope="row">11</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
  </tbody>
</table>

Type	Column heading	Column heading	Column heading
Active	Column content	Column content	Column content
Default	Column content	Column content	Column content
Primary	Column content	Column content	Column content
Secondary	Column content	Column content	Column content
Success	Column content	Column content	Column content
Danger	Column content	Column content	Column content
Warning	Column content	Column content	Column content
Info	Column content	Column content	Column content
Dark	Column content	Column content	Column content

#	Column heading	Column heading	Column heading
1	Column content	Column content	Column content
2	Column content	Column content	Column content
3	Column content	Column content	Column content
4	Column content	Column content	Column content
5	Column content	Column content	Column content
6	Column content	Column content	Column content
7	Column content	Column content	Column content
8	Column content	Column content	Column content
9	Column content	Column content	Column content
10	Column content	Column content	Column content
11	Column content	Column content	Column content

Within card</>

<div class="card">
  <div class="card-header">Table within card</div>
  <table class="table card-table">
    <thead class="thead-light">
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>

Table within card

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Responsive tables</>

<div class="table-responsive">
  <table class="table mb-0">
    <thead>
      <tr>
        <th>#</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="table-responsive">
  <table class="table table-bordered mb-0">
    <thead>
      <tr>
        <th>#</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
    </tbody>
  </table>
</div>

#	Table heading	Table heading	Table heading	Table heading	Table heading	Table heading
1	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
2	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
3	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell

#	Table heading	Table heading	Table heading	Table heading	Table heading	Table heading
1	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
2	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
3	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell

Media

Example</>

<div class="media">
  <a href="#" class="d-flex mr-3">
    <img src="assets/img/avatars/1-small.png" alt style="width:46px;height:46px;" class="rounded">
  </a>
  <div class="media-body">
    <a href="#">Mike Greene</a>
    <span class="text-muted">commented on</span>
    <a href="#">Article Name</a>
    <p class="my-1">
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </p>
    <a href="#" class="d-block float-right text-muted small">
      <span class="ion ion-ios-thumbs-down"></span>
    </a>
    <a href="#" class="d-block float-right text-muted small">
      <span class="ion ion-ios-thumbs-up mr-2"></span>
    </a>
    <span class="d-block float-left text-muted small">2 hours ago</span>
  </div>
</div>

<hr>

<div class="media">
  <a href="#" class="d-flex mr-3">
    <img src="assets/img/avatars/2-small.png" alt style="width:46px;height:46px;" class="rounded">
  </a>
  <div class="media-body">
    <a href="#">Leon Wilson</a>
    <span class="text-muted">commented on</span>
    <a href="#">Article Name</a>
    <p class="my-1">
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </p>
    <a href="#" class="d-block float-right text-muted small">
      <span class="ion ion-ios-thumbs-down"></span>
    </a>
    <a href="#" class="d-block float-right text-muted small">
      <span class="ion ion-ios-thumbs-up mr-2"></span>
    </a>
    <span class="d-block float-left text-muted small">2 hours ago</span>
  </div>
</div>

<hr>

<div class="media">
  <a href="#" class="d-flex mr-3">
    <img src="assets/img/avatars/3-small.png" alt style="width:46px;height:46px;" class="rounded">
  </a>
  <div class="media-body">
    <a href="#">Allie Rodriguez</a>
    <span class="text-muted">commented on</span>
    <a href="#">Article Name</a>
    <p class="my-1">
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </p>
    <a href="#" class="d-block float-right text-muted small">
      <span class="ion ion-ios-thumbs-down"></span>
    </a>
    <a href="#" class="d-block float-right text-muted small">
      <span class="ion ion-ios-thumbs-up mr-2"></span>
    </a>
    <span class="d-block float-left text-muted small">2 hours ago</span>
  </div>
</div>

Mike Greene commented on Article Name

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

2 hours ago

Leon Wilson commented on Article Name

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

2 hours ago

Allie Rodriguez commented on Article Name

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

2 hours ago

Nesting</>

<div class="media">
  <a href="#" class="d-flex mr-3">
    <img src="assets/img/avatars/4-small.png" alt style="width:46px;height:46px;" class="rounded">
  </a>
  <div class="media-body">
    <a href="#">Kenneth Frazier</a>
    <span class="text-muted small">14 hours ago</span>
    <p class="my-1">
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </p>
    <a href="#" class="text-muted small">
      <span class="ion ion-ios-thumbs-up"></span>
    </a>&nbsp;&nbsp;
    <a href="#" class="text-muted small">
      <span class="ion ion-ios-thumbs-down"></span>
    </a>
    <span class="text-muted small">&nbsp;&nbsp;·&nbsp;&nbsp;</span>
    <a href="#" class="text-muted small">Reply</a>

    <div class="media mt-3">
      <a href="#" class="d-flex mr-3">
        <img src="assets/img/avatars/5-small.png" alt style="width:32px;height:32px;" class="rounded">
      </a>
      <div class="media-body">
        <a href="#">Nelle Maxwell</a>
        <span class="text-muted small">14 hours ago</span>
        <p class="my-1">
          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
        </p>
        <a href="#" class="text-muted small">
          <span class="ion ion-ios-thumbs-up"></span>
        </a>&nbsp;&nbsp;
        <a href="#" class="text-muted small">
          <span class="ion ion-ios-thumbs-down"></span>
        </a>
        <span class="text-muted small">&nbsp;&nbsp;·&nbsp;&nbsp;</span>
        <a href="#" class="text-muted small">Reply</a>

        <div class="media mt-3">
          <a href="#" class="d-flex mr-3">
            <img src="assets/img/avatars/6-small.png" alt style="width:32px;height:32px;" class="rounded">
          </a>
          <div class="media-body">
            <a href="#">Nelle Maxwell</a>
            <span class="text-muted small">14 hours ago</span>
            <p class="my-1">
              Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
            </p>
            <a href="#" class="text-muted small">
              <span class="ion ion-ios-thumbs-up"></span>
            </a>&nbsp;&nbsp;
            <a href="#" class="text-muted small">
              <span class="ion ion-ios-thumbs-down"></span>
            </a>
            <span class="text-muted small">&nbsp;&nbsp;·&nbsp;&nbsp;</span>
            <a href="#" class="text-muted small">Reply</a>
          </div>
        </div>
      </div>
    </div>

    <div class="media mt-3">
      <a href="#" class="d-flex mr-3">
        <img src="assets/img/avatars/7-small.png" alt style="width:32px;height:32px;" class="rounded">
      </a>
      <div class="media-body">
        <a href="#">Alice Hampton</a>
        <span class="text-muted small">14 hours ago</span>
        <p class="my-1">
          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
        </p>
        <a href="#" class="text-muted small">
          <span class="ion ion-ios-thumbs-up"></span>
        </a>&nbsp;&nbsp;
        <a href="#" class="text-muted small">
          <span class="ion ion-ios-thumbs-down"></span>
        </a>
        <span class="text-muted small">&nbsp;&nbsp;·&nbsp;&nbsp;</span>
        <a href="#" class="text-muted small">Reply</a>
      </div>
    </div>

  </div>
</div>

Kenneth Frazier 14 hours ago

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

· Reply

Nelle Maxwell 14 hours ago

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

· Reply

Nelle Maxwell 14 hours ago

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

· Reply

Alice Hampton 14 hours ago

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

· Reply

Thumbnails

Example</>

<div class="row">
  <div class="col-md">
    <a href="#" class="img-thumbnail">
      <img src="assets/img/bg/1.jpg" alt class="img-fluid">
    </a>
  </div>
  <div class="col-md">
    <a href="#" class="img-thumbnail">
      <img src="assets/img/bg/2.jpg" alt class="img-fluid">
    </a>
  </div>
  <div class="col-md">
    <a href="#" class="img-thumbnail">
      <img src="assets/img/bg/3.jpg" alt class="img-fluid">
    </a>
  </div>
  <div class="col-md">
    <a href="#" class="img-thumbnail">
      <img src="assets/img/bg/4.jpg" alt class="img-fluid">
    </a>
  </div>
</div>

With overlay</>

<div class="row">
  <div class="col-md">
    <a href="#" class="img-thumbnail">
      <div class="img-thumbnail-overlay bg-dark opacity-25"></div>
      <img src="assets/img/bg/1.jpg" alt class="img-fluid">
    </a>
  </div>
  <div class="col-md">
    <a href="#" class="img-thumbnail">
      <div class="img-thumbnail-overlay bg-primary opacity-50"></div>
      <img src="assets/img/bg/2.jpg" alt class="img-fluid">
    </a>
  </div>
  <div class="col-md">
    <a href="#" class="img-thumbnail">
      <div class="img-thumbnail-overlay bg-success opacity-25"></div>
      <img src="assets/img/bg/3.jpg" alt class="img-fluid">
    </a>
  </div>
  <div class="col-md">
    <a href="#" class="img-thumbnail">
      <div class="img-thumbnail-overlay bg-white opacity-50"></div>
      <img src="assets/img/bg/4.jpg" alt class="img-fluid">
    </a>
  </div>
</div>

With overlay and content</>

<div class="row">
  <div class="col-md">
    <a href="#" class="img-thumbnail">
      <span class="img-thumbnail-overlay bg-dark opacity-25"></span>
      <span class="img-thumbnail-content text-white text-xlarge">
        <i class="ion ion-ios-search"></i>
      </span>
      <img src="assets/img/bg/1.jpg" alt class="img-fluid">
    </a>
  </div>
  <div class="col-md">
    <a href="#" class="img-thumbnail">
      <span class="img-thumbnail-overlay bg-primary opacity-50"></span>
      <span class="img-thumbnail-content text-white text-xlarge">
        <i class="ion ion-ios-search"></i>
      </span>
      <img src="assets/img/bg/2.jpg" alt class="img-fluid">
    </a>
  </div>
  <div class="col-md">
    <a href="#" class="img-thumbnail">
      <span class="img-thumbnail-overlay bg-success opacity-25"></span>
      <span class="img-thumbnail-content text-white text-xlarge">
        <i class="ion ion-ios-search"></i>
      </span>
      <img src="assets/img/bg/3.jpg" alt class="img-fluid">
    </a>
  </div>
  <div class="col-md">
    <a href="#" class="img-thumbnail">
      <span class="img-thumbnail-overlay bg-white opacity-75"></span>
      <span class="img-thumbnail-content text-secondary text-xlarge">
        <i class="ion ion-ios-search"></i>
      </span>
      <img src="assets/img/bg/4.jpg" alt class="img-fluid">
    </a>
  </div>
</div>

Shadow on hover</>

<div class="row">
  <div class="col-md">
    <a href="#" class="img-thumbnail img-thumbnail-shadow">
      <span class="img-thumbnail-overlay bg-dark opacity-25"></span>
      <span class="img-thumbnail-content text-white text-xlarge">
        <i class="ion ion-ios-search"></i>
      </span>
      <img src="assets/img/bg/1.jpg" alt class="img-fluid">
    </a>
  </div>
  <div class="col-md">
    <a href="#" class="img-thumbnail img-thumbnail-shadow">
      <span class="img-thumbnail-overlay bg-primary opacity-50"></span>
      <span class="img-thumbnail-content text-white text-xlarge">
        <i class="ion ion-ios-search"></i>
      </span>
      <img src="assets/img/bg/2.jpg" alt class="img-fluid">
    </a>
  </div>
  <div class="col-md">
    <a href="#" class="img-thumbnail img-thumbnail-shadow">
      <span class="img-thumbnail-overlay bg-success opacity-25"></span>
      <span class="img-thumbnail-content text-white text-xlarge">
        <i class="ion ion-ios-search"></i>
      </span>
      <img src="assets/img/bg/3.jpg" alt class="img-fluid">
    </a>
  </div>
  <div class="col-md">
    <a href="#" class="img-thumbnail img-thumbnail-shadow">
      <span class="img-thumbnail-overlay bg-white opacity-75"></span>
      <span class="img-thumbnail-content text-secondary text-xlarge">
        <i class="ion ion-ios-search"></i>
      </span>
      <img src="assets/img/bg/4.jpg" alt class="img-fluid">
    </a>
  </div>
</div>

Zoom In animation on hover</>

<div class="row">
  <div class="col-md">
    <a href="#" class="img-thumbnail img-thumbnail-zoom-in">
      <span class="img-thumbnail-overlay bg-dark opacity-25"></span>
      <span class="img-thumbnail-content text-white text-xlarge">
        <i class="ion ion-ios-search"></i>
      </span>
      <img src="assets/img/bg/1.jpg" alt class="img-fluid">
    </a>
  </div>
  <div class="col-md">
    <a href="#" class="img-thumbnail img-thumbnail-zoom-in">
      <span class="img-thumbnail-overlay bg-primary opacity-50"></span>
      <span class="img-thumbnail-content text-white text-xlarge">
        <i class="ion ion-ios-search"></i>
      </span>
      <img src="assets/img/bg/2.jpg" alt class="img-fluid">
    </a>
  </div>
  <div class="col-md">
    <a href="#" class="img-thumbnail img-thumbnail-zoom-in">
      <span class="img-thumbnail-overlay bg-success opacity-25"></span>
      <span class="img-thumbnail-content text-white text-xlarge">
        <i class="ion ion-ios-search"></i>
      </span>
      <img src="assets/img/bg/3.jpg" alt class="img-fluid">
    </a>
  </div>
  <div class="col-md">
    <a href="#" class="img-thumbnail img-thumbnail-zoom-in">
      <span class="img-thumbnail-overlay bg-white opacity-75"></span>
      <span class="img-thumbnail-content text-secondary text-xlarge">
        <i class="ion ion-ios-search"></i>
      </span>
      <img src="assets/img/bg/4.jpg" alt class="img-fluid">
    </a>
  </div>
</div>

Cards

Example</>

<div class="card" style="max-width: 20rem;">
  <img class="card-img-top" src="assets/img/bg/2.jpg" alt="Card image cap">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Content types</>

<div class="row">
  <div class="col-md">

    <div class="card mb-3">
      <div class="card-body">
        This is some text within a card block.
      </div>
    </div>

  </div>
  <div class="col-md">

    <div class="card mb-3">
      <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <div class="card-subtitle text-muted mb-3">Card subtitle</div>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="card-link">Card link</a>
        <a href="#" class="card-link">Another link</a>
      </div>
    </div>

  </div>
  <div class="w-100"></div>
  <div class="col-md">

    <div class="card mb-3">
      <img class="card-img-top" src="assets/img/bg/3.jpg" alt="Card image cap">
      <div class="card-body">
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>

  </div>
  <div class="col-md">

    <div class="card mb-3">
      <ul class="list-group list-group-flush">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Vestibulum at eros</li>
      </ul>
    </div>

  </div>
</div>

This is some text within a card block.

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link

Some quick example text to build on the card title and make up the bulk of the card's content.

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

Mixed</>

<div class="card" style="max-width: 20rem;">
  <img class="card-img-top" src="assets/img/bg/4.jpg" alt="Card image cap">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

Card link Another link

Header and footer</>

<div class="row">
  <div class="col-md">

    <div class="card mb-3">
      <div class="card-header">
        Featured
      </div>
      <div class="card-body">
        <h4 class="card-title">Special title treatment</h4>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>

  </div>
  <div class="col-md">

    <div class="card mb-3">
      <h4 class="card-header">Featured</h4>
      <div class="card-body">
        <h4 class="card-title">Special title treatment</h4>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>

  </div>
  <div class="w-100"></div>
  <div class="col-md">

    <div class="card mb-3">
      <div class="card-header">
        Quote
      </div>
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
          <footer class="blockquote-footer">Someone famous in
            <cite title="Source Title">Source Title</cite>
          </footer>
        </blockquote>
      </div>
    </div>

  </div>
  <div class="col-md">

    <div class="card text-center mb-3">
      <div class="card-header">
        Featured
      </div>
      <div class="card-body">
        <h4 class="card-title">Special title treatment</h4>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
      <div class="card-footer text-muted">
        2 days ago
      </div>
    </div>

  </div>
</div>

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

2 days ago

Text alignment</>

<div class="row">
  <div class="col-lg">

    <div class="card mb-3">
      <div class="card-body">
        <h4 class="card-title">Special title treatment</h4>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>

  </div>
  <div class="col-lg">

    <div class="card text-center mb-3">
      <div class="card-body">
        <h4 class="card-title">Special title treatment</h4>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>

  </div>
  <div class="col-lg">

    <div class="card text-right mb-3">
      <div class="card-body">
        <h4 class="card-title">Special title treatment</h4>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>

  </div>
</div>

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Navigation</>

<div class="row">
  <div class="col-md">

    <div class="card text-center mb-3">
      <div class="card-header">
        <ul class="nav nav-tabs card-header-tabs nav-responsive-md">
          <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </div>
      <div class="card-body">
        <h4 class="card-title">Special title treatment</h4>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>

  </div>
  <div class="col-md">

    <div class="card text-center mb-3">
      <div class="card-header">
        <ul class="nav nav-pills card-header-pills nav-responsive-md">
          <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </div>
      <div class="card-body">
        <h4 class="card-title">Special title treatment</h4>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>

  </div>
</div>

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Light navigation (Material only)</>

<div class="row">
  <div class="col-md">

    <div class="card text-center mb-3">
      <div class="card-header bg-primary border-0">
        <ul class="nav nav-tabs md-tabs-light card-header-tabs nav-responsive-md">
          <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </div>
      <div class="card-body">
        <h4 class="card-title">Special title treatment</h4>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>

  </div>
  <div class="col-md">

    <div class="card text-center mb-3">
      <div class="card-header bg-primary border-0">
        <ul class="nav nav-pills md-pills-light card-header-pills nav-responsive-md">
          <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </div>
      <div class="card-body">
        <h4 class="card-title">Special title treatment</h4>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>

  </div>
</div>

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Images</>

<div class="row">
  <div class="col-lg">

    <div class="card mb-3">
      <img class="card-img-top" src="assets/img/bg/5.jpg" alt="Card image cap">
      <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text">
          <small class="text-muted">Last updated 3 mins ago</small>
        </p>
      </div>
    </div>

  </div>
  <div class="col-lg">

    <div class="card mb-3">
      <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text">
          <small class="text-muted">Last updated 3 mins ago</small>
        </p>
      </div>
      <img class="card-img-bottom" src="assets/img/bg/1.jpg" alt="Card image cap">
    </div>

  </div>
  <div class="col-lg">

    <div class="card bg-dark border-0 text-white">
      <img class="card-img" src="assets/img/bg/2.jpg" alt="Card image">
      <div class="card-img-overlay">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text">Last updated 3 mins ago</p>
      </div>
    </div>

  </div>
</div>

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Condenced</>

<div class="card card-condenced" style="max-width: 20rem;">
  <div class="card-header">
    Card header
  </div>
  <img class="card-img-top" src="assets/img/bg/3.jpg" alt="Card image cap">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Card header

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

Card link Another link

Style variations</>

<div class="row">
  <div class="col-md">

    <div class="card bg-primary text-white mb-3">
      <div class="card-header">Header</div>
      <div class="card-body">
        <h4 class="card-title">Primary card title</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>

  </div>
  <div class="col-md">

    <div class="card bg-secondary text-white mb-3">
      <div class="card-header">Header</div>
      <div class="card-body">
        <h4 class="card-title">Secondary card title</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>

  </div>
  <div class="col-md">

    <div class="card bg-success text-white mb-3">
      <div class="card-header">Header</div>
      <div class="card-body">
        <h4 class="card-title">Success card title</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>

  </div>
  <div class="w-100"></div>
  <div class="col-md">

    <div class="card bg-danger text-white mb-3">
      <div class="card-header">Header</div>
      <div class="card-body">
        <h4 class="card-title">Danger card title</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>

  </div>
  <div class="col-md">

    <div class="card bg-warning text-white mb-3">
      <div class="card-header">Header</div>
      <div class="card-body">
        <h4 class="card-title">Warning card title</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>

  </div>
  <div class="col-md">

    <div class="card bg-info text-white mb-3">
      <div class="card-header">Header</div>
      <div class="card-body">
        <h4 class="card-title">Info card title</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>

  </div>
  <div class="w-100"></div>
  <div class="col-md">

    <div class="card bg-dark text-white mb-3">
      <div class="card-header">Header</div>
      <div class="card-body">
        <h4 class="card-title">Dark card title</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>

  </div>
</div>

<!-- Outline -->
<div class="row">
  <div class="col-md">

    <div class="card bg-transparent border-primary mb-3 box-shadow-none">
      <div class="card-body">
        <h4 class="card-title">Primary card title</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>

  </div>
  <div class="col-md">

    <div class="card bg-transparent border-secondary mb-3 box-shadow-none">
      <div class="card-body">
        <h4 class="card-title">Secondary card title</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>

  </div>
  <div class="col-md">

    <div class="card bg-transparent border-success mb-3 box-shadow-none">
      <div class="card-body">
        <h4 class="card-title">Success card title</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>

  </div>
  <div class="w-100"></div>
  <div class="col-md">

    <div class="card bg-transparent border-danger mb-3 box-shadow-none">
      <div class="card-body">
        <h4 class="card-title">Danger card title</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>

  </div>
  <div class="col-md">

    <div class="card bg-transparent border-warning mb-3 box-shadow-none">
      <div class="card-body">
        <h4 class="card-title">Warning card title</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>

  </div>
  <div class="col-md">

    <div class="card bg-transparent border-info mb-3 box-shadow-none">
      <div class="card-body">
        <h4 class="card-title">Info card title</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>

  </div>
  <div class="w-100"></div>
  <div class="col-md">

    <div class="card bg-transparent border-dark mb-3 box-shadow-none">
      <div class="card-body">
        <h4 class="card-title">Dark card title</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>

  </div>
</div>

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Warning card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Info card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Dark card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Warning card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Info card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Dark card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Hover cards</>

<div class="row">
  <div class="col-lg">

    <div class="card card-hover mb-3">
      <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>

  </div>
  <div class="col-lg">

    <div class="card card-hover bg-primary text-white mb-3">
      <div class="card-body">
        <h4 class="card-title">Primary card title</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>

  </div>
  <div class="col-lg">

    <div class="card card-hover bg-transparent border-primary mb-3 box-shadow-none">
      <div class="card-body">
        <h4 class="card-title">Primary card title</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>

  </div>
</div>

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

With elements</>

<div class="row">
  <div class="col-md">

    <div class="card mb-3">
      <!-- Add `.with-elements` to the parent `.card-header` element -->
      <div class="card-header with-elements">
        <span class="card-header-title mr-2">Card header</span>
        <div class="card-header-elements">
          <span class="badge badge-outline-success">20</span>
          <span class="badge badge-primary badge-pill">12</span>
        </div>
        <div class="card-header-elements ml-md-auto">
          <span class="badge badge-outline-success">20</span>
          <span class="badge badge-primary badge-pill">12</span>
        </div>
      </div>
      <div class="card-body">
        <p class="card-text">Lorem ipsum dolor sit amet, idque nostro eirmod qui at.</p>
      </div>
    </div>

  </div>
  <div class="col-md">

    <div class="card mb-3">
      <div class="card-body">
        <div class="card-title with-elements">
          <h5 class="m-0 mr-2">Card title</h5>
          <div class="card-title-elements">
            <span class="badge badge-outline-success">20</span>
            <span class="badge badge-primary badge-pill">12</span>
          </div>
          <div class="card-title-elements ml-md-auto">
            <span class="badge badge-outline-success">20</span>
            <span class="badge badge-primary badge-pill">12</span>
          </div>
        </div>
        <p class="card-text">Lorem ipsum dolor sit amet, idque nostro eirmod qui at.</p>
      </div>
    </div>

  </div>
  <div class="w-100"></div>
  <div class="col-md">

    <div class="card mb-3">
      <!-- Add `.with-elements` to the parent `.card-header` element -->
      <div class="card-header with-elements">
        <span class="card-header-title mr-2">Card header</span>
        <div class="card-header-elements">
          <button type="button" class="btn btn-xs btn-outline-primary">
            <span class="ion ion-md-add"></span> Add</button>
          <button type="button" class="btn icon-btn btn-xs btn-success">
            <span class="ion ion-md-cloud-download"></span>
          </button>
        </div>
        <div class="card-header-elements ml-md-auto">
          <button type="button" class="btn btn-xs btn-outline-primary">
            <span class="ion ion-md-add"></span> Add</button>
          <button type="button" class="btn icon-btn btn-xs btn-success">
            <span class="ion ion-md-cloud-download"></span>
          </button>
        </div>
      </div>
      <div class="card-body">
        <p class="card-text">Lorem ipsum dolor sit amet, idque nostro eirmod qui at.</p>
      </div>
    </div>

  </div>
  <div class="col-md">

    <div class="card mb-3">
      <div class="card-body">
        <div class="card-title with-elements">
          <h5 class="m-0 mr-2">Card title</h5>
          <div class="card-title-elements">
            <button type="button" class="btn btn-xs btn-outline-primary">
              <span class="ion ion-md-add"></span> Add</button>
            <button type="button" class="btn icon-btn btn-xs btn-success">
              <span class="ion ion-md-cloud-download"></span>
            </button>
          </div>
          <div class="card-title-elements ml-md-auto">
            <button type="button" class="btn btn-xs btn-outline-primary">
              <span class="ion ion-md-add"></span> Add</button>
            <button type="button" class="btn icon-btn btn-xs btn-success">
              <span class="ion ion-md-cloud-download"></span>
            </button>
          </div>
        </div>
        <p class="card-text">Lorem ipsum dolor sit amet, idque nostro eirmod qui at.</p>
      </div>
    </div>

  </div>
  <div class="w-100"></div>
  <div class="col-md">

    <div class="card mb-3">
      <!-- Add `.with-elements` to the parent `.card-header` element -->
      <div class="card-header with-elements">
        <span class="card-header-title mr-2">Card header</span>
        <div class="card-header-elements">
          <select class="custom-select custom-select-sm w-auto">
            <option selected>1</option>
            <option>2</option>
            <option>3</option>
          </select>
          <input type="text" class="form-control form-control-sm" placeholder="Search" style="width:50px">
          <label class="switcher switcher-sm mr-0">
            <input type="checkbox" class="switcher-input">
            <span class="switcher-indicator">
              <span class="switcher-yes"></span>
              <span class="switcher-no"></span>
            </span>
          </label>
        </div>
        <div class="card-header-elements ml-md-auto">
          <select class="custom-select custom-select-sm w-auto">
            <option selected>1</option>
            <option>2</option>
            <option>3</option>
          </select>
          <input type="text" class="form-control form-control-sm" placeholder="Search" style="width:50px">
          <label class="switcher switcher-sm mr-0">
            <input type="checkbox" class="switcher-input">
            <span class="switcher-indicator">
              <span class="switcher-yes"></span>
              <span class="switcher-no"></span>
            </span>
          </label>
        </div>
      </div>
      <div class="card-body">
        <p class="card-text">Lorem ipsum dolor sit amet, idque nostro eirmod qui at.</p>
      </div>
    </div>

  </div>
  <div class="col-md">

    <div class="card mb-3">
      <div class="card-body">
        <div class="card-title with-elements">
          <h5 class="m-0 mr-2">Card title</h5>
          <div class="card-title-elements">
            <select class="custom-select custom-select-sm w-auto">
              <option selected>1</option>
              <option>2</option>
              <option>3</option>
            </select>
            <input type="text" class="form-control form-control-sm" placeholder="Search" style="width:50px">
            <label class="switcher switcher-sm mr-0">
              <input type="checkbox" class="switcher-input">
              <span class="switcher-indicator">
                <span class="switcher-yes"></span>
                <span class="switcher-no"></span>
              </span>
            </label>
          </div>
          <div class="card-title-elements ml-md-auto">
            <select class="custom-select custom-select-sm w-auto">
              <option selected>1</option>
              <option>2</option>
              <option>3</option>
            </select>
            <input type="text" class="form-control form-control-sm" placeholder="Search" style="width:50px">
            <label class="switcher switcher-sm mr-0">
              <input type="checkbox" class="switcher-input">
              <span class="switcher-indicator">
                <span class="switcher-yes"></span>
                <span class="switcher-no"></span>
              </span>
            </label>
          </div>
        </div>
        <p class="card-text">Lorem ipsum dolor sit amet, idque nostro eirmod qui at.</p>
      </div>
    </div>

  </div>
  <div class="w-100"></div>
  <div class="col-md">

    <div class="card mb-3">
      <!-- Add `.with-elements` to the parent `.card-header` element -->
      <div class="card-header with-elements">
        <span class="card-header-title mr-2">Card header</span>
        <div class="card-header-elements">
          <span class="text text-muted">
            <small>Some TEXT</small>
          </span>
          <span class="ion ion-md-star"></span>
        </div>
        <div class="card-header-elements ml-md-auto">
          <span class="text text-muted">
            <small>Some TEXT</small>
          </span>
          <span class="ion ion-md-star"></span>
        </div>
      </div>
      <div class="card-body">
        <p class="card-text">Lorem ipsum dolor sit amet, idque nostro eirmod qui at.</p>
      </div>
    </div>

  </div>
  <div class="col-md">

    <div class="card mb-3">
      <div class="card-body">
        <div class="card-title with-elements">
          <h5 class="m-0 mr-2">Card title</h5>
          <div class="card-title-elements">
            <span class="text text-muted">
              <small>Some TEXT</small>
            </span>
            <span class="ion ion-md-star"></span>
          </div>
          <div class="card-title-elements ml-md-auto">
            <span class="text text-muted">
              <small>Some TEXT</small>
            </span>
            <span class="ion ion-md-star"></span>
          </div>
        </div>
        <p class="card-text">Lorem ipsum dolor sit amet, idque nostro eirmod qui at.</p>
      </div>
    </div>

  </div>
  <div class="w-100"></div>
  <div class="col-md">

    <div class="card mb-3">
      <!-- Add `.with-elements` to the parent `.card-header` element -->
      <div class="card-header with-elements">
        <span class="card-header-title mr-2">Card header</span>
        <div class="card-header-elements">
          <ul class="pagination pagination-sm mb-0">
            <li class="page-item active">
              <a class="page-link" href="#">1</a>
            </li>
            <li class="page-item">
              <a class="page-link" href="#">2</a>
            </li>
          </ul>
          <div class="progress" style="height: 6px;width: 50px;">
            <div class="progress-bar" style="width: 60%;"></div>
          </div>
        </div>
        <div class="card-header-elements ml-md-auto">
          <ul class="pagination pagination-sm mb-0">
            <li class="page-item active">
              <a class="page-link" href="#">1</a>
            </li>
            <li class="page-item">
              <a class="page-link" href="#">2</a>
            </li>
          </ul>
          <div class="progress" style="height: 6px;width: 50px;">
            <div class="progress-bar" style="width: 60%;"></div>
          </div>
        </div>
      </div>
      <div class="card-body">
        <p class="card-text">Lorem ipsum dolor sit amet, idque nostro eirmod qui at.</p>
      </div>
    </div>

  </div>
  <div class="col-md">

    <div class="card mb-3">
      <div class="card-body">
        <div class="card-title with-elements">
          <h5 class="m-0 mr-2">Card title</h5>
          <div class="card-title-elements">
            <ul class="pagination pagination-sm mb-0">
              <li class="page-item active">
                <a class="page-link" href="#">1</a>
              </li>
              <li class="page-item">
                <a class="page-link" href="#">2</a>
              </li>
            </ul>
            <div class="progress" style="height: 6px;width: 50px;">
              <div class="progress-bar" style="width: 60%;"></div>
            </div>
          </div>
          <div class="card-title-elements ml-md-auto">
            <ul class="pagination pagination-sm mb-0">
              <li class="page-item active">
                <a class="page-link" href="#">1</a>
              </li>
              <li class="page-item">
                <a class="page-link" href="#">2</a>
              </li>
            </ul>
            <div class="progress" style="height: 6px;width: 50px;">
              <div class="progress-bar" style="width: 60%;"></div>
            </div>
          </div>
        </div>
        <p class="card-text">Lorem ipsum dolor sit amet, idque nostro eirmod qui at.</p>
      </div>
    </div>

  </div>
</div>

Card header

20 12

Lorem ipsum dolor sit amet, idque nostro eirmod qui at.

Card title

20 12

Lorem ipsum dolor sit amet, idque nostro eirmod qui at.

Card header

Lorem ipsum dolor sit amet, idque nostro eirmod qui at.

Card title

Lorem ipsum dolor sit amet, idque nostro eirmod qui at.

Card header

Lorem ipsum dolor sit amet, idque nostro eirmod qui at.

Card title

Lorem ipsum dolor sit amet, idque nostro eirmod qui at.

Card header

Some TEXT

Lorem ipsum dolor sit amet, idque nostro eirmod qui at.

Card title

Some TEXT

Lorem ipsum dolor sit amet, idque nostro eirmod qui at.

Card header

1
2

1
2

Lorem ipsum dolor sit amet, idque nostro eirmod qui at.

Card title

1
2

1
2

Lorem ipsum dolor sit amet, idque nostro eirmod qui at.

Card groups</>

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="assets/img/bg/4.jpg" alt="Card image cap">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="assets/img/bg/5.jpg" alt="Card image cap">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="assets/img/bg/1.jpg" alt="Card image cap">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

Card decks</>

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="assets/img/bg/2.jpg" alt="Card image cap">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="assets/img/bg/3.jpg" alt="Card image cap">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="assets/img/bg/4.jpg" alt="Card image cap">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

Card columns</>

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src="assets/img/bg/5.jpg" alt="Card image cap">
    <div class="card-body">
      <h4 class="card-title">Card title that wraps to a new line</h4>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card">
    <blockquote class="blockquote card-body mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in
          <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" src="assets/img/bg/1.jpg" alt="Card image cap">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text">
        <small class="text-muted">Last updated 3 mins ago</small>
      </p>
    </div>
  </div>
  <div class="card bg-primary text-center text-white">
    <blockquote class="blockquote card-body mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer text-white opacity-75">
        <small>
          Someone famous in
          <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text">
        <small class="text-muted">Last updated 3 mins ago</small>
      </p>
    </div>
  </div>
  <div class="card">
    <img class="card-img" src="assets/img/bg/2.jpg" alt="Card image">
  </div>
  <div class="card text-right">
    <blockquote class="blockquote card-body mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in
          <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text">
        <small class="text-muted">Last updated 3 mins ago</small>
      </p>
    </div>
  </div>
</div>

Card title that wraps to a new line

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Someone famous in Source Title

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

Accordion

Default</>

<div id="accordion">
  <div class="card mb-2">
    <div class="card-header">
      <a class="text-dark" data-toggle="collapse" href="#accordion-1">
        Collapsible Group Item #1
      </a>
    </div>

    <div id="accordion-1" class="collapse show" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>

  <div class="card mb-2">
    <div class="card-header">
      <a class="collapsed text-dark" data-toggle="collapse" href="#accordion-2">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="accordion-2" class="collapse" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>

  <div class="card mb-2">
    <div class="card-header">
      <a class="collapsed text-dark" data-toggle="collapse" href="#accordion-3">
        Collapsible Group Item #3
      </a>
    </div>
    <div id="accordion-3" class="collapse" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Collapsible Group Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Collapsible Group Item #2

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Collapsible Group Item #3

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

With icon</>

<div id="accordion2">
  <div class="card mb-2">
    <div class="card-header">
      <a class="d-flex justify-content-between text-dark" data-toggle="collapse" aria-expanded="true" href="#accordion2-1">
        Collapsible Group Item #1
        <div class="collapse-icon"></div>
      </a>
    </div>

    <div id="accordion2-1" class="collapse show" data-parent="#accordion2">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>

  <div class="card mb-2">
    <div class="card-header">
      <a class="collapsed d-flex justify-content-between text-dark" data-toggle="collapse" href="#accordion2-2">
        Collapsible Group Item #2
        <div class="collapse-icon"></div>
      </a>
    </div>
    <div id="accordion2-2" class="collapse" data-parent="#accordion2">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>

  <div class="card mb-2">
    <div class="card-header">
      <a class="collapsed d-flex justify-content-between text-dark" data-toggle="collapse" href="#accordion2-3">
        Collapsible Group Item #3
        <div class="collapse-icon"></div>
      </a>
    </div>
    <div id="accordion2-3" class="collapse" data-parent="#accordion2">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Collapsible Group Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Collapsible Group Item #2

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Collapsible Group Item #3

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Carousel

Example</>

<div id="carouselExample" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExample" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExample" data-slide-to="1"></li>
    <li data-target="#carouselExample" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="assets/img/bg/1.jpg" alt="First slide">
      <div class="carousel-caption d-none d-md-block">
        <h3>First slide</h3>
        <p>Eos mutat malis maluisset et, agam ancillae quo te, in vim congue pertinacia.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="assets/img/bg/2.jpg" alt="Second slide">
      <div class="carousel-caption d-none d-md-block">
        <h3>Second slide</h3>
        <p>In numquam omittam sea.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="assets/img/bg/3.jpg" alt="Third slide">
      <div class="carousel-caption d-none d-md-block">
        <h3>Third slide</h3>
        <p>Lorem ipsum dolor sit amet, virtute consequat ea qui, minim graeco mel no.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

First slide

Eos mutat malis maluisset et, agam ancillae quo te, in vim congue pertinacia.

Second slide

In numquam omittam sea.

Third slide

Lorem ipsum dolor sit amet, virtute consequat ea qui, minim graeco mel no.

HTML Complete UI / Base Plugins Charts

Typography

Headings</>

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text

h6. Bootstrap heading Secondary text

Display headings</>

Display 1

Display 2

Display 3

Display 4

Paragraph</>

Inline text elements</>

Abbreviations</>

Addresses</>

Blockquotes</>

Lists</>

Code</>

Jumbotron</>

Hello, world!

Figures</>

Utilities

Border color</>

Text color</>

Background color</>

Opacity</>

Text sizing</>

Font weight</>

Line height</>

Text decoration and transform</>

Expanded text</>

Shadows</>

Overflow</>

Cursor</>

Sizing

Layout container spacing</>

Negative horizontal margins</>

Flex

Bordered rows</>

Transforms</>

Fixes</>

Buttons

Variations</>

Outline</>

Flat (Material only)</>

Round</>

Extra-large</>

Large</>

Small</>

Extra-small</>

With icon</>

Icon-buttons</>

Borderless icon-buttons</>

Disabled</>

Single toggle</>

Checkbox and radio</>

Badges

Within headings</>

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Variations</>

Pills</>

Outline</>

Button badges</>

Dot badges</>

Indicators</>

Button groups

Sizes</>

Button toolbars</>

Nesting</>

Vertical</>

Button dropdowns

Variations</>

HTML Complete UI /
Base
Plugins Charts

Payment Information
We need payment information to process your order.

Payment Information
We need payment information to process your order.