Tryag File Manager

//home/nonga.eemo.co.kr/public_html/www/complete-ui_base.html

<!DOCTYPE html>

<head>
  <title>Base - HTML Complete UI - Appwork</title>

<link rel="stylesheet" href="assets/vendor/fonts/fontawesome.css">
  <link rel="stylesheet" href="assets/vendor/fonts/ionicons.css">
  <link rel="stylesheet" href="assets/vendor/fonts/linearicons.css">
  <link rel="stylesheet" href="assets/vendor/fonts/open-iconic.css">
  <link rel="stylesheet" href="assets/vendor/fonts/pe-icon-7-stroke.css">

<link rel="stylesheet" href="assets/vendor/css/rtl/bootstrap.css" class="theme-settings-bootstrap-css">
  <link rel="stylesheet" href="assets/vendor/css/rtl/appwork.css" class="theme-settings-appwork-css">
  <link rel="stylesheet" href="assets/vendor/css/rtl/theme-corporate.css" class="theme-settings-theme-css">
  <link rel="stylesheet" href="assets/vendor/css/rtl/colors.css" class="theme-settings-colors-css">
  <link rel="stylesheet" href="assets/vendor/css/rtl/uikit.css">

<script src="assets/vendor/js/theme-settings.js"></script>
  <script>
    window.themeSettings = new ThemeSettings({
      cssPath: 'assets/vendor/css/rtl/',
      themesPath: 'assets/vendor/css/rtl/'
    });
  </script>

<script src="assets/vendor/js/pace.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="assets/vendor/libs/clipboard/clipboard.js"></script>

<link rel="stylesheet" href="assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css">

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css">
  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>

<style>
    #main-header { font-weight: bold; font-size: 1.6875rem; margin: 0 0 -.3125rem 0; padding: .9375rem 3.125rem; line-height: 2.5rem; }
    #main-header-path { opacity: .4; }

.no-ie10, .no-ie11 { display: block; background: #fff9e5; color: #66645c; border-left: 4px solid #e6d292; padding: 10px; margin: 24px 0; direction: ltr !important; }
    .no-ie10:before, .no-ie11:before { content: attr(data-name); font-weight: bold; }
    .no-ie10:after { content: " doesn't support Internet Explorer 10 and below."; }
    .no-ie11:after { content: " doesn't support Internet Explorer 11 and below."; }
    .no-ie10.no-message:after, .no-ie11.no-message:after { display: none; }

/* Page background */
    .ui-block, .cui-bottom-spacer { background: transparent; }

/* Blocks */
    .ui-block { padding: 1.875rem 3.125rem; border-top: .3125rem solid rgba(49,68,82,.07); }

/* Headings */
    .ui-block-heading { margin: 0 -3.125rem; padding: 0 3.125rem; }
    h3.ui-block-heading { font-size: 1.25rem; }
    h4.ui-block-heading { margin-top: 1.875rem; padding-top: 1.875rem; padding-bottom: 1.875rem; text-transform: uppercase; color: rgba(24, 28, 33, .4); border-top: .0625rem solid rgba(49,68,82,.05); font-size: .6875rem; }
    h4.ui-block-heading:first-of-type { margin-top: 0; border: 0; }

/* Description */
    .ui-block-description { display: block; font-size: .9375rem; color: rgba(0,0,0,.3); margin: .5rem 0 0 0; }
    .ui-block-description[href]:after { content: " →"; }

/* Material-only elements */
    html:not(.material-style) .material-style-only { display: none !important; }

/* Code examples */
    .cui-example-code,
    .cui-example-code-static { display: none; direction: ltr !important; text-align: left !important; }
    .cui-example-code-static { display: block; }
    .cui-example-code.active { display: block; }
    .cui-example-code pre,
    .cui-example-code-static pre { max-height: 37.5rem; border: .1875rem solid rgba(49,68,82,.04); margin-bottom: 1.875rem; }
    .cui-example-code code,
    .cui-example-code-static code { margin: 0; max-height: calc(37.5rem - .375rem); overflow: auto; padding: 1.25rem 1.875rem; background: rgba(49,68,82,.04); }
    .cui-example-code-toggle { display: block; line-height: 1.25; font-weight: 800; background: rgba(49,68,82,.05); direction: ltr !important; color: #aaa; padding: .1875rem .3125rem; border-radius: .125rem; white-space: nowrap; font-family: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:.9em; }
    .cui-example-code-toggle:hover, .cui-example-code-toggle.active { color: #fff; background: #333; }
    .cui-example-code-toggle::after { vertical-align: middle; display: none; padding-left: .375rem; }
    .cui-example-code-toggle:hover::after, .cui-example-code-toggle.active::after { display: inline-block;  }
    .cui-example-code-toggle::after { content: 'SHOW CODE'; }
    .cui-example-code-toggle.active::after { content: 'HIDE CODE'; }
    .cui-example-code-static pre { margin: 1.875rem 0 0 0; }

/* Spacing */
    .cui-bottom-spacer { height: 12rem; }
    .cui-example-vertical-spacing > * + * { margin-top: 1.875rem !important; margin-bottom: 0 !important; }
    .cui-example-vertical-spacing-sm > * + * { margin-top: .9375rem !important; margin-bottom: 0 !important; }
    .cui-example-vertical-spacing-lg > * + * { margin-top: 5rem !important; margin-bottom: 0 !important; }
    .cui-example-inline-spacing > *, .cui-example-paragraph-spacing > p > * { margin: 0 .375rem .9375rem 0; }
    .cui-example-paragraph-spacing > p { margin: 0; }

/* Extras */
    .cui-utils-example-border-color > * { display: inline-block; width: 5rem; height: 5rem; margin: 0 .625rem .625rem 0; border: .1875rem solid; }
    .cui-utils-example-bg-color .col-sm { padding: .9375rem 1.25rem; margin-bottom: .9375rem; }

/* RTL */
    [dir=rtl] .cui-example-inline-spacing > *, [dir=rtl] .cui-example-paragraph-spacing > p > * { margin-right: 0; margin-left: .375rem; }
    [dir=rtl] .cui-utils-example-border-color > * { margin-right: 0; margin-left: .625rem; }

.rtl-only { display: none !important; direction: ltr !important; text-align: left !important; }
    [dir=rtl] .rtl-only { display: block !important; }
  </style>
  
</head>

<h1 id="main-header" class="bg-dark text-white">
    <span id="main-header-path">HTML Complete UI &nbsp;/&nbsp;</span>
    <div class="d-inline-block position-relative">
      <a href="javascript:void(0)" class="dropdown-toggle text-white" data-toggle="dropdown">Base</a>
      <div class="dropdown-menu mt-3">

<a href="complete-ui_plugins.html" class="dropdown-item text-big py-2 px-4"><span class="d-inline-block py-1 px-2">Plugins</span></a>
        <a href="complete-ui_charts.html" class="dropdown-item text-big py-2 px-4"><span class="d-inline-block py-1 px-2">Charts</span></a>
      </div>
    </div>
  </h1>

<div class="ui-block">
    <h3 class="ui-block-heading">Typography</h3>

<h4 class="ui-block-heading">Headings</h4>

<div class="cui-example">
      <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>
    </div>

<h4 class="ui-block-heading">Display headings</h4>

<div class="cui-example">
      <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>
    </div>

<h4 class="ui-block-heading">Paragraph</h4>

<div class="cui-example">
      <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>

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

<h4 class="ui-block-heading">Inline text elements</h4>

<div class="cui-example">
      
      <p>
        You can use the mark tag to <mark>highlight</mark> text.
      </p>

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

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

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

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

<p>
        <strong>rendered as bold text</strong>
      </p>

<p>
        <em>rendered as italicized text</em>
      </p>
    </div>

<h4 class="ui-block-heading">Abbreviations</h4>

<div class="cui-example">
      
      <p>
        An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.
      </p>

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

<h4 class="ui-block-heading">Addresses</h4>

<div class="cui-example">
      <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>
    </div>

<h4 class="ui-block-heading">Blockquotes</h4>

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

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

<h4 class="ui-block-heading">Lists</h4>

<div class="cui-example cui-example-vertical-spacing">
      
      <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>

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

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

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

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

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

<div class="cui-example">
      
      <p>
        For example, <code>&lt;section&gt;</code> should be wrapped as inline.
      </p>

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

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

<p>
        <var>y</var> = <var>m</var><var>x</var> + <var>b</var>
      </p>

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

<h4 class="ui-block-heading">Jumbotron</h4>

<div class="cui-example">
      <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="javascript:void(0)" role="button">Learn more</a>
        </p>
      </div>
    </div>

<h4 class="ui-block-heading">Figures</h4>

<div class="cui-example">
      <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>
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Utilities</h3>
    <p class="ui-block-description">
      See more: <a href="https://getbootstrap.com/docs/4.0/utilities" target="_blank">https://getbootstrap.com/docs/4.0/utilities</a>
    </p>

<h4 class="ui-block-heading">Border color</h4>

<h4 class="ui-block-heading">Text color</h4>

<div class="cui-example cui-example-vertical-spacing">
      <div>
        <p><a href="javascript:void(0)" class="text-primary">Primary link</a></p>
        <p><a href="javascript:void(0)" class="text-secondary">Secondary link</a></p>
        <p><a href="javascript:void(0)" class="text-success">Success link</a></p>
        <p><a href="javascript:void(0)" class="text-danger">Danger link</a></p>
        <p><a href="javascript:void(0)" class="text-warning">Warning link</a></p>
        <p><a href="javascript:void(0)" class="text-info">Info link</a></p>
        <p><a href="javascript:void(0)" class="text-dark">Dark link</a></p>
        <p><a href="javascript:void(0)" class="text-muted">Muted link</a></p>
        <p><a href="javascript:void(0)" class="text-light">Light link</a></p>
        <p><a href="javascript:void(0)" class="text-lighter">Lighter link</a></p>
        <p><a href="javascript:void(0)" class="text-lightest">Lightest link</a></p>
      </div>
    </div>

<h4 class="ui-block-heading">Background color</h4>

<div class="cui-example cui-example-vertical-spacing" data-blacklist="cui-utils-example-bg-color">
      <div class="cui-utils-example-bg-color">
        <div class="row mx-0">
          <a href="javascript:void(0)" class="d-block col-sm bg-primary text-white"><code>.bg-primary</code></a>
          <a href="javascript:void(0)" class="d-block col-sm bg-primary-dark text-white"><code>.bg-primary-dark</code></a>
          <a href="javascript:void(0)" class="d-block col-sm bg-primary-darker text-white"><code>.bg-primary-darker</code></a>

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

<h4 class="ui-block-heading">Opacity</h4>

<div class="cui-example cui-example-vertical-spacing-sm">
      <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>
    </div>

<h4 class="ui-block-heading">Text sizing</h4>

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

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

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

<h4 class="ui-block-heading">Font weight</h4>

<div class="cui-example">
      <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>
    </div>

<h4 class="ui-block-heading">Line height</h4>

<div class="cui-example">
      <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>
    </div>

<h4 class="ui-block-heading">Text decoration and transform</h4>

<div class="cui-example">
      <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>
    </div>

<h4 class="ui-block-heading">Expanded text</h4>

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

<h4 class="ui-block-heading">Shadows</h4>

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

<h4 class="ui-block-heading">Overflow</h4>

<div class="cui-example">
      <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>
    </div>

<h4 class="ui-block-heading">Cursor</h4>

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

<h4 class="ui-block-heading">Sizing</h4>

<p>Responsive variations for <code>.w-100</code> and <code>.w-auto</code>:</p>

<h4 class="ui-block-heading">Layout container spacing</h4>

<div class="cui-example mb-4">
      <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>
    </div>

<h4 class="ui-block-heading">Negative horizontal margins</h4>

<div class="cui-example mb-4">
      <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>
    </div>

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

<p>Where sides is one of:</p>

<ul>
      <li><code>l</code> - for classes that set <code>margin-left</code></li>
      <li><code>r</code> - for classes that set <code>margin-right</code></li>
      <li><code>x</code> - for classes that set both <code>*-left</code> and <code>*-right</code></li>
    </ul>

<p>Where size is one of:</p>

<ul>
      <li><code>1</code> - (by default) for classes that set the <code>margin</code> to <code>-1 * ($spacer * .25)</code></li>
      <li><code>2</code> - (by default) for classes that set the <code>margin</code> to <code>-1 * ($spacer * .5)</code></li>
      <li><code>3</code> - (by default) for classes that set the <code>margin</code> to <code>-1 * ($spacer)</code></li>
      <li><code>4</code> - (by default) for classes that set the <code>margin</code> to <code>-1 * ($spacer * 1.5)</code></li>
      <li><code>5</code> - (by default) for classes that set the <code>margin</code> to <code>-1 * ($spacer * 3)</code></li>
    </ul>

<p><code>.flex-basis-100</code> - flex-basis: 100%</p>
    <p><code>.flex-basis-auto</code> - flex-basis: auto</p>

<p>Responsive variations also exist for <code>.flex-basis-100</code> and <code>.flex-basis-auto</code>.</p>

<ul>
      <li><code>.flex-basis-sm-100</code></li>
      <li><code>.flex-basis-md-100</code></li>
      <li><code>.flex-basis-lg-100</code></li>
      <li><code>.flex-basis-xl-100</code></li>
      <li><code>.flex-basis-sm-auto</code></li>
      <li><code>.flex-basis-md-auto</code></li>
      <li><code>.flex-basis-lg-auto</code></li>
      <li><code>.flex-basis-xl-auto</code></li>
    </ul>

<h4 class="ui-block-heading">Bordered rows</h4>

<div class="alert alert-info">
      <code>.row-bordered</code> class defines <code>overflow: hidden</code> on
      the parent container and <code>position: relative</code> on immediate children
      <code>.col</code> and <code>.col-*</code> blocks.
    </div>

<h4 class="ui-block-heading">Transforms</h4>

<div class="cui-example">
      <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>
    </div>

<h4 class="ui-block-heading">Fixes</h4>

<div class="cui-example">
      
      <p><code>.flex-truncate</code> - Fix for truncated text within flexbox container</p>

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

<div class="ui-block">
    <h3 class="ui-block-heading">Buttons</h3>

<h4 class="ui-block-heading">Variations</h4>

<div class="cui-example cui-example-inline-spacing">
      <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>
    </div>

<h4 class="ui-block-heading">Outline</h4>

<div class="cui-example cui-example-inline-spacing">
      <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>
    </div>

<h4 class="ui-block-heading material-style-only">Flat (Material only)</h4>

<div class="cui-example cui-example-inline-spacing material-style-only">
      <button type="button" class="btn btn-primary md-btn-flat">Primary</button>
      <button type="button" class="btn btn-secondary md-btn-flat">Secondary</button>
      <button type="button" class="btn btn-default md-btn-flat">Default</button>
      <button type="button" class="btn btn-success md-btn-flat">Success</button>
      <button type="button" class="btn btn-warning md-btn-flat">Warning</button>
      <button type="button" class="btn btn-info md-btn-flat">Info</button>
      <button type="button" class="btn btn-danger md-btn-flat">Danger</button>
      <button type="button" class="btn btn-dark md-btn-flat">Dark</button>
    </div>

<h4 class="ui-block-heading">Round</h4>

<div class="cui-example cui-example-paragraph-spacing">
      <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>

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

<h4 class="ui-block-heading">Extra-large</h4>

<div class="cui-example cui-example-paragraph-spacing">
      <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>

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

<h4 class="ui-block-heading">Large</h4>

<div class="cui-example cui-example-paragraph-spacing">
      <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>

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

<h4 class="ui-block-heading">Small</h4>

<div class="cui-example cui-example-paragraph-spacing">
      <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>

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

<h4 class="ui-block-heading">Extra-small</h4>

<div class="cui-example cui-example-paragraph-spacing">
      <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>

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

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

<h4 class="ui-block-heading">Icon-buttons</h4>

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

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

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

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

<h4 class="ui-block-heading">Borderless icon-buttons</h4>

<h4 class="ui-block-heading">Disabled</h4>

<div class="cui-example cui-example-paragraph-spacing">
      <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>

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

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

<h4 class="ui-block-heading">Single toggle</h4>

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

<h4 class="ui-block-heading">Checkbox and radio</h4>

<div class="cui-example cui-example-vertical-spacing">
      
      <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>

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

<div class="ui-block">
    <h3 class="ui-block-heading">Badges</h3>

<h4 class="ui-block-heading">Within headings</h4>

<div class="cui-example">
      <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>
    </div>

<h4 class="ui-block-heading">Variations</h4>

<div class="cui-example cui-example-inline-spacing">
      <a href="javascript:void(0)" class="badge badge-default">Default</a>
      <a href="javascript:void(0)" class="badge badge-primary">Primary</a>
      <a href="javascript:void(0)" class="badge badge-secondary">Secondary</a>
      <a href="javascript:void(0)" class="badge badge-success">Success</a>
      <a href="javascript:void(0)" class="badge badge-info">Info</a>
      <a href="javascript:void(0)" class="badge badge-warning">Warning</a>
      <a href="javascript:void(0)" class="badge badge-danger">Danger</a>
      <a href="javascript:void(0)" class="badge badge-dark">Dark</a>
    </div>

<h4 class="ui-block-heading">Pills</h4>

<div class="cui-example cui-example-inline-spacing">
      <a href="javascript:void(0)" class="badge badge-pill badge-default">Default</a>
      <a href="javascript:void(0)" class="badge badge-pill badge-primary">Primary</a>
      <a href="javascript:void(0)" class="badge badge-pill badge-secondary">Secondary</a>
      <a href="javascript:void(0)" class="badge badge-pill badge-success">Success</a>
      <a href="javascript:void(0)" class="badge badge-pill badge-info">Info</a>
      <a href="javascript:void(0)" class="badge badge-pill badge-warning">Warning</a>
      <a href="javascript:void(0)" class="badge badge-pill badge-danger">Danger</a>
      <a href="javascript:void(0)" class="badge badge-pill badge-dark">Dark</a>
    </div>

<h4 class="ui-block-heading">Outline</h4>

<div class="cui-example cui-example-inline-spacing">
      <a href="javascript:void(0)" class="badge badge-outline-default">Default</a>
      <a href="javascript:void(0)" class="badge badge-outline-primary">Primary</a>
      <a href="javascript:void(0)" class="badge badge-outline-secondary">Secondary</a>
      <a href="javascript:void(0)" class="badge badge-outline-success">Success</a>
      <a href="javascript:void(0)" class="badge badge-outline-info">Info</a>
      <a href="javascript:void(0)" class="badge badge-outline-warning">Warning</a>
      <a href="javascript:void(0)" class="badge badge-outline-danger">Danger</a>
      <a href="javascript:void(0)" class="badge badge-outline-dark">Dark</a>
    </div>

<h4 class="ui-block-heading">Button badges</h4>

<div class="cui-example cui-example-paragraph-spacing">
      <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>
    </div>

<h4 class="ui-block-heading">Dot badges</h4>

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

<h4 class="ui-block-heading">Indicators</h4>

<div class="cui-example cui-example-inline-spacing">
      <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>
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Button groups</h3>

<h4 class="ui-block-heading">Sizes</h4>

<div class="cui-example cui-example-vertical-spacing-sm">
      
      <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>

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

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

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

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

<h4 class="ui-block-heading">Button toolbars</h4>

<h4 class="ui-block-heading">Nesting</h4>

<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="javascript:void(0)">Dropdown link</a>
            <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
          </div>
        </div>
      </div>

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

<h4 class="ui-block-heading">Vertical</h4>

<div class="cui-example">
      <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="javascript:void(0)">Dropdown link</a>
            <a class="dropdown-item" href="javascript:void(0)">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="javascript:void(0)">Dropdown link</a>
            <a class="dropdown-item" href="javascript:void(0)">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="javascript:void(0)">Dropdown link</a>
            <a class="dropdown-item" href="javascript:void(0)">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="javascript:void(0)">Dropdown link</a>
            <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
          </div>
        </div>
      </div>

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

<div class="ui-block">
    <h3 class="ui-block-heading">Button dropdowns</h3>

<h4 class="ui-block-heading">Variations</h4>

<div class="cui-example cui-example-inline-spacing" id="button-dropdowns-demo">
      <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="javascript:void(0)">Action</a>
          <a class="dropdown-item" href="javascript:void(0)">Another action</a>
          <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="javascript:void(0)">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="javascript:void(0)">Action</a>
          <a class="dropdown-item" href="javascript:void(0)">Another action</a>
          <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="javascript:void(0)">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="javascript:void(0)">Action</a>
          <a class="dropdown-item" href="javascript:void(0)">Another action</a>
          <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="javascript:void(0)">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="javascript:void(0)">Action</a>
          <a class="dropdown-item" href="javascript:void(0)">Another action</a>
          <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="javascript:void(0)">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="javascript:void(0)">Action</a>
          <a class="dropdown-item" href="javascript:void(0)">Another action</a>
          <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="javascript:void(0)">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="javascript:void(0)">Action</a>
          <a class="dropdown-item" href="javascript:void(0)">Another action</a>
          <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="javascript:void(0)">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="javascript:void(0)">Action</a>
          <a class="dropdown-item" href="javascript:void(0)">Another action</a>
          <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="javascript:void(0)">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="javascript:void(0)">Action</a>
          <a class="dropdown-item" href="javascript:void(0)">Another action</a>
          <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
        </div>
      </div>

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

<h4 class="ui-block-heading">Hidden arrow</h4>

<div class="cui-example cui-example-inline-spacing" id="button-dropdowns-no-arrow-demo">
      <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="javascript:void(0)">Action</a>
          <a class="dropdown-item" href="javascript:void(0)">Another action</a>
          <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="javascript:void(0)">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="javascript:void(0)">Action</a>
          <a class="dropdown-item" href="javascript:void(0)">Another action</a>
          <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
        </div>
      </div>

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

<h4 class="ui-block-heading">Split</h4>

<div class="cui-example cui-example-inline-spacing" id="split-button-dropdowns-demo">
      <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="javascript:void(0)">Action</a>
          <a class="dropdown-item" href="javascript:void(0)">Another action</a>
          <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="javascript:void(0)">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="javascript:void(0)">Action</a>
          <a class="dropdown-item" href="javascript:void(0)">Another action</a>
          <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="javascript:void(0)">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="javascript:void(0)">Action</a>
          <a class="dropdown-item" href="javascript:void(0)">Another action</a>
          <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="javascript:void(0)">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="javascript:void(0)">Action</a>
          <a class="dropdown-item" href="javascript:void(0)">Another action</a>
          <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="javascript:void(0)">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="javascript:void(0)">Action</a>
          <a class="dropdown-item" href="javascript:void(0)">Another action</a>
          <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="javascript:void(0)">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="javascript:void(0)">Action</a>
          <a class="dropdown-item" href="javascript:void(0)">Another action</a>
          <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="javascript:void(0)">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="javascript:void(0)">Action</a>
          <a class="dropdown-item" href="javascript:void(0)">Another action</a>
          <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="javascript:void(0)">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="javascript:void(0)">Action</a>
          <a class="dropdown-item" href="javascript:void(0)">Another action</a>
          <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
        </div>
      </div>

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

<h4 class="ui-block-heading">Sizes</h4>

<div class="cui-example cui-example-vertical-spacing-sm" id="sizes-button-dropdowns-demo">
      <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="javascript:void(0)">Action</a>
          <a class="dropdown-item" href="javascript:void(0)">Another action</a>
          <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="javascript:void(0)">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="javascript:void(0)">Action</a>
          <a class="dropdown-item" href="javascript:void(0)">Another action</a>
          <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="javascript:void(0)">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="javascript:void(0)">Action</a>
          <a class="dropdown-item" href="javascript:void(0)">Another action</a>
          <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="javascript:void(0)">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="javascript:void(0)">Action</a>
          <a class="dropdown-item" href="javascript:void(0)">Another action</a>
          <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
        </div>
      </div>

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

<div class="ui-block">
    <h3 class="ui-block-heading">Dropdowns</h3>

<h4 class="ui-block-heading">Example</h4>

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

<h4 class="ui-block-heading">Hover dropdowns</h4>

<samp class="cui-example-code-static mb-4" style="margin-top: -1.75rem;">
      &lt;script src="assets/vendor/js/dropdown-hover.js"&gt;&lt;/script&gt;
    </samp>

<div class="cui-example clearfix">
      <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="javascript:void(0)">Action</a>
          <a class="dropdown-item" href="javascript:void(0)">Another action</a>
          <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
        </div>
      </div>

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

<h4 class="ui-block-heading">Nested</h4>

<div class="cui-example" id="nesting-dropdown-demo">
      <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="javascript:void(0)">First action</a>

<div class="dropdown-toggle">
            <div class="dropdown-item">First menu</div>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="javascript:void(0)">First action</a>
              <a class="dropdown-item" href="javascript:void(0)">Second action</a>

<div class="dropdown-toggle">
                <div class="dropdown-item">Second menu</div>
                <div class="dropdown-menu">
                  <a class="dropdown-item" href="javascript:void(0)">First action</a>
                  <a class="dropdown-item" href="javascript:void(0)">Second action</a>
                </div>
              </div>

</div>
          </div>

<a class="dropdown-item" href="javascript:void(0)">Second action</a>

<div class="dropdown-toggle">
            <div class="dropdown-item">Second menu</div>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="javascript:void(0)">First action</a>
              <a class="dropdown-item" href="javascript:void(0)">Second action</a>
            </div>
          </div>
        </div>
      </div>

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

<div class="cui-example cui-example-vertical-spacing">
      
      <ul class="nav">
        <li class="nav-item">
          <a class="nav-link active" href="javascript:void(0)">Active</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
        </li>
      </ul>

<ul class="nav justify-content-center">
        <li class="nav-item">
          <a class="nav-link active" href="javascript:void(0)">Active</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
        </li>
      </ul>

<ul class="nav justify-content-end">
        <li class="nav-item">
          <a class="nav-link active" href="javascript:void(0)">Active</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
        </li>
      </ul>
    </div>

<h4 class="ui-block-heading">Vertical</h4>

<div class="cui-example">
      <ul class="nav flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="javascript:void(0)">Active</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
        </li>
      </ul>
    </div>

<h4 class="ui-block-heading">Tabs & pills</h4>

<div class="cui-example cui-example-vertical-spacing">
      
      <ul class="nav nav-tabs nav-responsive-xl">
        <li class="nav-item">
          <a class="nav-link active" href="javascript:void(0)">Active <span class="badge badge-primary">22</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Link <span class="badge badge-outline-success">22</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
        </li>
      </ul>

<ul class="nav nav-tabs tabs-alt nav-responsive-xl">
        <li class="nav-item">
          <a class="nav-link active" href="javascript:void(0)">Active <span class="badge badge-primary">22</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Link <span class="badge badge-outline-success">22</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
        </li>
      </ul>

<ul class="nav nav-pills nav-responsive-xl">
        <li class="nav-item">
          <a class="nav-link active" href="javascript:void(0)">Active <span class="badge badge-primary">22</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Link <span class="badge badge-outline-success">22</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
        </li>
      </ul>
    </div>

<h4 class="ui-block-heading">Sizes</h4>

<div class="cui-example cui-example-vertical-spacing">
      
      <ul class="nav nav-lg nav-tabs">
        <li class="nav-item"><a class="nav-link active" href="javascript:void(0)">Active <span class="badge badge-primary">22</span></a></li>
        <li class="nav-item"><a class="nav-link" href="javascript:void(0)">Link <span class="badge badge-outline-success">22</span></a></li>
        <li class="nav-item"><a class="nav-link" href="javascript:void(0)">Link</a></li>
        <li class="nav-item"><a class="nav-link disabled" href="javascript:void(0)">Disabled</a></li>
      </ul>
      <ul class="nav nav-lg nav-tabs tabs-alt">
        <li class="nav-item"><a class="nav-link active" href="javascript:void(0)">Active <span class="badge badge-primary">22</span></a></li>
        <li class="nav-item"><a class="nav-link" href="javascript:void(0)">Link <span class="badge badge-outline-success">22</span></a></li>
        <li class="nav-item"><a class="nav-link" href="javascript:void(0)">Link</a></li>
        <li class="nav-item"><a class="nav-link disabled" href="javascript:void(0)">Disabled</a></li>
      </ul>
      <ul class="nav nav-lg nav-pills">
        <li class="nav-item"><a class="nav-link active" href="javascript:void(0)">Active <span class="badge badge-primary">22</span></a></li>
        <li class="nav-item"><a class="nav-link" href="javascript:void(0)">Link <span class="badge badge-outline-success">22</span></a></li>
        <li class="nav-item"><a class="nav-link" href="javascript:void(0)">Link</a></li>
        <li class="nav-item"><a class="nav-link disabled" href="javascript:void(0)">Disabled</a></li>
      </ul>

<ul class="nav nav-sm nav-tabs">
        <li class="nav-item"><a class="nav-link active" href="javascript:void(0)">Active <span class="badge badge-primary">22</span></a></li>
        <li class="nav-item"><a class="nav-link" href="javascript:void(0)">Link <span class="badge badge-outline-success">22</span></a></li>
        <li class="nav-item"><a class="nav-link" href="javascript:void(0)">Link</a></li>
        <li class="nav-item"><a class="nav-link disabled" href="javascript:void(0)">Disabled</a></li>
      </ul>
      <ul class="nav nav-sm nav-tabs tabs-alt">
        <li class="nav-item"><a class="nav-link active" href="javascript:void(0)">Active <span class="badge badge-primary">22</span></a></li>
        <li class="nav-item"><a class="nav-link" href="javascript:void(0)">Link <span class="badge badge-outline-success">22</span></a></li>
        <li class="nav-item"><a class="nav-link" href="javascript:void(0)">Link</a></li>
        <li class="nav-item"><a class="nav-link disabled" href="javascript:void(0)">Disabled</a></li>
      </ul>
      <ul class="nav nav-sm nav-pills">
        <li class="nav-item"><a class="nav-link active" href="javascript:void(0)">Active <span class="badge badge-primary">22</span></a></li>
        <li class="nav-item"><a class="nav-link" href="javascript:void(0)">Link <span class="badge badge-outline-success">22</span></a></li>
        <li class="nav-item"><a class="nav-link" href="javascript:void(0)">Link</a></li>
        <li class="nav-item"><a class="nav-link disabled" href="javascript:void(0)">Disabled</a></li>
      </ul>
    </div>

<h4 class="ui-block-heading">Fill & justify</h4>

<div class="cui-example cui-example-vertical-spacing">
      <ul class="nav nav-pills nav-fill">
        <li class="nav-item"><a class="nav-link active" href="javascript:void(0)">Active <span class="badge badge-primary">22</span></a></li>
        <li class="nav-item"><a class="nav-link" href="javascript:void(0)">Link <span class="badge badge-outline-success">22</span></a></li>
        <li class="nav-item"><a class="nav-link" href="javascript:void(0)">Link</a></li>
        <li class="nav-item"><a class="nav-link disabled" href="javascript:void(0)">Disabled</a></li>
      </ul>

<ul class="nav nav-pills nav-justified">
        <li class="nav-item"><a class="nav-link active" href="javascript:void(0)">Active <span class="badge badge-primary">22</span></a></li>
        <li class="nav-item"><a class="nav-link" href="javascript:void(0)">Link <span class="badge badge-outline-success">22</span></a></li>
        <li class="nav-item"><a class="nav-link" href="javascript:void(0)">Link</a></li>
        <li class="nav-item"><a class="nav-link disabled" href="javascript:void(0)">Disabled</a></li>
      </ul>
    </div>

<h4 class="ui-block-heading">Using dropdowns</h4>

<div class="cui-example cui-example-vertical-spacing" id="nav-dropdowns-demo">
      
      <ul class="nav nav-tabs">
        <li class="nav-item">
          <a class="nav-link active" href="javascript:void(0)">Active</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">Dropdown</a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="javascript:void(0)">Action</a>
            <a class="dropdown-item" href="javascript:void(0)">Another action</a>
            <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
        </li>
      </ul>

<ul class="nav nav-tabs tabs-alt">
        <li class="nav-item">
          <a class="nav-link active" href="javascript:void(0)">Active</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">Dropdown</a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="javascript:void(0)">Action</a>
            <a class="dropdown-item" href="javascript:void(0)">Another action</a>
            <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
        </li>
      </ul>

<ul class="nav nav-pills">
        <li class="nav-item">
          <a class="nav-link active" href="javascript:void(0)">Active</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">Dropdown</a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="javascript:void(0)">Action</a>
            <a class="dropdown-item" href="javascript:void(0)">Another action</a>
            <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
        </li>
      </ul>

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

<h4 class="ui-block-heading material-style-only">Light navs (Material only)</h4>

<div class="cui-example material-style-only" id="light-navs-demo">
      <div class="cui-example-vertical-spacing bg-primary p-4">
        
        <ul class="nav nav-tabs md-tabs-light">
          <li class="nav-item">
            <a class="nav-link active" href="javascript:void(0)">Active</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">Dropdown</a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="javascript:void(0)">Action</a>
              <a class="dropdown-item" href="javascript:void(0)">Another action</a>
              <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javascript:void(0)">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
          </li>
        </ul>

<ul class="nav nav-tabs tabs-alt md-tabs-light">
          <li class="nav-item">
            <a class="nav-link active" href="javascript:void(0)">Active</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">Dropdown</a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="javascript:void(0)">Action</a>
              <a class="dropdown-item" href="javascript:void(0)">Another action</a>
              <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javascript:void(0)">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
          </li>
        </ul>

<ul class="nav nav-pills md-pills-light">
          <li class="nav-item">
            <a class="nav-link active" href="javascript:void(0)">Active</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">Dropdown</a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="javascript:void(0)">Action</a>
              <a class="dropdown-item" href="javascript:void(0)">Another action</a>
              <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javascript:void(0)">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
          </li>
        </ul>
      </div>

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

<div class="cui-example">
      <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>

<div class="cui-example">
      <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>

<h4 class="ui-block-heading">Right tabs</h4>

<div class="cui-example">
      <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>

<h4 class="ui-block-heading">Bottom tabs</h4>

<div class="cui-example">
      <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>
    </div>

<h4 class="ui-block-heading">Responsive navs</h4>

<p>Try to resize window.</p>

<div class="cui-example cui-example-vertical-spacing">
      
      <div class="nav-responsive-md">
        <ul class="nav justify-content-end">
          <li class="nav-item">
            <a class="nav-link active" href="javascript:void(0)">Active</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javascript:void(0)">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javascript:void(0)">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
          </li>
        </ul>
      </div>

<div class="nav-responsive-lg">
        <ul class="nav nav-tabs">
          <li class="nav-item">
            <a class="nav-link active" href="javascript:void(0)">Active <span class="badge badge-primary">22</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javascript:void(0)">Link <span class="badge badge-outline-success">22</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javascript:void(0)">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
          </li>
        </ul>
      </div>

<div class="nav-responsive-lg">
        <ul class="nav nav-tabs tabs-alt">
          <li class="nav-item">
            <a class="nav-link active" href="javascript:void(0)">Active <span class="badge badge-primary">22</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javascript:void(0)">Link <span class="badge badge-outline-success">22</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javascript:void(0)">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
          </li>
        </ul>
      </div>

<div class="nav-responsive-lg">
        <ul class="nav nav-pills">
          <li class="nav-item">
            <a class="nav-link active" href="javascript:void(0)">Active <span class="badge badge-primary">22</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javascript:void(0)">Link <span class="badge badge-outline-success">22</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javascript:void(0)">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
          </li>
        </ul>
      </div>

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

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

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

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

<div class="ui-block ui-block-inline ui-block-pagination">
    <h3 class="ui-block-heading">Pagination</h3>

<h4 class="ui-block-heading">Example</h4>

<h4 class="ui-block-heading">Sizes</h4>

<div class="ui-block">
    <h3 class="ui-block-heading">Progress bars</h3>

<h4 class="ui-block-heading">Basic</h4>

<h4 class="ui-block-heading">Height</h4>

<h4 class="ui-block-heading">With label</h4>

<h4 class="ui-block-heading">Variations</h4>

<h4 class="ui-block-heading">Striped</h4>

<h4 class="ui-block-heading">Animated</h4>

<div class="cui-example cui-example-vertical-spacing-sm">
      <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>
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">List groups</h3>

<h4 class="ui-block-heading">Example</h4>

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

<h4 class="ui-block-heading">Linked items</h4>

<div class="cui-example">
      <div class="list-group">
        <a href="javascript:void(0)" class="list-group-item list-group-item-action active">Cras justo odio</a>
        <a href="javascript:void(0)" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
        <a href="javascript:void(0)" class="list-group-item list-group-item-action">Morbi leo risus</a>
        <a href="javascript:void(0)" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
        <a href="javascript:void(0)" class="list-group-item list-group-item-action">Vestibulum at eros</a>
      </div>
    </div>

<h4 class="ui-block-heading">Contextual classes</h4>

<div class="cui-example">
      <div class="list-group">
        <a href="javascript:void(0)" class="list-group-item list-group-item-primary">This is a primary list group item</a>
        <a href="javascript:void(0)" class="list-group-item list-group-item-secondary">This is a secondary list group item</a>
        <a href="javascript:void(0)" class="list-group-item list-group-item-success">This is a success list group item</a>
        <a href="javascript:void(0)" class="list-group-item list-group-item-danger">This is a danger list group item</a>
        <a href="javascript:void(0)" class="list-group-item list-group-item-warning">This is a warning list group item</a>
        <a href="javascript:void(0)" class="list-group-item list-group-item-info">This is an info list group item</a>
        <a href="javascript:void(0)" class="list-group-item list-group-item-dark">This is a dark list group item</a>
      </div>
    </div>

<h4 class="ui-block-heading">Custom content</h4>

<div class="cui-example">
      <div class="list-group">
        <a href="javascript:void(0)" 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="javascript:void(0)" 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="javascript:void(0)" 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>
    </div>

<h4 class="ui-block-heading">JavaScript behavior</h4>

<div class="cui-example">
      <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>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Alerts</h3>

<h4 class="ui-block-heading">Light alerts</h4>

<div class="cui-example cui-example-vertical-spacing-sm">
      <div class="alert alert-primary alert-dismissible fade show">
        <button type="button" class="close" data-dismiss="alert">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</button>
        This is a dark alert — check it out!
      </div>
    </div>

<h4 class="ui-block-heading">Dark alerts</h4>

<div class="cui-example cui-example-vertical-spacing-sm">
      <div class="alert alert-dark-primary alert-dismissible fade show">
        <button type="button" class="close" data-dismiss="alert">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</button>
        This is a dark alert — check it out!
      </div>
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Tooltips</h3>

<h4 class="ui-block-heading">Position</h4>

<div class="cui-example cui-example-inline-spacing" id="tooltip-position-demo">
      <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>

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

<h4 class="ui-block-heading">Variations</h4>

<div class="cui-example cui-example-inline-spacing" id="tooltip-variations-demo">
      <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>

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

<script>
      $(function () {
        $('[data-toggle="tooltip"]').tooltip();
      });
    </script>
    
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Popovers</h3>

<h4 class="ui-block-heading">Position</h4>

<div class="cui-example cui-example-inline-spacing" id="popover-position-demo">
      <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>

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

<h4 class="ui-block-heading">Variations</h4>

<div class="cui-example cui-example-inline-spacing" id="popover-variations-demo">
      <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>

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

<script>
      $(function () {
        $('[data-toggle="popover"]').popover();
      });
    </script>
    
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Modals</h3>

<h4 class="ui-block-heading">Default modals</h4>

<div class="cui-example">
      <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>

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

<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">&times;</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>

<h4 class="ui-block-heading">Top modals</h4>

<div class="cui-example">
      <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>

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

<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">&times;</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>

<h4 class="ui-block-heading">Slide modals</h4>

<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">&times;</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>

<h4 class="ui-block-heading">Fill-In modals</h4>

<div class="cui-example">
      <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>

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

<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">&times;</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>
    </div>

</div>

<div class="ui-block">
    <h3 class="ui-block-heading">Breadcrumbs</h3>

<h4 class="ui-block-heading">Example</h4>

<div class="cui-example cui-example-vertical-spacing">
      <ol class="breadcrumb">
        <li class="breadcrumb-item active">Home</li>
      </ol>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
        <li class="breadcrumb-item active">Library</li>
      </ol>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
        <li class="breadcrumb-item"><a href="javascript:void(0)">Library</a></li>
        <li class="breadcrumb-item active">Data</li>
      </ol>
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Form controls</h3>

<h4 class="ui-block-heading">Inputs</h4>

<h4 class="ui-block-heading">Textarea</h4>

<h4 class="ui-block-heading">Checkboxes and radios</h4>

<div class="cui-example cui-example-vertical-spacing-sm">
      
      <div>
        <label class="form-check">
          <input class="form-check-input" type="checkbox" value="">
          <div class="form-check-label">
            Option one is this and that&mdash;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>

<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&mdash;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>
    </div>

<h4 class="ui-block-heading">Inline checkboxes and radios</h4>

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

<h4 class="ui-block-heading">Checkboxes and radios without label text</h4>

<h4 class="ui-block-heading">Selects</h4>

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

<h4 class="ui-block-heading">Inverted</h4>

<h4 class="ui-block-heading">Disabled</h4>

<div class="cui-example cui-example-vertical-spacing">
      <fieldset disabled class="cui-example-vertical-spacing-sm">
        <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>

<h4 class="ui-block-heading">Sizes</h4>

<div class="cui-example cui-example-vertical-spacing-sm">
      <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>
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Custom checkboxes and radios</h3>

<h4 class="ui-block-heading">Example</h4>

<div class="cui-example cui-example-vertical-spacing-sm">
      
      <label class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input">
        <span class="custom-control-label">Check this custom checkbox</span>
      </label>

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

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

<script>
        $(function() {
          $('#indeterminate-checkbox').prop('indeterminate', true)
        });
      </script>
      
    </div>

<h4 class="ui-block-heading">Disabled</h4>

<div class="cui-example cui-example-vertical-spacing-sm">
      
      <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" id="disabled-indeterminate-checkbox" disabled>
          <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>

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

<script>
        $(function() {
          $('#disabled-indeterminate-checkbox').prop('indeterminate', true)
        });
      </script>
      
    </div>

<h4 class="ui-block-heading">Validations states</h4>

<div class="cui-example cui-example-vertical-spacing-sm">
      <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>

<h4 class="ui-block-heading">Stacked</h4>

<div class="cui-example">
      <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>
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Custom select</h3>

<h4 class="ui-block-heading">Example</h4>

<div class="cui-example cui-example-vertical-spacing-sm">
      <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>
    </div>

<h4 class="ui-block-heading">Sizes</h4>

<div class="cui-example cui-example-vertical-spacing-sm">
      <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>

<h4 class="ui-block-heading">Inverted</h4>

<div class="cui-example">
      <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>
    </div>

<h4 class="ui-block-heading">Disabled</h4>

<div class="cui-example cui-example-vertical-spacing-sm">
      <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>

<h4 class="ui-block-heading">Validations states</h4>

<div class="cui-example cui-example-vertical-spacing-sm">
      <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>
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">File browser</h3>

<h4 class="ui-block-heading">Example</h4>

<h4 class="ui-block-heading">Disabled</h4>

<h4 class="ui-block-heading">Validations states</h4>

<div class="ui-block">
    <h3 class="ui-block-heading">Forms</h3>

<h4 class="ui-block-heading">Example</h4>

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

<div class="cui-example">
      <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>
    </div>

<h4 class="ui-block-heading">Horizontal</h4>

<div class="cui-example">
      <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&mdash;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>
    </div>

<h4 class="ui-block-heading">Inline</h4>

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

<div class="cui-example cui-example-vertical-spacing">
      <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>
    </div>

<h4 class="ui-block-heading">Static controls</h4>

<div class="cui-example cui-example-vertical-spacing">
      <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>

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

<h4 class="ui-block-heading">States</h4>

<div class="cui-example cui-example-vertical-spacing-sm">
      
      <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>

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

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

<h4 class="ui-block-heading">Sizes</h4>

<div class="cui-example cui-example-vertical-spacing">
      <form>
        
        <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>

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

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

<div class="ui-block">
    <h3 class="ui-block-heading">Input groups</h3>

<h4 class="ui-block-heading">Example</h4>

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

<h4 class="ui-block-heading">Sizing</h4>

<h4 class="ui-block-heading">Checkbox and radio addons</h4>

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

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

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

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

<h4 class="ui-block-heading">Custom select</h4>

<div class="cui-example cui-example-vertical-spacing-sm">
      <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>

<h4 class="ui-block-heading">Multiple addons</h4>

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

</div>
      </div>
    </div>

<h4 class="ui-block-heading">Button addons</h4>

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

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

</div>
      </div>
    </div>

<h4 class="ui-block-heading">Buttons with dropdowns</h4>

<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="javascript:void(0)">Action</a>
                <a class="dropdown-item" href="javascript:void(0)">Another action</a>
                <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
                <div role="separator" class="dropdown-divider"></div>
                <a class="dropdown-item" href="javascript:void(0)">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="javascript:void(0)">Action</a>
                <a class="dropdown-item" href="javascript:void(0)">Another action</a>
                <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
                <div role="separator" class="dropdown-divider"></div>
                <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
              </div>
            </div>
          </div>

</div>
      </div>

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

<h4 class="ui-block-heading">Segmented buttons</h4>

<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="javascript:void(0)">Action</a>
                <a class="dropdown-item" href="javascript:void(0)">Another action</a>
                <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
                <div role="separator" class="dropdown-divider"></div>
                <a class="dropdown-item" href="javascript:void(0)">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="javascript:void(0)">Action</a>
                <a class="dropdown-item" href="javascript:void(0)">Another action</a>
                <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
                <div role="separator" class="dropdown-divider"></div>
                <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
              </div>
            </div>
          </div>

</div>
      </div>

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

<div class="ui-block">
    <h3 class="ui-block-heading">Switchers</h3>

<h4 class="ui-block-heading">Example</h4>

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

<h4 class="ui-block-heading">Square</h4>

<div class="cui-example">
      <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>
    </div>

<h4 class="ui-block-heading">Sizes</h4>

<div class="cui-example cui-example-vertical-spacing-sm">
      <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>
    </div>

<h4 class="ui-block-heading">Variations</h4>

<div class="cui-example cui-example-inline-spacing">
      <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-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>

<h4 class="ui-block-heading">Disabled</h4>

<div class="cui-example cui-example-vertical-spacing-sm">
      <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>

<h4 class="ui-block-heading">Validation states</h4>

<div class="cui-example cui-example-vertical-spacing-sm">
      <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>

<h4 class="ui-block-heading">Stacked</h4>

<div class="cui-example">
      <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>

<div class="ui-block">
    <h3 class="ui-block-heading">App brand</h3>

<h4 class="ui-block-heading">Examples</h4>

<div class="cui-example">
      <div class="ui-bordered p-4 mb-4">
        <div class="app-brand">
          <a href="javascript:void(0)" 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="javascript:void(0)" class="app-brand-text text-dark text-big ml-2">Brand</a>
        </div>
      </div>
    </div>

<h4 class="ui-block-heading">Within navbar</h4>

<div class="cui-example">
      <nav class="navbar navbar-expand-lg bg-light">
        
        <a class="navbar-brand app-brand" href="javascript:void(0)">
          <img src="assets/img/logo.png" alt="" class="app-brand-logo ui-w-40">
          <span class="app-brand-text ml-2">Brand</span>
        </a>

<div class="collapse navbar-collapse" id="navbar-app-brand-example">
          <div class="navbar-nav mr-auto">
            <a class="nav-item nav-link active" href="javascript:void(0)">Home</a>
            <a class="nav-item nav-link" href="javascript:void(0)">Features</a>
            <a class="nav-item nav-link" href="javascript:void(0)">Pricing</a>
          </div>
        </div>
      </nav>
    </div>

<h4 class="ui-block-heading">Within sidenav</h4>

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

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

<div id="sidenav-app-brand-2" class="sidenav sidenav-vertical d-inline-flex bg-light align-top mr-4 mb-4" style="height: 400px">
        
        <div class="app-brand py-3">
          <img src="assets/img/logo.png" alt="" class="app-brand-logo ui-w-40">
          <a href="javascript:void(0)" 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>

<div id="sidenav-app-brand-3" class="sidenav sidenav-vertical d-inline-flex bg-light align-top mr-4 mb-4" style="height: 400px">
        
        <div class="app-brand py-3">
          <img src="assets/img/logo.png" alt="" class="app-brand-logo ui-w-40">
          <a href="javascript:void(0)" class="app-brand-text sidenav-text text-big ml-2">Brand</a>
          <a href="javascript:void(0)" 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>

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

<div class="ui-block">
    <h3 class="ui-block-heading">Navbar</h3>

<h4 class="ui-block-heading">Example</h4>

<div class="cui-example" id="navbar-demo">
      <nav class="navbar navbar-expand-lg bg-light" style="z-index: 20">
        <a class="navbar-brand" href="javascript:void(0)">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="javascript:void(0)">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="javascript:void(0)">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="javascript:void(0)">Pricing</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="javascript:void(0)" data-toggle="dropdown">Dropdown link</a>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="javascript:void(0)">Action</a>
                <a class="dropdown-item" href="javascript:void(0)">Another action</a>
                <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="javascript:void(0)">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>

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

<h4 class="ui-block-heading">Elements</h4>

<div class="cui-example cui-example-vertical-spacing-sm">
      <nav class="navbar navbar-expand-lg bg-light">
        <a class="navbar-brand" href="javascript:void(0)">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="javascript:void(0)">Home</a>
            <a class="nav-item nav-link" href="javascript:void(0)">Features</a>
            <a class="nav-item nav-link" href="javascript:void(0)">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="javascript:void(0)">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="javascript:void(0)">Home</a>
            <a class="nav-item nav-link" href="javascript:void(0)">Features</a>
            <a class="nav-item nav-link" href="javascript:void(0)">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="javascript:void(0)">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="javascript:void(0)">Home</a>
            <a class="nav-item nav-link" href="javascript:void(0)">Features</a>
            <a class="nav-item nav-link" href="javascript:void(0)">Pricing</a>
          </div>

<h4 class="ui-block-heading">Styling</h4>

<div class="cui-example">
      <div class="cui-example-vertical-spacing-sm bg-light p-3">
        
        <nav class="navbar navbar-expand-lg bg-navbar-theme">
          <a class="navbar-brand" href="javascript:void(0)">.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="javascript:void(0)">Home</a>
              <a class="nav-item nav-link" href="javascript:void(0)">Features</a>
              <a class="nav-item nav-link" href="javascript:void(0)">Pricing</a>
              <a class="nav-item nav-link disabled" href="javascript:void(0)">Disabled</a>
            </div>

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

<nav class="navbar navbar-expand-lg bg-white">
          <a class="navbar-brand" href="javascript:void(0)">.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="javascript:void(0)">Home</a>
              <a class="nav-item nav-link" href="javascript:void(0)">Features</a>
              <a class="nav-item nav-link" href="javascript:void(0)">Pricing</a>
              <a class="nav-item nav-link disabled" href="javascript:void(0)">Disabled</a>
            </div>

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

<nav class="navbar navbar-expand-lg bg-primary">
          <a class="navbar-brand" href="javascript:void(0)">.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="javascript:void(0)">Home</a>
              <a class="nav-item nav-link" href="javascript:void(0)">Features</a>
              <a class="nav-item nav-link" href="javascript:void(0)">Pricing</a>
              <a class="nav-item nav-link disabled" href="javascript:void(0)">Disabled</a>
            </div>

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

<nav class="navbar navbar-expand-lg bg-secondary">
          <a class="navbar-brand" href="javascript:void(0)">.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="javascript:void(0)">Home</a>
              <a class="nav-item nav-link" href="javascript:void(0)">Features</a>
              <a class="nav-item nav-link" href="javascript:void(0)">Pricing</a>
              <a class="nav-item nav-link disabled" href="javascript:void(0)">Disabled</a>
            </div>

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

<nav class="navbar navbar-expand-lg bg-success">
          <a class="navbar-brand" href="javascript:void(0)">.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="javascript:void(0)">Home</a>
              <a class="nav-item nav-link" href="javascript:void(0)">Features</a>
              <a class="nav-item nav-link" href="javascript:void(0)">Pricing</a>
              <a class="nav-item nav-link disabled" href="javascript:void(0)">Disabled</a>
            </div>

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

<nav class="navbar navbar-expand-lg bg-info">
          <a class="navbar-brand" href="javascript:void(0)">.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="javascript:void(0)">Home</a>
              <a class="nav-item nav-link" href="javascript:void(0)">Features</a>
              <a class="nav-item nav-link" href="javascript:void(0)">Pricing</a>
              <a class="nav-item nav-link disabled" href="javascript:void(0)">Disabled</a>
            </div>

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

<nav class="navbar navbar-expand-lg bg-warning">
          <a class="navbar-brand" href="javascript:void(0)">.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="javascript:void(0)">Home</a>
              <a class="nav-item nav-link" href="javascript:void(0)">Features</a>
              <a class="nav-item nav-link" href="javascript:void(0)">Pricing</a>
              <a class="nav-item nav-link disabled" href="javascript:void(0)">Disabled</a>
            </div>

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

<nav class="navbar navbar-expand-lg bg-danger">
          <a class="navbar-brand" href="javascript:void(0)">.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="javascript:void(0)">Home</a>
              <a class="nav-item nav-link" href="javascript:void(0)">Features</a>
              <a class="nav-item nav-link" href="javascript:void(0)">Pricing</a>
              <a class="nav-item nav-link disabled" href="javascript:void(0)">Disabled</a>
            </div>

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

<nav class="navbar navbar-expand-lg bg-dark">
          <a class="navbar-brand" href="javascript:void(0)">.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="javascript:void(0)">Home</a>
              <a class="nav-item nav-link" href="javascript:void(0)">Features</a>
              <a class="nav-item nav-link" href="javascript:void(0)">Pricing</a>
              <a class="nav-item nav-link disabled" href="javascript:void(0)">Disabled</a>
            </div>

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

<h4 class="ui-block-heading">Layouts</h4>

<div class="cui-example cui-example-vertical-spacing-sm">
      <nav class="navbar navbar-expand-lg bg-light">
        <a class="navbar-brand w-lg-100 mr-0" href="javascript:void(0)">Brand</a>

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

<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="javascript:void(0)">Home</a>
            <a class="nav-item nav-link" href="javascript:void(0)">Features</a>
            <a class="nav-item nav-link" href="javascript:void(0)">Pricing</a>
            <a class="nav-item nav-link disabled" href="javascript:void(0)">Disabled</a>
          </div>
        </div>
      </nav>

<nav class="navbar navbar-expand-lg bg-light">
        <a href="javascript:void(0)" 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="javascript:void(0)">Home</a>
            <a class="nav-item nav-link" href="javascript:void(0)">Features</a>
            <a class="nav-item nav-link" href="javascript:void(0)">Pricing</a>
            <a class="nav-item nav-link disabled" href="javascript:void(0)">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="javascript:void(0)"><i class="ion ion-logo-twitter"></i></a>
            <a class="nav-item nav-link" href="javascript:void(0)"><i class="ion ion-logo-github"></i></a>
          </div>
        </div>
      </nav>

<nav class="navbar navbar-expand-lg bg-light">
        <a class="navbar-brand" href="javascript:void(0)">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="javascript:void(0)">Home</a>
            <a class="nav-item nav-link" href="javascript:void(0)">Features</a>
            <a class="nav-item nav-link" href="javascript:void(0)">Pricing</a>
            <a class="nav-item nav-link disabled" href="javascript:void(0)">Disabled</a>
          </div>
        </div>
      </nav>

<nav class="navbar navbar-expand-lg bg-light">
        <a class="navbar-brand" href="javascript:void(0)">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="javascript:void(0)">Home</a>
            <a class="nav-item nav-link" href="javascript:void(0)">Features</a>
            <a class="nav-item nav-link" href="javascript:void(0)">Pricing</a>
            <a class="nav-item nav-link disabled" href="javascript:void(0)">Disabled</a>
          </div>
        </div>
      </nav>

<nav class="navbar navbar-expand-lg bg-light">
        <a href="javascript:void(0)" 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="javascript:void(0)">Home</a>
            <a class="nav-item nav-link" href="javascript:void(0)">Features</a>
            <a class="nav-item nav-link" href="javascript:void(0)">Pricing</a>
            <a class="nav-item nav-link disabled" href="javascript:void(0)">Disabled</a>
          </div>
          <div class="navbar-nav ml-auto">
            <a class="nav-item nav-link" href="javascript:void(0)">Sign In</a>
            <a class="nav-item nav-link" href="javascript:void(0)">Sign Up</a>
          </div>
        </div>
      </nav>
    </div>

<h4 class="ui-block-heading">Mega dropdown</h4>

<samp class="cui-example-code-static mb-4" style="margin-top: -1.75rem;">
      &lt;script src="assets/vendor/js/mega-dropdown.js"&gt;&lt;/script&gt;
    </samp>

<div class="cui-example cui-example-vertical-spacing" id="navbar-demo-2">
      <nav class="navbar navbar-expand-lg bg-light" style="z-index: 21">
        <a class="navbar-brand" href="javascript:void(0)">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="javascript:void(0)" data-toggle="dropdown">Dropdown</a>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="javascript:void(0)">Action</a>
                <a class="dropdown-item" href="javascript:void(0)">Another action</a>
                <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
              </div>
            </li>
            <li class="nav-item mega-dropdown">
              <a class="nav-link dropdown-toggle navbar-example-19-mega-dropdown" href="javascript:void(0)" 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="javascript:void(0)">Column</a></div>
                  <div class="col-sm-6 col-lg p-3"><a href="javascript:void(0)" class="mega-link">.mega-link</a></div>
                  <div class="col-sm-6 col-lg p-3"><a href="javascript:void(0)" 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="javascript:void(0)" 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="javascript:void(0)">Column</a></div>
                  <div class="col-sm-6 col-lg p-3"><a href="javascript:void(0)" class="mega-link">.mega-link</a></div>
                  <div class="col-sm-6 col-lg p-3"><a href="javascript:void(0)" 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>

<nav class="navbar navbar-expand-lg bg-light" style="z-index: 20">
        <div class="container position-relative">
          <a class="navbar-brand" href="javascript:void(0)">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="javascript:void(0)" data-toggle="dropdown" data-trigger="hover">Dropdown (hover)</a>
                <div class="dropdown-menu">
                  <a class="dropdown-item" href="javascript:void(0)">Action</a>
                  <a class="dropdown-item" href="javascript:void(0)">Another action</a>
                  <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
                </div>
              </li>
              <li class="nav-item mega-dropdown">
                <a href="javascript:void(0)" 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="javascript:void(0)">Column</a></div>
                    <div class="col-sm-6 col-lg p-3"><a href="javascript:void(0)" class="mega-link">.mega-link</a></div>
                    <div class="col-sm-6 col-lg p-3"><a href="javascript:void(0)" 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="javascript:void(0)" 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="javascript:void(0)">Column</a></div>
                    <div class="col-sm-6 col-lg p-3"><a href="javascript:void(0)" class="mega-link">.mega-link</a></div>
                    <div class="col-sm-6 col-lg p-3"><a href="javascript:void(0)" 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>

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

<h4 class="ui-block-heading">Navbar search</h4>

<div class="cui-example cui-example-vertical-spacing">
      <nav class="navbar navbar-expand-lg bg-light">
        <a class="navbar-brand" href="javascript:void(0)">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="javascript:void(0)">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="javascript:void(0)">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="javascript:void(0)">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="javascript:void(0)" class="navbar-search-cancel">&times;</a>
                </span>
              </label>
            </li>
          </ul>
        </div>
      </nav>

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

</div>

<samp class="cui-example-code-static">
    &lt;script src="assets/vendor/js/sidenav.js"&gt;&lt;/script&gt;
  </samp>

<h4 class="ui-block-heading">Vertical</h4>

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

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

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

<h4 class="ui-block-heading">Horizontal</h4>

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

<h4 class="ui-block-heading">Horizontal (show dropdown on hover)</h4>

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

<h4 class="ui-block-heading">Horizontal within container</h4>

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

<h4 class="ui-block-heading">No animation</h4>

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

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

<h4 class="ui-block-heading">No accordion</h4>

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

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

<h4 class="ui-block-heading">Elements</h4>

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

<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="javascript:void(0)" class="sidenav-link"><strong class="sidenav-text">5</strong> new messages</a></div>
              </div>
            </div>
          </li>

<li class="sidenav-divider mb-0"></li>
          <li class="sidenav-header small font-weight-semibold">SECTION HEADER</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>

<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="javascript:void(0)" class="sidenav-link"><strong class="sidenav-text">5</strong> new messages</a></div>
            </div>
          </div>
        </div>
        <div class="sidenav-divider mt-0"></div>

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

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

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

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

<h4 class="ui-block-heading">Colors (vertical)</h4>

<div class="cui-example">
      <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="javascript:void(0)" class="sidenav-link"><strong class="sidenav-text">5</strong> new messages</a></div>
              </div>
            </div>
          </li>

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

<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="javascript:void(0)" class="sidenav-link"><strong class="sidenav-text">5</strong> new messages</a></div>
              </div>
            </div>
          </li>

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

<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="javascript:void(0)" class="sidenav-link"><strong class="sidenav-text">5</strong> new messages</a></div>
              </div>
            </div>
          </li>

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

<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="javascript:void(0)" class="sidenav-link"><strong class="sidenav-text">5</strong> new messages</a></div>
              </div>
            </div>
          </li>

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

<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="javascript:void(0)" class="sidenav-link"><strong class="sidenav-text">5</strong> new messages</a></div>
              </div>
            </div>
          </li>

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

<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="javascript:void(0)" class="sidenav-link"><strong class="sidenav-text">5</strong> new messages</a></div>
              </div>
            </div>
          </li>

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

<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="javascript:void(0)" class="sidenav-link"><strong class="sidenav-text">5</strong> new messages</a></div>
              </div>
            </div>
          </li>

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

<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="javascript:void(0)" class="sidenav-link"><strong class="sidenav-text">5</strong> new messages</a></div>
              </div>
            </div>
          </li>

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

<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="javascript:void(0)" class="sidenav-link"><strong class="sidenav-text">5</strong> new messages</a></div>
              </div>
            </div>
          </li>

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

<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="javascript:void(0)" class="sidenav-link"><strong class="sidenav-text">5</strong> new messages</a></div>
              </div>
            </div>
          </li>

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

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

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

<h4 class="ui-block-heading">Colors (horizontal)</h4>

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

<h4 class="ui-block-heading">With background</h4>

<div class="cui-example">
      <div class="mb-4">
        <button type="button" id="sidenavs-12-toggle-collapsed" class="btn btn-primary">Toggle collapsed</button>
      </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="javascript:void(0)" class="sidenav-link"><strong class="sidenav-text">5</strong> new messages</a></div>
              </div>
            </div>
          </li>

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

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

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

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

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

<h4 class="ui-block-heading">Usage</h4>

<samp class="cui-example-code-static">
    &lt;script src="assets/vendor/js/sidenav.js"&gt;&lt;/script&gt;
  </samp>

<samp class="cui-example-code-static">
    &lt;div class="sidenav sidenav-vertical" id="vertical-sidenav-id"&gt;
      ...
    &lt;/div&gt;

&lt;div class="sidenav sidenav-horizontal" id="horizontal-sidenav-id"&gt;
      ...
    &lt;/div&gt;
  </samp>

<samp class="cui-example-code-static">
    &lt;script&gt;
      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
    &lt;/script&gt;
  </samp>

<h6 class="text-muted small font-weight-bold mt-5">OPTIONS</h6>
    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th>Option</th>
            <th>Default</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><strong>orientation</strong></td>
            <td><code>'vertical'</code></td>
            <td>Sidenav orientation. <div class="mt-2">Values: &nbsp; <code>'vertical'</code>, <code>'horizontal'</code></div>
            </td>
          </tr>
          <tr>
            <td><strong>accordion</strong></td>
            <td><code>true</code></td>
            <td>Enable/disable accordion behaviour. <div class="mt-2">Values: &nbsp; <code>true</code>, <code>false</code></div>
            </td>
          </tr>
          <tr>
            <td><strong>animate</strong></td>
            <td><code>true</code></td>
            <td>Enable/disable animations. <div class="mt-2">Values: &nbsp; <code>true</code>, <code>false</code></div>
            </td>
          </tr>
          <tr>
            <td><strong>closeChildren</strong></td>
            <td><code>false</code></td>
            <td>Close all children menus when the parent menu closes. <div class="mt-2">Values: &nbsp; <code>true</code>, <code>false</code></div>
            </td>
          </tr>
          <tr>
            <td><strong>showDropdownOnHover</strong></td>
            <td><code>false</code></td>
            <td>Open dropdown on hover <em class="text-muted">(horizontal mode only)</em>. <div class="mt-2">Values: &nbsp; <code>true</code>, <code>false</code></div>
            </td>
          </tr>
          <tr>
            <td><strong>onOpen</strong></td>
            <td>
            </td>
            <td>
              Called immediately after toggle link clicked.
              <samp class="cui-example-code-static mb-3" data-lang="javascript">
              new SideNav(document.getElementById('sidenav-id'), {
                onOpen: function(sidenavInstance, itemEl, toggleLinkEl, menuEl) {
                  ...
                }
              });
            </samp>
            </td>
          </tr>
          <tr>
            <td><strong>onOpened</strong></td>
            <td>
            </td>
            <td>
              Called after menu/dropdown open animation ends.
              <samp class="cui-example-code-static mb-3" data-lang="javascript">
              new SideNav(document.getElementById('sidenav-id'), {
                onOpened: function(sidenavInstance, itemEl, toggleLinkEl, menuEl) {
                  ...
                }
              });
            </samp>
            </td>
          </tr>
          <tr>
            <td><strong>onClose</strong></td>
            <td>
            </td>
            <td>
              Called immediately after toggle link clicked.
              <samp class="cui-example-code-static mb-3" data-lang="javascript">
              new SideNav(document.getElementById('sidenav-id'), {
                onClose: function(sidenavInstance, itemEl, toggleLinkEl, menuEl) {
                  ...
                }
              });
            </samp>
            </td>
          </tr>
          <tr>
            <td><strong>onClosed</strong></td>
            <td>
            </td>
            <td>
              Called after menu/dropdown close animation ends.
              <samp class="cui-example-code-static mb-3" data-lang="javascript">
              new SideNav(document.getElementById('sidenav-id'), {
                onClosed: function(sidenavInstance, itemEl, toggleLinkEl, menuEl) {
                  ...
                }
              });
            </samp>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

<h6 class="text-muted small font-weight-bold mt-5">METHODS</h6>
    <samp class="cui-example-code-static mb-3" data-lang="javascript">
    sidenavInstance.method(...arguments);
  </samp>
    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th>Method</th>
            <th>Arguments</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><code>open(el[, closeChildren=options.closeChildren])</code></td>
            <td>
              <ul class="ui-list">
                <li><code>el</code> - <code>.sidenav-item</code> or <code>.sidenav-toggle</code> element</li>
                <li><code>closeChildren</code> - Close all children menus when the parent menu closes. <em class="text-muted">(optional)</em></li>
              </ul>
            </td>
            <td>Open menu/dropdown</td>
          </tr>
          <tr>
            <td><code>close(el[, closeChildren=options.closeChildren])</code></td>
            <td>
              <ul class="ui-list">
                <li><code>el</code> - <code>.sidenav-item</code> or <code>.sidenav-toggle</code> element</li>
                <li><code>closeChildren</code> - Close all children menus when the parent menu closes. <em class="text-muted">(optional)</em></li>
              </ul>
            </td>
            <td>Close menu/dropdown</td>
          </tr>
          <tr>
            <td><code>toggle(el[, closeChildren=options.closeChildren])</code></td>
            <td>
              <ul class="ui-list">
                <li><code>el</code> - <code>.sidenav-item</code> or <code>.sidenav-toggle</code> element</li>
                <li><code>closeChildren</code> - Close all children menus when the parent menu closes. <em class="text-muted">(optional)</em></li>
              </ul>
            </td>
            <td>Toggle menu/dropdown</td>
          </tr>
          <tr>
            <td><code>closeAll([closeChildren=options.closeChildren])</code></td>
            <td>
              <ul class="ui-list">
                <li><code>closeChildren</code> - Close all children menus when the parent menu closes. <em class="text-muted">(optional)</em></li>
              </ul>
            </td>
            <td>Close all menus/dropdowns</td>
          </tr>
          <tr>
            <td><code>setActive(el, active[, openTree=true[, deactivateOthers=true]])</code></td>
            <td>
              <ul class="ui-list">
                <li><code>el</code> - <code>.sidenav-item</code> or <code>.sidenav-link</code> element</li>
                <li><code>active</code> - Set to <code>true</code> to activate; <code>false</code> to deactivate</li>
                <li><code>openTree</code> - Open parent menu tree</li>
                <li><code>deactivateOthers</code> - Deactivate currently active items</li>
              </ul>
            </td>
            <td>Activate/deactivate item</td>
          </tr>
          <tr>
            <td><code>setDisabled(el, disabled)</code></td>
            <td>
              <ul class="ui-list">
                <li><code>el</code> - <code>.sidenav-item</code> or <code>.sidenav-link</code> element</li>
                <li><code>disabled</code> - Set to <code>true</code> to disable; <code>false</code> to enable</li>
              </ul>
            </td>
            <td>Disable/enable item</td>
          </tr>
          <tr>
            <td><code>isActive(el)</code></td>
            <td>
              <ul class="ui-list">
                <li><code>el</code> - <code>.sidenav-item</code> or <code>.sidenav-link</code> element</li>
              </ul>
            </td>
            <td>Returns <code>true</code> if item is active</td>
          </tr>
          <tr>
            <td><code>isOpened(el)</code></td>
            <td>
              <ul class="ui-list">
                <li><code>el</code> - <code>.sidenav-item</code> or <code>.sidenav-link</code> element</li>
              </ul>
            </td>
            <td>Returns <code>true</code> if menu item is opened</td>
          </tr>
          <tr>
            <td><code>isDisabled(el)</code></td>
            <td>
              <ul class="ui-list">
                <li><code>el</code> - <code>.sidenav-item</code> or <code>.sidenav-link</code> element</li>
              </ul>
            </td>
            <td>Returns <code>true</code> if item is disabled</td>
          </tr>
          <tr>
            <td><code>update()</code></td>
            <td>
            </td>
            <td>Update scrollbar<em class="text-muted">(vertical mode)</em> / scrollable area<em class="text-muted">(horizontal mode)</em></td>
          </tr>
          <tr>
            <td><code>destroy()</code></td>
            <td>
            </td>
            <td>Destroy SideNav instance</td>
          </tr>
        </tbody>
      </table>
    </div>

</div>

<div class="ui-block">
    <h3 class="ui-block-heading">Footer</h3>

<h4 class="ui-block-heading">Colors</h4>

<div class="cui-example">
      <nav class="footer bg-footer-theme pt-4 mb-4">
        <div class="container text-center py-4">
          <div class="pb-3">
            <a href="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">About</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Our Story</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">Woman</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Man</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">FAQ</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Support</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">Wholesale</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Office solutions</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">About</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Our Story</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">Woman</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Man</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">FAQ</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Support</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">Wholesale</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Office solutions</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">About</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Our Story</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">Woman</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Man</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">FAQ</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Support</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">Wholesale</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Office solutions</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">About</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Our Story</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">Woman</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Man</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">FAQ</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Support</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">Wholesale</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Office solutions</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">About</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Our Story</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">Woman</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Man</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">FAQ</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Support</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">Wholesale</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Office solutions</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">About</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Our Story</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">Woman</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Man</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">FAQ</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Support</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">Wholesale</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Office solutions</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">About</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Our Story</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">Woman</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Man</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">FAQ</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Support</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">Wholesale</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Office solutions</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">About</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Our Story</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">Woman</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Man</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">FAQ</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Support</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">Wholesale</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Office solutions</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">About</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Our Story</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">Woman</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Man</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">FAQ</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Support</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">Wholesale</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Office solutions</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">About</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Our Story</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">Woman</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Man</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">FAQ</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Support</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">Wholesale</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Office solutions</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">About</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Our Story</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">Woman</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Man</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">FAQ</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Support</a>
              <a href="javascript:void(0)" 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="javascript:void(0)" class="footer-link d-block pb-2">Wholesale</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Office solutions</a>
              <a href="javascript:void(0)" class="footer-link d-block pb-2">Press Resource</a>
            </div>
          </div>
        </div>
      </nav>
    </div>

</div>

<div class="ui-block">
    <h3 class="ui-block-heading">Tables</h3>

<h4 class="ui-block-heading">Basic</h4>

<div class="cui-example cui-example-vertical-spacing">
      <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>
    </div>

<h4 class="ui-block-heading">Table head options</h4>

<div class="cui-example cui-example-vertical-spacing">
      <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>
    </div>

<h4 class="ui-block-heading">Striped rows</h4>

<div class="cui-example cui-example-vertical-spacing">
      <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>
    </div>

<h4 class="ui-block-heading">Bordered table</h4>

<div class="cui-example cui-example-vertical-spacing">
      <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>
    </div>

<h4 class="ui-block-heading">Bordereless table</h4>

<div class="cui-example cui-example-vertical-spacing">
      <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>
    </div>

<h4 class="ui-block-heading">Hoverable rows</h4>

<div class="cui-example cui-example-vertical-spacing">
      <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>
    </div>

<h4 class="ui-block-heading">Small table</h4>

<div class="cui-example cui-example-vertical-spacing">
      <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>
    </div>

<h4 class="ui-block-heading">Contextual classes</h4>

<div class="cui-example cui-example-vertical-spacing">
      <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>
    </div>

<h4 class="ui-block-heading">Within card</h4>

<div class="cui-example cui-example-vertical-spacing">
      <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>
    </div>

<h4 class="ui-block-heading">Responsive tables</h4>

<div class="cui-example cui-example-vertical-spacing">
      <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>
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Media</h3>

<h4 class="ui-block-heading">Example</h4>

<div class="cui-example">
      <div class="media">
        <a href="javascript:void(0)" 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="javascript:void(0)">Mike Greene</a>
          <span class="text-muted">commented on</span>
          <a href="javascript:void(0)">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="javascript:void(0)" class="d-block float-right text-muted small"><span class="ion ion-ios-thumbs-down"></span></a>
          <a href="javascript:void(0)" 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="javascript:void(0)" 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="javascript:void(0)">Leon Wilson</a>
          <span class="text-muted">commented on</span>
          <a href="javascript:void(0)">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="javascript:void(0)" class="d-block float-right text-muted small"><span class="ion ion-ios-thumbs-down"></span></a>
          <a href="javascript:void(0)" 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="javascript:void(0)" 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="javascript:void(0)">Allie Rodriguez</a>
          <span class="text-muted">commented on</span>
          <a href="javascript:void(0)">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="javascript:void(0)" class="d-block float-right text-muted small"><span class="ion ion-ios-thumbs-down"></span></a>
          <a href="javascript:void(0)" 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>
    </div>

<h4 class="ui-block-heading">Nesting</h4>

<div class="cui-example">
      <div class="media">
        <a href="javascript:void(0)" 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="javascript:void(0)">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="javascript:void(0)" class="text-muted small"><span class="ion ion-ios-thumbs-up"></span></a>&nbsp;&nbsp;
          <a href="javascript:void(0)" class="text-muted small"><span class="ion ion-ios-thumbs-down"></span></a>
          <span class="text-muted small">&nbsp;&nbsp;·&nbsp;&nbsp;</span>
          <a href="javascript:void(0)" class="text-muted small">Reply</a>

<div class="media mt-3">
            <a href="javascript:void(0)" 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="javascript:void(0)">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="javascript:void(0)" class="text-muted small"><span class="ion ion-ios-thumbs-up"></span></a>&nbsp;&nbsp;
              <a href="javascript:void(0)" class="text-muted small"><span class="ion ion-ios-thumbs-down"></span></a>
              <span class="text-muted small">&nbsp;&nbsp;·&nbsp;&nbsp;</span>
              <a href="javascript:void(0)" class="text-muted small">Reply</a>

<div class="media mt-3">
                <a href="javascript:void(0)" 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="javascript:void(0)">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="javascript:void(0)" class="text-muted small"><span class="ion ion-ios-thumbs-up"></span></a>&nbsp;&nbsp;
                  <a href="javascript:void(0)" class="text-muted small"><span class="ion ion-ios-thumbs-down"></span></a>
                  <span class="text-muted small">&nbsp;&nbsp;·&nbsp;&nbsp;</span>
                  <a href="javascript:void(0)" class="text-muted small">Reply</a>
                </div>
              </div>
            </div>
          </div>

<div class="media mt-3">
            <a href="javascript:void(0)" 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="javascript:void(0)">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="javascript:void(0)" class="text-muted small"><span class="ion ion-ios-thumbs-up"></span></a>&nbsp;&nbsp;
              <a href="javascript:void(0)" class="text-muted small"><span class="ion ion-ios-thumbs-down"></span></a>
              <span class="text-muted small">&nbsp;&nbsp;·&nbsp;&nbsp;</span>
              <a href="javascript:void(0)" class="text-muted small">Reply</a>
            </div>
          </div>

</div>
      </div>
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Thumbnails</h3>

<h4 class="ui-block-heading">Example</h4>

<h4 class="ui-block-heading">With overlay</h4>

<h4 class="ui-block-heading">With overlay and content</h4>

<h4 class="ui-block-heading">Shadow on hover</h4>

<h4 class="ui-block-heading">Zoom In animation on hover</h4>

</div>

<div class="ui-block">
    <h3 class="ui-block-heading">Cards</h3>

<h4 class="ui-block-heading">Example</h4>

<div class="cui-example">
      <div class="card" style="max-width: 20rem;">
        <img class="card-img-top" src="assets/img/bg/2.jpg" alt="Card image cap">
        <div class="card-body">
          <h4 class="card-title">Card title</h4>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>

<h4 class="ui-block-heading">Content types</h4>

<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="javascript:void(0)" class="card-link">Card link</a>
              <a href="javascript:void(0)" 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>
    </div>

<h4 class="ui-block-heading">Mixed</h4>

<div class="cui-example">
      <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="javascript:void(0)" class="card-link">Card link</a>
          <a href="javascript:void(0)" class="card-link">Another link</a>
        </div>
      </div>
    </div>

<h4 class="ui-block-heading">Header and footer</h4>

<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="javascript:void(0)" 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="javascript:void(0)" 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="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
            </div>
            <div class="card-footer text-muted">
              2 days ago
            </div>
          </div>

</div>
      </div>
    </div>

<h4 class="ui-block-heading">Text alignment</h4>

<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="javascript:void(0)" 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="javascript:void(0)" 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="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>

</div>
      </div>
    </div>

<h4 class="ui-block-heading">Navigation</h4>

<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="javascript:void(0)">Active</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="javascript:void(0)">Link</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link disabled" href="javascript:void(0)">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="javascript:void(0)" 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="javascript:void(0)">Active</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="javascript:void(0)">Link</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link disabled" href="javascript:void(0)">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="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>

</div>
      </div>
    </div>

<h4 class="ui-block-heading material-style-only">Light navigation (Material only)</h4>

<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="javascript:void(0)">Active</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="javascript:void(0)">Link</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link disabled" href="javascript:void(0)">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="javascript:void(0)" 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="javascript:void(0)">Active</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="javascript:void(0)">Link</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link disabled" href="javascript:void(0)">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="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>

</div>
      </div>
    </div>

<h4 class="ui-block-heading">Images</h4>

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

<h4 class="ui-block-heading">Condenced</h4>

<div class="cui-example">
      <div class="card card-condenced" style="max-width: 20rem;">
        <div class="card-header">
          Card header
        </div>
        <img class="w-100" 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="javascript:void(0)" class="card-link">Card link</a>
          <a href="javascript:void(0)" class="card-link">Another link</a>
        </div>
      </div>
    </div>

<h4 class="ui-block-heading">Style variations</h4>

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

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

<h4 class="ui-block-heading">Hover cards</h4>

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

<h4 class="ui-block-heading">With elements</h4>

<div class="card mb-3">
            
            <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">
            
            <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">
            
            <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">
            
            <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">
            
            <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="javascript:void(0)">1</a></li>
                  <li class="page-item"><a class="page-link" href="javascript:void(0)">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="javascript:void(0)">1</a></li>
                  <li class="page-item"><a class="page-link" href="javascript:void(0)">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="javascript:void(0)">1</a></li>
                    <li class="page-item"><a class="page-link" href="javascript:void(0)">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="javascript:void(0)">1</a></li>
                    <li class="page-item"><a class="page-link" href="javascript:void(0)">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>
    </div>

<h4 class="ui-block-heading">Card groups</h4>

<div class="cui-example">
      <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>
    </div>

<h4 class="ui-block-heading">Card decks</h4>

<div class="cui-example">
      <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>
    </div>

<h4 class="ui-block-heading">Card columns</h4>

<div class="cui-example">
      <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>
    </div>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Accordion</h3>

<h4 class="ui-block-heading">Default</h4>

<div class="cui-example">
      <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>

<div class="cui-example">
      <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>
  </div>

<div class="ui-block">
    <h3 class="ui-block-heading">Carousel</h3>

<h4 class="ui-block-heading">Example</h4>

<div class="cui-example">
      <div id="carouselExample" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExample" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExample" data-slide-to="1"></li>
          <li data-target="#carouselExample" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img class="d-block w-100" src="assets/img/bg/1.jpg" alt="First slide">
            <div class="carousel-caption d-none d-md-block">
              <h3>First slide</h3>
              <p>Eos mutat malis maluisset et, agam ancillae quo te, in vim congue pertinacia.</p>
            </div>
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="assets/img/bg/2.jpg" alt="Second slide">
            <div class="carousel-caption d-none d-md-block">
              <h3>Second slide</h3>
              <p>In numquam omittam sea.</p>
            </div>
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="assets/img/bg/3.jpg" alt="Third slide">
            <div class="carousel-caption d-none d-md-block">
              <h3>Third slide</h3>
              <p>Lorem ipsum dolor sit amet, virtute consequat ea qui, minim graeco mel no.</p>
            </div>
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
  </div>

function hasClass(el, cls) {
        return el.className.split(' ').indexOf(cls) !== -1;
      }

function sanitizeSource(source, blacklist) {
        source = source
          .replace(/\r/g, '')
          .replace(/\t/g, '  ')
          .replace(/^ *\n/, '\n')
          .replace(/[\s\n]+$/, '')
          .replace(new RegExp('\\n' + source.match(/^\n( *)/)[1], 'g'), '\n');

blacklist = (blacklist || []).concat(CLASS_BLACKLIST);

if (blacklist) {
          source = source.replace(/class="([^"]+)"/g, function(m, clsStr) {
            var clsArr = clsStr.replace(/^\s+|\s+$/, '').replace(/\s+/g, ' ').split(' ');

for (var i = 0, l = blacklist.length, clsInd; i < l; i++) {
              if ((clsInd = clsArr.indexOf(blacklist[i])) !== -1) {
                clsArr.splice(clsInd, 1);
              }
            }

return 'class="' + clsArr.join(' ') + '"';
          });
        }

// Remove material-only code
        if (!MATERIAL_STYLE) {
          source = source.replace(/\n\s+[\s\S]+?/g, '');
        }

return source
          .replace(/\s+class=""/ig, '')
          .replace(/([a-z]+)=""/ig, '$1')
          .replace(/javascript:void$0$/g, '#')
          .replace(/data-src="holder\.js.+?"/g, 'src="..."')
          .replace(/\n[ ]*?/g, '')
          .replace(/\n[ ]*?/g, '')
          .replace(/^\n/, '');
      }

Array.prototype.slice.call(document.querySelectorAll('.cui-example-code-static')).forEach(function(parentEl) {
        var preEl = document.createElement('pre');
        var codeEl = document.createElement('code');
        var lang = parentEl.getAttribute('data-lang') || 'html';

codeEl.className = 'hljs ' + lang + ' xml';

preEl.appendChild(codeEl);

var blacklistStr = (parentEl.getAttribute('data-blacklist') || null);
        var blacklist = (blacklistStr && blacklistStr.split(',')) || null;

codeEl.innerHTML = hljs.highlight(lang, sanitizeSource(parentEl.innerHTML.replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>'), blacklist)).value;
        parentEl.innerHTML = '';

parentEl.appendChild(preEl);
      });

Array.prototype.slice.call(document.querySelectorAll('.cui-example')).forEach(function(parentEl) {
        var wrapperEl = document.createElement('div');
        var preEl = document.createElement('pre');
        var codeEl = document.createElement('code');

var materialOnly = hasClass(parentEl, 'material-style-only');

wrapperEl.className = 'cui-example-code' + (materialOnly ? ' material-style-only' : '');
        codeEl.className = 'hljs html xml';

preEl.appendChild(codeEl);
        wrapperEl.appendChild(preEl);

var blacklistStr = (parentEl.getAttribute('data-blacklist') || null);
        var blacklist = (blacklistStr && blacklistStr.split(',')) || null;

codeEl.innerHTML = hljs.highlight('html', sanitizeSource(parentEl.innerHTML, blacklist)).value;

parentEl.parentNode.insertBefore(wrapperEl, parentEl);

// Get .ui-block-heading element
        var heading = wrapperEl.previousElementSibling;

while (heading && !hasClass(heading, 'ui-block-heading')) {
          heading = heading.previousElementSibling;
        }

var toggler = document.createElement('a');

if (heading) {
          toggler.className = 'cui-example-code-toggle float-right' + (materialOnly ? ' material-style-only' : '');
          toggler.innerHTML = '&lt;/&gt';
          toggler.setAttribute('href', '#');

heading.appendChild(toggler);

toggler.addEventListener('click', function(e) {
            e.preventDefault();

if (hasClass(toggler, 'active')) {
              toggler.className = toggler.className.replace(' active', '');
              wrapperEl.className = wrapperEl.className.replace(' active', '');
            } else {
              toggler.className += ' active';
              wrapperEl.className += ' active';
            }

return false;
          });
        }
      });
    })();
  </script>

<script src="assets/vendor/libs/popper/popper.js"></script>
  <script src="assets/vendor/js/bootstrap.js"></script>

<script src="assets/vendor/js/dropdown-hover.js"></script>
  <script src="assets/vendor/js/mega-dropdown.js"></script>
  <script src="assets/vendor/js/sidenav.js"></script>
  <script src="assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
</body>

</html>