<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 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>
<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.
Lorem ipsum dolor sit amet, ad tibique blandit qui, error zril eleifend ut vel. Et paulo labores molestiae has, ei eos virtute dolorem.
<!-- 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
<!-- 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.
<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>
<!-- 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.
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.
<!-- 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>
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
<!-- Inline -->
<p>
For example, <code><section></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><p>Sample text here...</p></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.
<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>
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.
<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>
See more: https://getbootstrap.com/docs/4.0/utilities
<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>
<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>
<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>
<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
<!-- 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.
<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.
<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.
<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
<p>
<code>.text-expanded</code> -
<span class="text-expanded">Encrease letter-spacing property.</span>
</p>
.text-expanded
-
<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
<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.
<div class="ui-bordered p-4 cursor-pointer">
<code>.cursor-pointer</code> - cursor: pointer
</div>
.cursor-pointer
- cursor: pointer
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
<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
<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>
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-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
.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>
<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
<!-- 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
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<button type="button" class="btn btn-lg btn-primary">
<span class="far fa-paper-plane"></span> Primary</button>
<button type="button" class="btn btn-lg btn-secondary">
<span class="oi oi-cloud-download"></span> Secondary</button>
<button type="button" class="btn btn-lg btn-default">
<span class="pe-7s-users"></span> Default</button>
<button type="button" class="btn btn-lg btn-success">
<span class="ion ion-md-bulb"></span> Success</button>
<button type="button" class="btn btn-lg btn-warning">
<span class="lnr lnr-map"></span> Warning</button>
<button type="button" class="btn btn-lg btn-info">
<span class="far fa-paper-plane"></span> Info</button>
<button type="button" class="btn btn-lg btn-danger">
<span class="oi oi-cloud-download"></span> Danger</button>
<button type="button" class="btn btn-lg btn-dark">
<span class="pe-7s-users"></span> Dark</button>
<!-- 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>
<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>
<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>
<button type="button" class="btn btn-primary" data-toggle="button">
Single toggle
</button>
<!-- 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>
<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>
<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>
<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>
<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>
<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>
<span class="badge badge-dot badge-default"></span> Default
<span class="badge badge-dot badge-primary"></span> Primary
<span class="badge badge-dot badge-success"></span> Success
<span class="badge badge-dot badge-info"></span> Info
<span class="badge badge-dot badge-warning"></span> Warning
<span class="badge badge-dot badge-danger"></span> Danger
<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>
<!-- 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>
<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>
<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 -->
<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 -->
<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 -->
<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 -->
<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 -->
<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 -->
<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> With icon</a>
<a class="dropdown-item" href="#">Last action</a>
</div>
<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 -->
<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 -->
<!-- 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>
<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>
<!-- 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>
<!-- 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>
<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>
<!-- 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 -->
<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 -->
<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>
<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>
<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>
<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>
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>
<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>
<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>
<div class="progress">
<div class="progress-bar" style="width: 60%;"></div>
</div>
<div class="progress" style="height: 6px;">
<div class="progress-bar" style="width: 60%;"></div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 30%;">30%</div>
</div>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.<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>
<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>
<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>
<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 -->
<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 -->
<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 -->
<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 -->
<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>
<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>
<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>
<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>
<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>
<input type="text" class="form-control" placeholder="Text input">
<textarea class="form-control" rows="3"></textarea>
<!-- 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>
<!-- 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>
<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>
<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>
<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>
<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>
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
<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 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>
<!-- 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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<label class="custom-file">
<input type="file" class="custom-file-input">
<span class="custom-file-label"></span>
</label>
<label class="custom-file">
<input type="file" class="custom-file-input" disabled>
<span class="custom-file-label"></span>
</label>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<!-- 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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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 -->
<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 -->
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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 -->
<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 -->
<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>
<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>
<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>
<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 -->
<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 -->
<script src="assets/vendor/js/sidenav.js"></script>
<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 -->
<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 -->
<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 -->
<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 -->
<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 -->
<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 -->
<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 -->
<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 -->
<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 -->
<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 -->
<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>
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.
|
|
onOpened |
Called after menu/dropdown open animation ends.
|
|
onClose |
Called immediately after toggle link clicked.
|
|
onClosed |
Called after menu/dropdown close animation ends.
|
sidenavInstance.method(...arguments);
Method | Arguments | Description |
---|---|---|
open(el[, closeChildren=options.closeChildren]) |
|
Open menu/dropdown |
close(el[, closeChildren=options.closeChildren]) |
|
Close menu/dropdown |
toggle(el[, closeChildren=options.closeChildren]) |
|
Toggle menu/dropdown |
closeAll([closeChildren=options.closeChildren]) |
|
Close all menus/dropdowns |
setActive(el, active[, openTree=true[, deactivateOthers=true]]) |
|
Activate/deactivate item |
setDisabled(el, disabled) |
|
Disable/enable item |
isActive(el) |
|
Returns true if item is active |
isOpened(el) |
|
Returns true if menu item is opened |
isDisabled(el) |
|
Returns true if item is disabled |
update() |
Update scrollbar (vertical mode) / scrollable area (horizontal mode) | |
destroy() |
Destroy SideNav instance |
<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>
<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 |
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<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 |
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<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 |
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<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 |
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Mark | Otto | @TwBootstrap |
3 | Jacob | Thornton | @fat |
4 | Larry the Bird |
<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 |
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Mark | Otto | @TwBootstrap |
3 | Jacob | Thornton | @fat |
4 | Larry the Bird |
<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 |
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
<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 |
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
<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 |
<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>
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<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 |
<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>
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 agoCras 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 agoCras 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<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>
<a href="#" class="text-muted small">
<span class="ion ion-ios-thumbs-down"></span>
</a>
<span class="text-muted small"> · </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>
<a href="#" class="text-muted small">
<span class="ion ion-ios-thumbs-down"></span>
</a>
<span class="text-muted small"> · </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>
<a href="#" class="text-muted small">
<span class="ion ion-ios-thumbs-down"></span>
</a>
<span class="text-muted small"> · </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>
<a href="#" class="text-muted small">
<span class="ion ion-ios-thumbs-down"></span>
</a>
<span class="text-muted small"> · </span>
<a href="#" class="text-muted small">Reply</a>
</div>
</div>
</div>
</div>
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.
· ReplyCras 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.
· ReplyCras 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.
· ReplyCras 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<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>
<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>
<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>
<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>
<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>
<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>
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere<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>
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another linkSome quick example text to build on the card title and make up the bulk of the card's content.
<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>
Some quick example text to build on the card title and make up the bulk of the card's content.
<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>
With supporting text below as a natural lead-in to additional content.
Go somewhereWith supporting text below as a natural lead-in to additional content.
Go somewhereLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
With supporting text below as a natural lead-in to additional content.
Go somewhere<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>
With supporting text below as a natural lead-in to additional content.
Go somewhereWith supporting text below as a natural lead-in to additional content.
Go somewhereWith supporting text below as a natural lead-in to additional content.
Go somewhere<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>
With supporting text below as a natural lead-in to additional content.
Go somewhereWith supporting text below as a natural lead-in to additional content.
Go somewhere<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>
With supporting text below as a natural lead-in to additional content.
Go somewhereWith supporting text below as a natural lead-in to additional content.
Go somewhere<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>
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
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
<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>
Some quick example text to build on the card title and make up the bulk of the card's content.
<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>
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
<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>
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
<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>
Lorem ipsum dolor sit amet, idque nostro eirmod qui at.
Lorem ipsum dolor sit amet, idque nostro eirmod qui at.
Lorem ipsum dolor sit amet, idque nostro eirmod qui at.
Lorem ipsum dolor sit amet, idque nostro eirmod qui at.
Lorem ipsum dolor sit amet, idque nostro eirmod qui at.
Lorem ipsum dolor sit amet, idque nostro eirmod qui at.
Lorem ipsum dolor sit amet, idque nostro eirmod qui at.
Lorem ipsum dolor sit amet, idque nostro eirmod qui at.
<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>
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
This card has supporting text below as a natural lead-in to additional content.
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.
<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>
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
This card has supporting text below as a natural lead-in to additional content.
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.
<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>
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.
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.
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.
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
<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>
<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>
<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>