---
title:                                  Theme Previewer
tagline:                                Check common components for a selected Theme
description:                            Themes Previewer for J1 Template

tags:                                   [ Bootstrap, Preview]
index:                                  []
categories:                             [ pages ]

flowtext:                               false

permalink:                              /pages/public/previewer/theme/
regenerate:                             false

resources:                              [ tocbot ]
resource_options:
  - masthead:
      opacity:                          0.5
      slides:
        - url:                          /assets/images/pages/roundtrip/theme-1920.jpg
          alt:                          Photo by Clem Onojeghuo on Unsplash
          caption:                      Photo by Clem Onojeghuo on Unsplash
          caption_href:                 https://unsplash.com/@clemono2
          caption_color:                rgba_lighten_800
---

// Enable the Liquid Preprocessor
//
:page-liquid:

// Set other global page attributes here
// -------------------------------------------------------------------


{% comment %} Liquid procedures
--------------------------------------------------------------- {% endcomment %}
{% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%}


// NOTE: Initialize entry document paths
//
{% include {{set_env_entry_document}} init_folders=all %}

// Load tags and urls
//
include::{includedir}/attributes.asciidoc[tag=tags]
include::{includedir}/attributes.asciidoc[tag=urls]

// Additional ASCIIDOC attributes goes here
//


++++
  <!-- Prepend H1 tag here -->
  <div id="h1_theme_name" class="row mb-3">
    <!-- Add J1 Theme Manager details -->
    <script>
      /* Load the previously selected theme from the cookies */
      var j1_user_state = {};
      var user_state_detected;
      var themeName;
      var themeNameHeadline;

      /* Read J1 UserState cookie */
      user_state_detected = j1.existsCookie ( 'j1.user.state' );
      if ( user_state_detected ) {
        j1_user_state     = j1.getUserStateCookie();
        themeName         = j1_user_state.theme_name;
      } else {
        themeName         = 'J1 Default';
      }
      var themeNameHeadline = '<h1 id="theme_name">Theme ' +themeName+ '</h1>';
      $('#h1_theme_name').prepend(themeNameHeadline);
    </script>
  </div>
++++

lorem:sentences[5]

== Navbars

See examples for Bootstrap’s powerful, responsive navigation header, the
navbar. Includes support for branding, navigation, and more, including
support for the collapse plugin.

pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-indigo"></i>]
Refer to: link:{bs_doc_components_navbar}[Bootstrap Docs, window="_blank"].

++++
<!-- Navbar
============================================================================ -->
<div class="bs-docs-section clearfix">
  <div class="row mb-5">
    <div class="col-md-12">
      <div class="bs-component mb-2">
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
          <a class="navbar-brand" href="#">Navbar</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarColor01">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">About</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-secondary btn-raised my-2 my-sm-0" type="submit">Search</button>
            </form>
          </div>
        </nav>
      </div>
      <div class="bs-component mb-2">
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
          <a class="navbar-brand" href="#">Navbar</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarColor02">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">About</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-secondary btn-raised my-2 my-sm-0" type="submit">Search</button>
            </form>
          </div>
        </nav>
      </div>
      <div class="bs-component mb-2">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
          <a class="navbar-brand" href="#">Navbar</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarColor03">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">About</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-secondary btn-raised my-2 my-sm-0" type="submit">Search</button>
            </form>
          </div>
        </nav>
      </div>
    </div>
  </div>
</div>
++++

== Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and
more with support for multiple sizes, states, and more. Bootstrap includes
several predefined button styles, each serving its own semantic purpose,
with a few extras thrown in for more control.

pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-indigo"></i>]
Refer to: link:{bs_doc_components_buttons}[Bootstrap Docs, window="_blank"].

++++
<!-- Buttons
============================================================================ -->
<div class="bs-docs-section">
  <div class="row mb-4">
    <div class="col-md-10">
      <p class="bs-component">
        <button type="button" class="btn btn-primary btn-raised">Primary</button>
        <button type="button" class="btn btn-secondary btn-raised">Secondary</button>
        <button type="button" class="btn btn-success btn-raised">Success</button>
        <button type="button" class="btn btn-info btn-raised">Info</button>
        <button type="button" class="btn btn-warning btn-raised">Warning</button>
        <button type="button" class="btn btn-danger btn-raised">Danger</button>
        <button type="button" class="btn btn-link btn-raised">Link</button>
      </p>
      <p class="bs-component">
        <button type="button" class="btn btn-primary btn-raised disabled">Primary</button>
        <button type="button" class="btn btn-secondary btn-raised disabled">Secondary</button>
        <button type="button" class="btn btn-success btn-raised disabled">Success</button>
        <button type="button" class="btn btn-info btn-raised disabled">Info</button>
        <button type="button" class="btn btn-warning btn-raised disabled">Warning</button>
        <button type="button" class="btn btn-danger btn-raised disabled">Danger</button>
        <button type="button" class="btn btn-link btn-raised disabled">Link</button>
      </p>
      <p class="bs-component">
        <button type="button" class="btn btn-outline-primary btn-raised">Primary</button>
        <button type="button" class="btn btn-outline-secondary btn-raised">Secondary</button>
        <button type="button" class="btn btn-outline-success btn-raised">Success</button>
        <button type="button" class="btn btn-outline-info btn-raised">Info</button>
        <button type="button" class="btn btn-outline-warning btn-raised">Warning</button>
        <button type="button" class="btn btn-outline-danger btn-raised">Danger</button>
      </p>
      <div class="bs-component">
        <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
          <button type="button" class="btn btn-primary btn-raised">Primary</button>
          <div class="btn-group" role="group">
            <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
            <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
              <a class="dropdown-item" href="#">Dropdown link</a>
              <a class="dropdown-item" href="#">Dropdown link</a>
            </div>
          </div>
        </div>
        <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
          <button type="button" class="btn btn-success btn-raised">Success</button>
          <div class="btn-group" role="group">
            <button id="btnGroupDrop2" type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
            <div class="dropdown-menu" aria-labelledby="btnGroupDrop2">
              <a class="dropdown-item" href="#">Dropdown link</a>
              <a class="dropdown-item" href="#">Dropdown link</a>
            </div>
          </div>
        </div>
        <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
          <button type="button" class="btn btn-info">Info</button>
          <div class="btn-group" role="group">
            <button id="btnGroupDrop3" type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
            <div class="dropdown-menu" aria-labelledby="btnGroupDrop3">
              <a class="dropdown-item" href="#">Dropdown link</a>
              <a class="dropdown-item" href="#">Dropdown link</a>
            </div>
          </div>
        </div>
        <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
          <button type="button" class="btn btn-danger">Danger</button>
          <div class="btn-group" role="group">
            <button id="btnGroupDrop4" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
            <div class="dropdown-menu" aria-labelledby="btnGroupDrop4">
              <a class="dropdown-item" href="#">Dropdown link</a>
              <a class="dropdown-item" href="#">Dropdown link</a>
            </div>
          </div>
        </div>
      </div>
      <div class="bs-component mt-2">
        <button type="button" class="btn btn-primary btn-raised btn-lg">Large button</button>
        <button type="button" class="btn btn-primary btn-raised">Default button</button>
        <button type="button" class="btn btn-primary btn-raised btn-sm">Small button</button>
      </div>
    </div>
    <div class="col-md-12">
      <p class="bs-component mt-2">
        <button type="button" class="btn btn-primary btn-raised btn-lg btn-block">Block level button</button>
      </p>
      <div class="bs-component" style="margin-bottom: 15px;">
        <div class="btn-group" data-toggle="buttons">
          <label class="btn btn-primary btn-raised active">
          <input type="checkbox" checked> Checkbox 1
          </label>
          <label class="btn btn-primary btn-raised">
          <input type="checkbox"> Checkbox 2
          </label>
          <label class="btn btn-primary btn-raised">
          <input type="checkbox"> Checkbox 3
          </label>
        </div>
      </div>
      <div class="bs-component" style="margin-bottom: 15px;">
        <div class="btn-group" data-toggle="buttons">
          <label class="btn btn-primary btn-raised active">
          <input type="radio" name="options" id="option1" checked> Radio 1
          </label>
          <label class="btn btn-primary btn-raised">
          <input type="radio" name="options" id="option2"> Radio 2
          </label>
          <label class="btn btn-primary btn-raised">
          <input type="radio" name="options" id="option3"> Radio 3
          </label>
        </div>
      </div>
      <div class="bs-component">
        <div class="btn-group-vertical" data-toggle="buttons">
          <button type="button" class="btn btn-primary btn-raised">Button</button>
          <button type="button" class="btn btn-primary btn-raised">Button</button>
          <button type="button" class="btn btn-primary btn-raised">Button</button>
          <button type="button" class="btn btn-primary btn-raised">Button</button>
          <button type="button" class="btn btn-primary btn-raised">Button</button>
          <button type="button" class="btn btn-primary btn-raised">Button</button>
        </div>
      </div>
      <div class="bs-component mt-2 mb-2">
        <div class="btn-group" role="group" aria-label="Basic example">
          <button type="button" class="btn btn-secondary btn-raised">Left</button>
          <button type="button" class="btn btn-secondary btn-raised">Middle</button>
          <button type="button" class="btn btn-secondary btn-raised">Right</button>
        </div>
      </div>
      <div class="bs-component mt-2 mb-2">
        <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
          <div class="btn-group mr-2" role="group" aria-label="First group">
            <button type="button" class="btn btn-secondary btn-raised">1</button>
            <button type="button" class="btn btn-secondary btn-raised">2</button>
            <button type="button" class="btn btn-secondary btn-raised">3</button>
            <button type="button" class="btn btn-secondary btn-raised">4</button>
          </div>
          <div class="btn-group mr-2" role="group" aria-label="Second group">
            <button type="button" class="btn btn-secondary btn-raised">5</button>
            <button type="button" class="btn btn-secondary btn-raised">6</button>
            <button type="button" class="btn btn-secondary btn-raised">7</button>
          </div>
          <div class="btn-group" role="group" aria-label="Third group">
            <button type="button" class="btn btn-secondary btn-raised">8</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
++++

== Typography

Bootstrap sets basic global display, typography, and link styles. When more
control is needed, check out the textual utility classes.

For a more inclusive and accessible type scale, it is assuemed that
the browser default root font-size (typically 16px) so visitors can
customize their browser defaults as needed.

pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-indigo"></i>]
Refer to: link:{bs_doc_content_typography}[Bootstrap Docs, window="_blank"].

++++
<!-- Typography
============================================================================ -->
<div class="bs-docs-section">
  <!-- Typography - Headings
  ========================================================================== -->
  <!-- Headings -->
  <div class="row mb-5">
    <div class="col-md-4">
      <div class="bs-component">
        <h1 class="notoc">Heading 1</h1>
        <h2 class="notoc">Heading 2</h2>
        <h3 class="notoc">Heading 3</h3>
        <h4 class="notoc">Heading 4</h4>
        <h5 class="notoc">Heading 5</h5>
        <h6 class="notoc">Heading 6</h6>
        <h3 class="notoc">
          Heading 3
          <small class="text-muted">with muted text</small>
        </h3>
        <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
      </div>
    </div>
    <div class="col-md-4">
      <div class="bs-component">
        <h3 class="notoc">Example body text</h2>
        <p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
        <p><small>This line of text is meant to be treated as fine print.</small></p>
        <p>The following is <strong>rendered as bold text</strong>.</p>
        <p>The following is <em>rendered as italicized text</em>.</p>
        <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
      </div>
    </div>
    <div class="col-md-4">
      <div class="bs-component">
        <h3 class="notoc">Emphasis classes</h2>
        <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
        <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
        <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
        <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
        <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
        <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
      </div>
    </div>
  </div>

  <!-- Typography - Blockquotes
  ========================================================================== -->
  <div class="row">
    <div class="col-md-12">
      <h2 id="type-blockquotes" class="notoc">Blockquotes</h3>
    </div>
  </div>
  <div class="row mb-5">
    <div class="col-md-6">
      <div class="bs-component">
        <blockquote class="blockquote">
          <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 class="col-md-6">
      <div class="bs-component">
        <blockquote class="blockquote blockquote-reverse">
          <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>
++++

== Tables

Due to the widespread use of tables across third-party widgets like calendars
and date pickers, we’ve designed our tables to be opt-in. Just add the base
class .table to any <table>, then extend with custom styles or our various
included modifier classes.

Using the most basic table markup, here’s how .table-based tables look in
Bootstrap. All table styles are inherited in Bootstrap 4, meaning any nested
tables will be styled in the same manner as the parent.

pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-indigo"></i>]
Refer to: link:{bs_doc_content_tables}[Bootstrap Docs, window="_blank"].

++++
<!-- Tables
============================================================================ -->
<div class="bs-docs-section">
  <div class="row mb-5">
    <div class="col-md-12">

      <div class="bs-component">
        <table class="table table-striped table-hover table-bordered">
          <thead class="thead-inverse">
            <tr>
              <th>#</th>
              <th>Column heading</th>
              <th>Column heading</th>
              <th>Column heading</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Column content</td>
              <td>Column content</td>
              <td>Column content</td>
            </tr>
            <tr>
              <td>2</td>
              <td>Column content</td>
              <td>Column content</td>
              <td>Column content</td>
            </tr>
            <tr class="table-info">
              <td>3</td>
              <td>Column content</td>
              <td>Column content</td>
              <td>Column content</td>
            </tr>
            <tr class="table-success">
              <td>4</td>
              <td>Column content</td>
              <td>Column content</td>
              <td>Column content</td>
            </tr>
            <tr class="table-danger">
              <td>5</td>
              <td>Column content</td>
              <td>Column content</td>
              <td>Column content</td>
            </tr>
            <tr class="table-warning">
              <td>6</td>
              <td>Column content</td>
              <td>Column content</td>
              <td>Column content</td>
            </tr>
            <tr class="table-active">
              <td>7</td>
              <td>Column content</td>
              <td>Column content</td>
              <td>Column content</td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- /example -->
    </div>
  </div>
</div>
++++

== Forms

Bootstrap’s form controls expand on our Rebooted form styles with classes.
Use these classes to opt into their customized displays for a more consistent
rendering across browsers and devices.

Be sure to use an appropriate type attribute on all inputs (e.g., email
for email address or number for numerical information) to take advantage
of newer input controls like email verification, number selection, and more.

Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading
for documentation on required classes, form layout, and more.

pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-indigo"></i>]
Refer to: link:{bs_doc_components_forms}[Bootstrap Docs, window="_blank"].

++++
<!-- Forms
============================================================================ -->
<div class="bs-docs-section">
  <div class="row mb-5">
    <div class="col-md-6">
      <div class="bs-component">
        <form>
          <fieldset>
            <legend>Legend</legend>
            <div class="form-group">
              <label for="exampleInputEmail1">Email address</label>
              <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
              <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
            </div>
            <div class="form-group">
              <label for="exampleInputPassword1">Password</label>
              <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
            </div>
            <div class="form-group">
              <label for="exampleSelect1">Example select</label>
              <select class="form-control" id="exampleSelect1">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
            </div>
            <div class="form-group">
              <label for="exampleSelect2">Example multiple select</label>
              <select multiple class="form-control" id="exampleSelect2">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
            </div>
            <div class="form-group">
              <label for="exampleTextarea">Example textarea</label>
              <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
            </div>
            <div class="form-group">
              <label for="exampleInputFile">File input</label>
              <input type="file" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp">
              <small id="fileHelp" class="form-text text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
            </div>
            <fieldset class="form-group">
              <legend>Radio buttons</legend>
              <div class="form-check">
                <label class="form-check-label">
                <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                Option one is this and that&mdash;be sure to include why it's great
                </label>
              </div>
              <div class="form-check">
                <label class="form-check-label">
                <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2">
                Option two can be something else and selecting it will deselect option one
                </label>
              </div>
              <div class="form-check disabled">
                <label class="form-check-label">
                <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
                Option three is disabled
                </label>
              </div>
            </fieldset>
            <div class="form-check">
              <label class="form-check-label">
              <input type="checkbox" class="form-check-input">
              Check me out
              </label>
            </div>
            <button type="submit" class="btn btn-primary btn-raised">Submit</button>
          </fieldset>
        </form>
      </div>
    </div>
    <div class="col-md-4 offset-lg-1">
      <form class="bs-component">
        <div class="form-group">
          <fieldset disabled>
            <label class="control-label" for="disabledInput">Disabled input</label>
            <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled="">
          </fieldset>
        </div>
        <div class="form-group">
          <fieldset>
            <label class="control-label" for="readOnlyInput">Readonly input</label>
            <input class="form-control" id="readOnlyInput" type="text" placeholder="Readonly input here…" readonly>
          </fieldset>
        </div>
        <div class="form-group has-success">
          <label class="form-control-label" for="inputValid">Valid input</label>
          <input type="text" class="form-control is-valid" id="inputValid">
          <div class="form-control-feedback">Success! You've done it.</div>
        </div>
        <div class="form-group has-danger">
          <label class="form-control-label" for="inputInvalid">Invalid input</label>
          <input type="text" class="form-control is-invalid" id="inputInvalid">
          <div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
        </div>
        <div class="form-group">
          <label class="col-form-label col-form-label-lg" for="inputLarge">Large input</label>
          <input class="form-control form-control-lg" type="text" id="inputLarge">
        </div>
        <div class="form-group">
          <label class="col-form-label" for="inputDefault">Default input</label>
          <input type="text" class="form-control" id="inputDefault">
        </div>
        <div class="form-group">
          <label class="col-form-label col-form-label-sm" for="inputSmall">Small input</label>
          <input class="form-control form-control-sm" type="text" id="inputSmall">
        </div>
        <div class="form-group">
          <label class="control-label">Input addons</label>
          <div class="form-group">
            <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
            <div class="input-group">
              <div class="input-group-addon">$</div>
              <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
              <div class="input-group-addon">.00</div>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
++++

== Navs

Navigation available in Bootstrap share general markup and styles, from the
base .nav class to the active and disabled states. Swap modifier classes to
switch between each style.

The base .nav component is built with flexbox and provide a strong foundation
for building all types of navigation components. It includes some style
overrides (for working with lists), some link padding for larger hit areas,
and basic disabled styling.

pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-indigo"></i>]
Refer to: link:{bs_doc_components_navs}[Bootstrap Docs, window="_blank"].

=== Tabs

Tabs takes the basic nav from above and adds the .nav-tabs class to generate
a tabbed interface. Use them to create tabbable regions with our tab
JavaScript plugin.

++++
<!-- Navs - Tabs
============================================================================ -->
<div class="bs-docs-section">
  <div class="row mb-5">

    <div class="col-md-10">
      <div class="bs-component">
        <ul class="nav nav-tabs">
          <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#profile">Profile</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Separated link</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <div id="myTabContent" class="tab-content">
          <div class="tab-pane fade active in" id="home">
            <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 class="tab-pane fade" id="profile">
            <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.</p>
          </div>
          <div class="tab-pane fade" id="dropdown1">
            <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.</p>
          </div>
          <div class="tab-pane fade" id="dropdown2">
            <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater.</p>
          </div>
        </div>
      </div>
    </div>

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

=== Pills

Take that same HTML as Tabs, but use .nav-pills class instead:

++++
<!-- Navs - Pills
============================================================================ -->
<div class="bs-docs-section">
  <div class="row mb-5">
    <div class="col-md-10">

      <h5 class="notoc">Standard Pills</h5>
      <div class="bs-component">
        <ul class="nav nav-pills">
          <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Separated link</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </div>
      <br>
        <h5 class="notoc">Stacked Pills (vertical)</h5>
      <div class="bs-component">
        <ul class="nav nav-pills flex-column">
          <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Separated link</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </div>
    </div>

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

=== Breadcrumbs

Breadcrumbs indicate the current page’s location within a navigational
hierarchy that automatically adds separators via CSS.

Separators are automatically added in CSS through ::before and content.

++++
<!-- Navs - Breadcrumbs
============================================================================ -->
<div class="bs-docs-section">
  <div class="row mb-5">

    <div class="col-md-10">
      <div class="bs-component">
        <ol class="breadcrumb">
          <li class="breadcrumb-item active">Home</li>
        </ol>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="#">Home</a></li>
          <li class="breadcrumb-item active">Library</li>
        </ol>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="#">Home</a></li>
          <li class="breadcrumb-item"><a href="#">Library</a></li>
          <li class="breadcrumb-item active">Data</li>
        </ol>
      </div>
    </div>

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

=== Pagination

We use a large block of connected links for our pagination, making links
hard to miss and easily scalable—all while providing large hit areas.
Pagination is built with list HTML elements so screen readers can announce
the number of available links. Use a wrapping <nav> element to identify
it as a navigation section to screen readers and other assistive technologies.

++++
<!-- Navs - Pagination
============================================================================ -->

<div class="row mb-5">
  <div class="col-md-10">
    <div class="bs-component">

      <div>
        <ul class="pagination">
          <li class="page-item disabled">
            <a class="page-link" href="#">&laquo;</a>
          </li>
          <li class="page-item active">
            <a class="page-link" href="#">1</a>
          </li>
          <li class="page-item">
            <a class="page-link" href="#">2</a>
          </li>
          <li class="page-item">
            <a class="page-link" href="#">3</a>
          </li>
          <li class="page-item">
            <a class="page-link" href="#">4</a>
          </li>
          <li class="page-item">
            <a class="page-link" href="#">5</a>
          </li>
          <li class="page-item">
            <a class="page-link" href="#">&raquo;</a>
          </li>
        </ul>
      </div>
      <div>
        <ul class="pagination pagination-lg">
          <li class="page-item disabled">
            <a class="page-link" href="#">&laquo;</a>
          </li>
          <li class="page-item active">
            <a class="page-link" href="#">1</a>
          </li>
          <li class="page-item">
            <a class="page-link" href="#">2</a>
          </li>
          <li class="page-item">
            <a class="page-link" href="#">3</a>
          </li>
          <li class="page-item">
            <a class="page-link" href="#">4</a>
          </li>
          <li class="page-item">
            <a class="page-link" href="#">5</a>
          </li>
          <li class="page-item">
            <a class="page-link" href="#">&raquo;</a>
          </li>
        </ul>
      </div>
      <div>
        <ul class="pagination pagination-sm">
          <li class="page-item disabled">
            <a class="page-link" href="#">&laquo;</a>
          </li>
          <li class="page-item active">
            <a class="page-link" href="#">1</a>
          </li>
          <li class="page-item">
            <a class="page-link" href="#">2</a>
          </li>
          <li class="page-item">
            <a class="page-link" href="#">3</a>
          </li>
          <li class="page-item">
            <a class="page-link" href="#">4</a>
          </li>
          <li class="page-item">
            <a class="page-link" href="#">5</a>
          </li>
          <li class="page-item">
            <a class="page-link" href="#">&raquo;</a>
          </li>
        </ul>
      </div>

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

== Indicators

lorem:sentences[5]


=== Alerts

Alerts provide contextual feedback messages for typical user actions with the
handful of available and flexible alert messages.

Alerts are available for any length of text, as well as an optional dismiss
button. For proper styling, use one of the eight required contextual classes
(e.g., .alert-success). For inline dismissal, use the alerts
https://getbootstrap.com/docs/4.0/components/alerts/#dismissing[jQuery plugin].

pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-indigo"></i>]
Refer to: link:{bs_doc_components_alerts}[Bootstrap Docs, window="_blank"].

++++
<!-- Indicators - Alerts
============================================================================ -->
<div class="bs-docs-section">
  <div class="row mb-3">
    <div class="col-md-12">
      <div class="bs-component">
        <div class="alert alert-dismissible alert-warning">
          <button type="button" class="close" data-dismiss="alert">&times;</button>
          <h4 class="alert-heading notoc">Warning!</h4>
          <p class="mb-0">Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <a href="#" class="alert-link">vel scelerisque nisl consectetur et</a>.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="row mb-5">
    <div class="col-md-4">
      <div class="bs-component">
        <div class="alert alert-dismissible alert-danger">
          <button type="button" class="close" data-dismiss="alert">&times;</button>
          <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="bs-component">
        <div class="alert alert-dismissible alert-success">
          <button type="button" class="close" data-dismiss="alert">&times;</button>
          <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="bs-component">
        <div class="alert alert-dismissible alert-info">
          <button type="button" class="close" data-dismiss="alert">&times;</button>
          <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
        </div>
      </div>
    </div>
  </div>
</div>
++++

=== Badges

Badges are small count and labeling components. They scale to match the size
of the immediate parent element by using relative font sizing and em units.

Note that depending on how they are used, badges may be confusing for users
of screen readers and similar assistive technologies. While the styling of
badges provides a visual cue as to their purpose, these users will simply
be presented with the content of the badge. Depending on the specific
situation, these badges may seem like random additional words or numbers
at the end of a sentence, link, or button.

pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-indigo"></i>]
Refer to: link:{bs_doc_components_badges}[Bootstrap Docs, window="_blank"].

++++
<!-- Indicators - Badges
============================================================================ -->
<div class="bs-docs-section mb-4">
  <div class="row">
    <div class="col-md-10">
      <div class="bs-component mb-3">
        <span class="badge badge-primary">Primary</span>
        <span class="badge badge-secondary">Secondary</span>
        <span class="badge badge-success">Success</span>
        <span class="badge badge-danger">Danger</span>
        <span class="badge badge-warning">Warning</span>
        <span class="badge badge-info">Info</span>
        <span class="badge badge-light">Light</span>
        <span class="badge badge-dark">Dark</span>
      </div>
      <div class="bs-component mb-4">
        <span class="badge badge-pill badge-primary">Primary</span>
        <span class="badge badge-pill badge-secondary">Secondary</span>
        <span class="badge badge-pill badge-success">Success</span>
        <span class="badge badge-pill badge-danger">Danger</span>
        <span class="badge badge-pill badge-warning">Warning</span>
        <span class="badge badge-pill badge-info">Info</span>
        <span class="badge badge-pill badge-light">Light</span>
        <span class="badge badge-pill badge-dark">Dark</span>
      </div>
    </div>
  </div>
</div>
++++

== Progress

Bootstrap custom progress bars featuring support for stacked bars, animated
backgrounds, and text labels. Progress components are built with two HTML
elements, some CSS to set the width, and a few attributes. We don’t use the
HTML5 <progress> element, ensuring you can stack progress bars, animate them,
and place text labels over them.

pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-indigo"></i>]
Refer to: link:{bs_doc_components_progress}[Bootstrap Docs, window="_blank"].

=== Basic

++++
<!-- Progress - Basic
============================================================================ -->
<div class="bs-docs-section">
  <div class="row mb-5">
    <div class="col-md-10">

      <div class="bs-component">
        <div class="progress">
          <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>

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

=== Contextual alternatives

++++
<!-- Progress - Contextual alternatives
============================================================================ -->
<div class="bs-docs-section">
  <div class="row mb-5">
    <div class="col-md-10">

      <div class="bs-component">
        <div class="progress">
          <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="progress">
          <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="progress">
          <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="progress">
          <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>

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

=== Multiple bars

++++
<!-- Progress - Multiple bars
============================================================================ -->
<div class="bs-docs-section">
  <div class="row mb-5">
    <div class="col-md-10">

      <div class="bs-component">
        <div class="progress">
          <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
          <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
          <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>

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

=== Striped

++++
<!-- Progress - Striped
============================================================================ -->
<div class="bs-docs-section">
  <div class="row mb-5">
    <div class="col-md-10">

      <div class="bs-component">
        <div class="progress">
          <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="progress">
          <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="progress">
          <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="progress">
          <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="progress">
          <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>

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

=== Animated

++++
<!-- Progress - Animated
============================================================================ -->
<div class="bs-docs-section">
  <div class="row mb-5">
    <div class="col-md-10">

      <div class="bs-component">
        <div class="progress">
          <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
        </div>
      </div>

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

== Containers

lorem:sentences[5]

lorem:sentences[2]

=== Jumbotron

Lightweight, flexible component for showcasing hero unit style content.

pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-indigo"></i>]
Refer to: link:{bs_doc_components_jumbotron}[Bootstrap Docs, window="_blank"].

++++
<!-- Containers  - Jumbotron
============================================================================ -->
<div class="bs-docs-section">
  <div class="row mb-3">
    <div class="col-md-10">
      <div class="bs-component">
        <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-raised btn-lg" href="#" role="button">Learn more</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
++++

=== List groups

List groups are a flexible and powerful component for displaying a series of
content. Modify and extend them to support just about any content within.

pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-indigo"></i>]
Refer to: link:{bs_doc_components_list_group}[Bootstrap Docs, window="_blank"].

++++
<!-- Containers  - List groups
============================================================================ -->
<div class="bs-docs-section">
  <div class="row mb-5">

    <div class="col-md-4">
      <div class="bs-component">
        <ul class="list-group">
          <li class="list-group-item d-flex justify-content-between align-items-center">
            Cras justo odio
            <span class="badge badge-primary badge-pill">14</span>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center">
            Dapibus ac facilisis
            <span class="badge badge-primary badge-pill">2</span>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center">
            Morbi leo risus
            <span class="badge badge-primary badge-pill">1</span>
          </li>
        </ul>
      </div>
    </div>

    <div class="col-md-4">
      <div class="bs-component">
        <div class="list-group">
          <a href="#" class="list-group-item list-group-item-action active">
            Cras justo odio
          </a>
          <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis
          </a>
          <a href="#" class="list-group-item list-group-item-action disabled">Morbi leo risus
          </a>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="bs-component">
        <div class="list-group">
          <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
            <div class="d-flex w-100 justify-content-between">
              <h5 class="mb-1 notoc">List group item heading</h5>
              <small>3 days ago</small>
            </div>
            <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
            <small>Donec id elit non mi porta.</small>
          </a>
          <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
            <div class="d-flex w-100 justify-content-between">
              <h5 class="mb-1 notoc">List group item heading</h5>
              <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>
    </div>

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

=== Cards

Bootstrap’s cards provide a flexible and extensible content container with
multiple variants and options. A card is a flexible and extensible content
container. It includes options for headers and footers, a wide variety of
content, contextual background colors, and powerful display options.

If you’re familiar with Bootstrap 3, cards replace our old panels, wells,
and thumbnails. Similar functionality to those components is available as
modifier classes for cards.

Cards are built with as little markup and styles as possible, but still
manage to deliver a ton of control and customization. Built with flexbox,
they offer easy alignment and mix well with other Bootstrap components.
They have no margin by default, so use spacing utilities as needed.

pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-indigo"></i>]
Refer to: link:{bs_doc_components_cards}[Bootstrap Docs, window="_blank"].

++++
<!-- Containers  - Cards
============================================================================ -->
<div class="bs-docs-section">
  <div class="row mb-5">

    <div class="col-md-4">
      <div class="bs-component">
        <div class="card text-white bg-primary mb-3" style="max-width: 20rem;">
          <div class="card-header">Header</div>
          <div class="card-body">
            <h4 class="card-title notoc">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 class="card text-white bg-secondary mb-3" style="max-width: 20rem;">
          <div class="card-header">Header</div>
          <div class="card-body">
            <h4 class="card-title notoc">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 class="card text-white bg-success mb-3" style="max-width: 20rem;">
          <div class="card-header">Header</div>
          <div class="card-body">
            <h4 class="card-title notoc">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 class="card text-white bg-danger mb-3" style="max-width: 20rem;">
          <div class="card-header">Header</div>
          <div class="card-body">
            <h4 class="card-title notoc">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 class="card text-white bg-warning mb-3" style="max-width: 20rem;">
          <div class="card-header">Header</div>
          <div class="card-body">
            <h4 class="card-title notoc">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 class="card text-white bg-info mb-3" style="max-width: 20rem;">
          <div class="card-header">Header</div>
          <div class="card-body">
            <h4 class="card-title notoc">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 class="card bg-light mb-3" style="max-width: 20rem;">
          <div class="card-header">Header</div>
          <div class="card-body">
            <h4 class="card-title notoc">Light 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 class="card text-white bg-dark mb-3" style="max-width: 20rem;">
          <div class="card-header">Header</div>
          <div class="card-body">
            <h4 class="card-title notoc">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="col-md-4">
      <div class="bs-component">
        <div class="card border-primary mb-3" style="max-width: 20rem;">
          <div class="card-header">Header</div>
          <div class="card-body text-primary">
            <h4 class="card-title notoc">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 class="card border-secondary mb-3" style="max-width: 20rem;">
          <div class="card-header">Header</div>
          <div class="card-body text-secondary">
            <h4 class="card-title notoc">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 class="card border-success mb-3" style="max-width: 20rem;">
          <div class="card-header">Header</div>
          <div class="card-body text-success">
            <h4 class="card-title notoc">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 class="card border-danger mb-3" style="max-width: 20rem;">
          <div class="card-header">Header</div>
          <div class="card-body text-danger">
            <h4 class="card-title notoc">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 class="card border-warning mb-3" style="max-width: 20rem;">
          <div class="card-header">Header</div>
          <div class="card-body text-warning">
            <h4 class="card-title notoc">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 class="card border-info mb-3" style="max-width: 20rem;">
          <div class="card-header">Header</div>
          <div class="card-body text-info">
            <h4 class="card-title notoc">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 class="card border-light mb-3" style="max-width: 20rem;">
          <div class="card-header">Header</div>
          <div class="card-body">
            <h4 class="card-title notoc">Light 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 class="card border-dark mb-3" style="max-width: 20rem;">
          <div class="card-header">Header</div>
          <div class="card-body text-dark">
            <h4 class="card-title notoc">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="col-md-4">
      <div class="bs-component">
        <div class="card mb-3">
          <h3 class="card-header notoc">Card header</h3>
          <div class="card-body">
            <h5 class="card-title notoc">Special title treatment</h5>
            <h6 class="card-subtitle text-muted notoc">Support card subtitle</h6>
          </div>
          <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22318%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20318%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_158bd1d28ef%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_158bd1d28ef%22%3E%3Crect%20width%3D%22318%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22129.359375%22%20y%3D%2297.35%22%3EImage%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Card image">
          <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>
          <ul class="list-group list-group-flush">
            <li class="list-group-item">Cras justo odio</li>
            <li class="list-group-item">Dapibus ac facilisis</li>
            <li class="list-group-item">Vestibulum at eros</li>
          </ul>
          <div class="card-body">
            <a href="#" class="card-link">Card link</a>
            <a href="#" class="card-link">Another link</a>
          </div>
          <div class="card-footer text-muted">
            2 days ago
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h4 class="card-title notoc">Card title</h4>
            <h6 class="card-subtitle mb-2 text-muted notoc">Card subtitle</h6>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="card-link">Card link</a>
            <a href="#" class="card-link">Another link</a>
          </div>
        </div>
      </div>
    </div>

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

== Dialogs

lorem:sentences[5]

=== Modals

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for
lightboxes, user notifications, or completely custom content. Modals are
built with HTML, CSS, and JavaScript. They’re positioned over everything
else in the document and remove scroll from the <body> so that modal
content scrolls instead.

pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-indigo"></i>]
Refer to: link:{bs_doc_components_modal}[Bootstrap Docs, window="_blank"].

==== Base Modal

Toggle a working modal demo by clicking the button below. It will slide
down and fade in from the top of the page.

++++
<div class="ml-2 mb-5">
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#exampleSimpleModal">
    Launch Modal
  </button>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleSimpleModal" tabindex="-1" role="dialog" aria-labelledby="exampleSimpleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title notoc" id="exampleSimpleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-round btn-raised mr-2" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary btn-round btn-raised">Save changes</button>
      </div>
    </div>
  </div>
</div>
++++

==== Scrolling long content

When modals become too long for the user’s viewport or device, they scroll
independent of the page itself. Try the demo below to see what we mean.

++++
<div class="ml-2 mb-5">
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#exampleModalLong">
    Launch Modal
  </button>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title notoc" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <h4 class="notoc card-title">The Extremes of Good and Evil</h4>
        <h6 class="notoc category text-gray mb-3">Cicero, Paragraph 1.10.33 · Translation by H. Rackham, Issue 1914 - De Finibus</h6>
        <p class="card-description scale-description r-text-200">
          On the other hand, we denounce with righteous indignation and dislike men who
          are so beguiled and demoralized by the charms of pleasure of the moment, so
          blinded by desire, that they cannot foresee the pain and trouble that are
          bound to ensue; and equal blame belongs to those who fail in their duty through
          weakness of will, which is the same as saying through shrinking from toil and pain.
          <br/><br/>
          These cases are perfectly simple and easy to distinguish. In a free hour, when
          our power of choice is untrammelled and when nothing prevents our being able to
          do what we like best, every pleasure is to be welcomed and every pain avoided.
          But in certain circumstances and owing to the claims of duty or the obligations
          of business is will frequently occur that pleasures have to be repudiated and
          annoyances accepted. The wise man therefore always holds in these matters to
          this principle of selection: he rejects pleasures to secure other greater
          pleasures, or else he endures pains to avoid worse pains.
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-round btn-raised mr-2" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary btn-round btn-raised">Save changes</button>
      </div>
    </div>
  </div>
</div>
++++

==== Vertically centered

Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.

++++
<div class="ml-2 mb-5">
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#exampleModalVerticalCenter">
    Launch Modal
  </button>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModalVerticalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalVerticalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title notoc" id="exampleModalVerticalCenterTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
        voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-round btn-raised mr-2" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary btn-round btn-raised">Save changes</button>
      </div>
    </div>
  </div>
</div>
++++


==== Contact Form

Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.

++++
<div class="ml-2 mb-5">
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#modalContactForm">
    Launch Modal
  </button>
</div>

<div class="modal fade" id="modalContactForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
  <div class="modal-dialog cascading-modal" role="document">
    <!--Content-->
    <div class="modal-content">
      <!--Header-->
      <div class="modal-header light-blue darken-3 white-text">
        <button type="button" class="close waves-effect waves-light" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">×</span>
        </button>
        <h4 class="title notoc"><i class="fa fa-pencil"></i> Contact form</h4>
      </div>
      <!--Body-->
      <div class="modal-body mb-0">
        <div class="md-form form-sm">
          <i class="fa fa-envelope prefix"></i>
          <input type="text" id="form19" class="form-control">
          <label for="form19">Your name</label>
        </div>
        <div class="md-form form-sm">
          <i class="fa fa-lock prefix"></i>
          <input type="password" id="form20" class="form-control">
          <label for="form20">Your email</label>
        </div>
        <div class="md-form form-sm">
          <i class="fa fa-tag prefix"></i>
          <input type="text" id="form21" class="form-control">
          <label for="form21">Subject</label>
        </div>
        <div class="md-form form-sm">
          <i class="fa fa-pencil prefix"></i>
          <textarea type="text" id="form8" class="md-textarea form-control mb-0"></textarea>
          <label for="form8">Your message</label>
        </div>
        <div class="text-center mt-1-half">
          <button class="btn btn-info mb-2 waves-effect waves-light">Send <i class="fa fa-send ml-1"></i></button>
        </div>
      </div>
    </div>
    <!--/.Content-->
  </div>
</div>
++++

==== Fluid Modal

Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.

++++
<div class="ml-2 mb-5">
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#fluidModalRightSuccess">
    Launch Modal
  </button>
</div>

<!-- Full Height Modal Right Success-->
<div class="modal fade right" id="fluidModalRightSuccess" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-full-height modal-right modal-notify modal-success" role="document">
        <!--Content-->
        <div class="modal-content">
            <!--Header-->
            <div class="modal-header">
                <p class="heading lead">Modal Success</p>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true" class="white-text">&times;</span>
                                        </button>
            </div>

            <!--Body-->
            <div class="modal-body">
                <div class="text-center">
                    <i class="fa fa-check fa-4x mb-1 animated rotateIn"></i>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.</p>
                </div>
                <ul class="list-group z-depth-0">
                    <li class="list-group-item justify-content-between">
                        Cras justo odio
                        <span class="badge badge-primary badge-pill">14</span>
                    </li>
                    <li class="list-group-item justify-content-between">
                        Dapibus ac facilisis in
                        <span class="badge badge-primary badge-pill">2</span>
                    </li>
                    <li class="list-group-item justify-content-between">
                        Morbi leo risus
                        <span class="badge badge-primary badge-pill">1</span>
                    </li>
                    <li class="list-group-item justify-content-between">
                        Cras justo odio
                        <span class="badge badge-primary badge-pill">14</span>
                    </li>
                    <li class="list-group-item justify-content-between">
                        Dapibus ac facilisis in
                        <span class="badge badge-primary badge-pill">2</span>
                    </li>
                    <li class="list-group-item justify-content-between">
                        Morbi leo risus
                        <span class="badge badge-primary badge-pill">1</span>
                    </li>
                </ul>
            </div>

            <!--Footer-->
            <div class="modal-footer">
                <a type="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
                <a type="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
            </div>
        </div>
        <!--/.Content-->
    </div>
</div>
<!-- Full Height Modal Right Success-->
++++



==== Tooltips and Popovers

Tooltips and popovers can be placed within modals as needed. When modals are
closed, any tooltips and popovers within are also automatically dismissed.

++++
<div class="ml-2 mb-5">
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#exampleModalTooltip">
    Launch Modal
  </button>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModalTooltip" tabindex="-1" role="dialog" aria-labelledby="exampleModalTooltipTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title notoc" id="exampleModalTooltipTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <h5>Popover in a modal</h5>
        <p>This <a href="#" role="button" class="btn btn-secondary btn-round btn-raised popover-test" data-toggle="popover" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
        <hr>
        <h5>Tooltips in a modal</h5>
        <p><a href="#" class="tooltip-test" data-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" data-toggle="tooltip" title="Tooltip">that link</a> have tooltips on hover.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-round btn-raised mr-2" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary btn-round btn-raised">Save changes</button>
      </div>
    </div>
  </div>
</div>
++++


=== Popovers

Popovers rely on the 3rd party library Popper.js for positioning. You must
include popper.min.js before bootstrap.js or use bootstrap.bundle.min.js or
bootstrap.bundle.js which contains Popper.js in order for popovers to work.

Note: Popovers require the tooltip plugin as a dependency.


pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-indigo"></i>]
Refer to: link:{bs_doc_components_popovers}[Bootstrap Docs, window="_blank"].

++++
<!-- Dialogs - Popovers
============================================================================ -->
<div class="bs-docs-section">
  <div class="row mb-5">

    <div class="col-md-8">
      <div class="bs-component mt-3 mb-4">
        <button type="button" class="btn btn-secondary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Top</button>
        <button type="button" class="btn btn-secondary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
          sagittis lacus vel augue laoreet rutrum faucibus.">Bottom</button>
        <button type="button" class="btn btn-secondary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Right</button>
        <button type="button" class="btn btn-secondary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Left</button>
      </div>
    </div>

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

=== Tooltips

Tooltips rely on the 3rd party library Popper.js for positioning. You must
include popper.min.js before bootstrap.js or use bootstrap.bundle.min.js or
bootstrap.bundle.js which contains Popper.js in order for tooltips to work.

Note: Tooltips are opt-in for performance reasons, so you must initialize
them yourself.

pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-indigo"></i>]
Refer to: link:{bs_doc_components_tooltips}[Bootstrap Docs, window="_blank"].

++++
<!-- Dialogs - Tooltips
============================================================================ -->
<div class="bs-docs-section">
  <div class="row mb-5">

    <div class="col-md-8">
      <div class="bs-component mt-3 mb-4">
        <button type="button" class="btn btn-secondary btn-raised" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Top</button>
        <button type="button" class="btn btn-secondary btn-raised" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Bottom</button>
        <button type="button" class="btn btn-secondary btn-raised" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Right</button>
        <button type="button" class="btn btn-secondary btn-raised" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Left</button>
      </div>
    </div>

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