Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <div class="container">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

    <a class="navbar-brand" href="#">Bootstrap v4 Samples</a>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <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="https://codepen.io/lawrencepa1988/full/RjEXzZ/" target="_blank">View Responsive Page</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-info my-2 my-sm-0" type="submit">Search</button>
      </form>


      <div class="dropdown ml-2">
        <button class="btn btn-success dropdown-toggle" type="button" id="dropdownForm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Login
  </button>
        <div class="dropdown-menu">
          <form class="px-4 py-3">
            <div class="form-group">
              <label for="exampleDropdownFormEmail1">Email address</label>
              <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
            </div>
            <div class="form-group">
              <label for="exampleDropdownFormPassword1">Password</label>
              <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
            </div>
            <div class="form-check">
              <label class="form-check-label">
        <input type="checkbox" class="form-check-input">
        Remember me
      </label>
            </div>
            <button type="submit" class="btn btn-primary">Sign in</button>
          </form>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">New around here? Sign up</a>
          <a class="dropdown-item" href="#">Forgot password?</a>
        </div>
      </div>


    </div>
  </div>
</nav>
<div class="container mb-5">
  <ul id="globalTabs" class="nav nav-tabs nav-fill mt-3">
    <li class="nav-item">
      <a class="nav-link active" href="#buttons" data-toggle="tab">Buttons</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#cards" data-toggle="tab">Cards</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#alerts" data-toggle="tab">Alerts</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#modals" data-toggle="tab">Modals</a>
    </li>
    <li id="carouselLink" class="nav-item">
      <a class="nav-link" href="#carousels" data-toggle="tab">Carousels</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#progress" data-toggle="tab">Progress</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#tooltips" data-toggle="tab">Tooltips</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#forms" data-toggle="tab">Forms</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#lists" data-toggle="tab">Lists</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#media" data-toggle="tab">Media</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#tables" data-toggle="tab">Tables</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#scrollspys" data-toggle="tab">Scrollspy</a>
    </li>
    <!-- Uncomment this to add ordering back in! -->
    <!-- li class="nav-item">
      <a class="nav-link" href="#pushpulls" data-toggle="tab">Ordering</a>
    </li-->
    <li class="nav-item">
      <a class="nav-link" href="#navs" data-toggle="tab">Navbar</a>
    </li>
  </ul>

  <div id="mainTabContent" class="tab-content">
    <!-- Buttons -->
    <div id="buttons" class="tab-pane fade active show">
      <div class="alert alert-info alert-dismissible fade show mt-3 text-center" role="alert">
        Buttons are simple but very expansive and have a lot of capability. Below are some demonstrations of the options, formats and colors!
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
      </div>

      <div class="row mt-3">
        <div class="offset-md-2 col-md-8 d-flex justify-content-between">
          <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-success">Success</button>
          <button type="button" class="btn btn-outline-info">Info</button>
          <button type="button" class="btn btn-outline-warning">Warning</button>
          <button type="button" class="btn btn-outline-danger">Danger</button>
          <button type="button" class="btn btn-outline-dark">Dark</button>
        </div>
      </div>
      <div class="row mt-3">
        <div class="offset-md-2 col-md-8 d-flex justify-content-between">
          <button type="button" class="btn btn-primary">Primary</button>
          <button type="button" class="btn btn-secondary">Secondary</button>
          <button type="button" class="btn btn-success">Success</button>
          <button type="button" class="btn btn-info">Info</button>
          <button type="button" class="btn btn-warning">Warning</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-light">Light</button>
        </div>
      </div>
      <div class="row mt-3 justify-content-center">
        <div class="btn-group" data-toggle="buttons">
          <label class="btn btn-success active">
    <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
  </label>
          <label class="btn btn-success">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
          <label class="btn btn-success">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
        </div>
      </div>
      <div class="row mt-3 justify-content-center">
        <div class="btn-group" data-toggle="buttons">
          <label class="btn btn-dark active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
          <label class="btn btn-dark">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
          <label class="btn btn-dark">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
        </div>
      </div>
      <div class="row mt-3">
        <div class="offset-md-3 col-md-6 d-flex justify-content-center">
          <button type="button" class="btn btn-primary btn-lg">Large button</button>
          <button type="button" class="btn btn-danger ml-3" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>
        </div>
      </div>
      <div class="row mt-3">
        <button type="button" class="btn btn-warning btn-lg btn-block col-md-6 offset-md-3">Block level button</button>
      </div>
      <div class="row mt-3">
        <button id="loaderButton" type="button" class="btn btn-info btn-lg btn-block col-md-6 offset-md-3" data-loading-text="Loading...">Click For Loader</button>
      </div>
      <div class="row mt-3 justify-content-center align-items-start">

        <div class="btn-group-vertical" role="group" aria-label="Button group with nested dropdown">
          <button type="button" class="btn btn-primary border-light">1</button>
          <button type="button" class="btn btn-primary border-light">2</button>

          <div class="btn-group" role="group">
            <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle border-light" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
            <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
              <a class="dropdown-item" href="#">Link 1</a>
              <a class="dropdown-item" href="#">Link 2</a>
              <a class="dropdown-item" href="#">Link 3</a>
              <a class="dropdown-item" href="#">Link 4</a>
            </div>
          </div>

          <button type="button" class="btn btn-primary border-light">4</button>
          <button type="button" class="btn btn-primary border-light">5</button>

          <div class="btn-group" role="group">
            <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle border-light" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
            <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
              <a class="dropdown-item" href="#">Link 1</a>
              <a class="dropdown-item" href="#">Link 2</a>
            </div>
          </div>
        </div>
        <div class="clearfix"></div>

        <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-primary border-light">1</button>
            <button type="button" class="btn btn-primary border-light">2</button>
            <button type="button" class="btn btn-primary border-light">3</button>
            <button type="button" class="btn btn-primary border-light">4</button>
          </div>
          <div class="btn-group mr-2" role="group" aria-label="Second group">
            <button type="button" class="btn btn-dark border-light">5</button>
            <button type="button" class="btn btn-dark border-light">6</button>
            <button type="button" class="btn btn-dark border-light">7</button>
          </div>
          <div class="btn-group mr-2" role="group" aria-label="Third group">
            <button type="button" class="btn btn-secondary">8</button>
          </div>

          <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
            <button type="button" class="btn btn-primary">1</button>
            <button type="button" class="btn btn-primary">2</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">
      Dropdown
    </button>
              <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                <a class="dropdown-item" href="#">Link 1</a>
                <a class="dropdown-item" href="#">Link 2</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Cards -->
    <div id="cards" class="tab-pane fade">
      <div class="alert alert-info alert-dismissible fade show mt-3 text-center" role="alert">
        Cards are 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.
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
      </div>
      <div class="row mt-3">
        <div class="col-md-6">
          <div class="card text-center border border-dark">
            <div class="card-header">
              <ul class="nav nav-tabs card-header-tabs " role="tablist">
                <li class="nav-item">
                  <a class="nav-link active" href="#active" data-toggle="tab">Active</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#notActive" data-toggle="tab">Not Active</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link disabled" href="#" data-toggle="tab">Disabled</a>
                </li>
              </ul>
            </div>
            <div class="card-block">
              <div class="tab-content">
                <div id="active" class="tab-pane fade active show ">
                  <h4 class="card-title">Special title treatment</h4>
                  <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
                <div id="notActive" class="tab-pane fade">
                  <h4 class="card-title">Different Title!</h4>
                  <p class="card-text">Lets change the content just a bit to show the tabs are working!</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
                <div class="tab-pane fade">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="card h-100 border border-dark">
            <img class="card-img-top" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22769%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20769%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15fef2897ee%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A38pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15fef2897ee%22%3E%3Crect%20width%3D%22769%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22266.19166564941406%22%20y%3D%22107.1%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E "
              alt="Card image cap">
            <div class="card-block">
              <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="row mt-3">
        <div class="col-md-6">
          <div class="card card-inverse card-primary mb-3 text-center">
            <div class="card-block">
              <blockquote class="card-blockquote">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
              </blockquote>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="card card-outline-primary mb-3 text-center">
            <div class="card-block">
              <blockquote class="card-blockquote">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
              </blockquote>
            </div>
          </div>
        </div>
      </div>
      <div class="row mt-3">
        <div class="col-md-6">
          <div class="card card-inverse card-success mb-3 text-center">
            <div class="card-block">
              <blockquote class="card-blockquote">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
              </blockquote>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="card card-outline-success mb-3 text-center">
            <div class="card-block">
              <blockquote class="card-blockquote">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
              </blockquote>
            </div>
          </div>
        </div>
      </div>
      <div class="row mt-3">
        <div class="col-md-6">
          <div class="card card-inverse card-info mb-3 text-center">
            <div class="card-block">
              <blockquote class="card-blockquote">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
              </blockquote>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="card card-outline-info mb-3 text-center">
            <div class="card-block">
              <blockquote class="card-blockquote">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
              </blockquote>
            </div>
          </div>
        </div>
      </div>
      <div class="row mt-3">
        <div class="col-md-6">
          <div class="card card-inverse card-warning mb-3 text-center">
            <div class="card-block">
              <blockquote class="card-blockquote">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
              </blockquote>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="card card-outline-warning mb-3 text-center">
            <div class="card-block">
              <blockquote class="card-blockquote">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
              </blockquote>
            </div>
          </div>
        </div>
      </div>
      <div class="row mt-3">
        <div class="col-md-6">
          <div class="card card-inverse card-danger mb-3 text-center">
            <div class="card-block">
              <blockquote class="card-blockquote">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
              </blockquote>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="card card-outline-danger mb-3 text-center">
            <div class="card-block">
              <blockquote class="card-blockquote">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
              </blockquote>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-12 text-center">
          <h2>Card Decks</h2>
        </div>
        <div class="col-md-12 mb-3">
          <div class="card-deck">
            <div class="card border border-dark">
              <img class="card-img-top" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22235%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20235%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15fefc6f0c0%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A12pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15fefc6f0c0%22%3E%3Crect%20width%3D%22235%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2286.79999923706055%22%20y%3D%22105.7%22%3E235x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
                alt="Card image cap">
              <div class="card-body">
                <div class="card-block">
                  <h4 class="card-title text-center text-danger">Card Deck: Item 1</h4>
                  <p class="card-text">This is a <code>card</code>, aligned within a <code>card-deck</code>.  Notice that its general size, and shape match the other cards in the deck, regardless of content?  Also notice how the <code>card-footer</code> are all aligned!</p>
                </div>
              </div>
              <div class="card-footer">
                <p class="card-text"><small class="text-muted text-center">Last updated 3 mins ago</small></p>
              </div>
            </div>
            <div class="card border border-dark">
              <img class="card-img-top" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22235%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20235%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15fefc6f0c0%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A12pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15fefc6f0c0%22%3E%3Crect%20width%3D%22235%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2286.79999923706055%22%20y%3D%22105.7%22%3E235x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
                alt="Card image cap">
              <div class="card-body">
                <div class="card-block">
                  <h4 class="card-title text-center text-info">Card Deck: Item 2</h4>
                  <p class="card-text">Smaller content to show <code>card-deck</code> resizing!</p>
                </div>
              </div>
              <div class="card-footer">
                <p class="card-text"><small class="text-muted text-center">Last updated 3 mins ago</small></p>
              </div>
            </div>

            <div class="card border border-dark">
              <img class="card-img-top" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22235%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20235%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15fefc6f0c0%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A12pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15fefc6f0c0%22%3E%3Crect%20width%3D%22235%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2286.79999923706055%22%20y%3D%22105.7%22%3E235x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
                alt="Card image cap">
              <div class="card-body">
                <div class="card-block">
                  <h4 class="card-title text-center text-success">Card Deck: Item 3</h4>
                  <p class="card-text">This is just some random text to fill up the card body, shorter than <span class="text-danger">Card 1</span>, but longer than <span class="text-info">Card 2</span>!</p>
                </div>
              </div>
              <div class="card-footer text-center">
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
              </div>
            </div>

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

    </div>
    <!-- Alerts -->
    <div id="alerts" class="tab-pane fade"> 
                  <div class="alert alert-info alert-dismissible fade show mt-3 text-center" role="alert">
  Alerts provide contextual feedback messages for typical user actions.  Alerts can be contextually styled in order to represent errors, success, or information, as well as other options.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
      <div class="row mt-3">
        <div class="col-md-12">
          <div id="noDismiss" class="alert alert-danger text-center d-none " role="alert">
            <h4 class="alert-heading font-weight-bold">Gotcha!</h4> ah, ah, ah...not today!<br />Notice I am NOT dismissable!
          </div>

          <div id="noDismissMe" class="alert alert-success alert-dismissible fade show text-center" role="alert ">
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
            <strong>Hey!</strong> Try and close me! ;)
          </div>
        </div>
      </div>
    </div>
    <!-- Modals -->
    <div id="modals" class="tab-pane fade">
                        <div class="alert alert-info alert-dismissible fade show mt-3 text-center" role="alert">
  Modals are used to add dialogs to your site for lightboxes, user notifications, or completely custom content.  I find modals great for performing CRUD operations, with a modal for each: add, edit, and delete operation.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
      <div class="row mt-3">
        <div class="col-md-10 offset-md-1">
          <div class="row justify-content-center">
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-primary mr-2" data-toggle="modal" data-target="#myModal">
  Force Selection Modal
</button>

            <button type="button" class="btn btn-success mr-2" data-toggle="modal" data-target="#exampleModalLong">
            Scrolling Modal
          </button>

            <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModalGrid">
            Grid Layout Modal
          </button>
          </div>
          <div class="row mt-3">
            <div class="col-md-12">
              <h2 class="text-center text-primary">Pass Input Params to Modal</h2>
        </div>
      </div>
      <div class="row justify-content-center">

        <button type="button" class="btn btn-info  mr-2" data-toggle="modal" data-target="#exampleModalMulti" data-whatever="@mdo">Open modal for @mdo</button>
        <button type="button" class="btn btn-warning  mr-2" data-toggle="modal" data-target="#exampleModalMulti" data-whatever="@fat">Open modal for @fat</button>
        <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModalMulti" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
      </div>

      <div class="row mt-3">
        <div class="col-md-12">
          <h2 class="text-center text-primary">Modal Size Options</h2>
        </div>
      </div>

      <div class="row justify-content-center">
        <!-- Large modal -->
        <button type="button" class="btn btn-outline-primary mr-2" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

        <!-- Small modal -->
        <button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

      </div>

      <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Lorem Ipsum</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
            </div>
            <div class="modal-body">
              <blockquote class="blockquote text-center">
                <p class="mb-0">"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
                <footer class="blockquote-footer">"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</footer>
              </blockquote>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>


      <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Lorem Ipsum</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, consectetur adipiscing elit. Sed placerat orci ante, sed tempus justo aliquet sit amet. Nunc convallis augue at ligula volutpat euismod. Nullam vehicula porta tellus quis maximus. Sed vestibulum, velit sagittis.
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>


      <!-- Modal -->
      <div class="modal fade" id="exampleModalMulti" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">New message</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
            </div>
            <div class="modal-body">
              <form>
                <div class="form-group">
                  <label for="recipient-name" class="col-form-label">Recipient:</label>
                  <input type="text" class="form-control" id="recipient-name">
                </div>
                <div class="form-group">
                  <label for="message-text" class="col-form-label">Message:</label>
                  <textarea class="form-control" id="message-text"></textarea>
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Send message</button>
            </div>
          </div>
        </div>
      </div>


      <!-- Modal -->
      <div class="modal fade" id="exampleModalGrid" 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" id="exampleModalLongTitle">Grid Layout Modal</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
            </div>
            <div class="modal-body">
              <div class="container-fluid">
                <div class="row">
                  <div class="col-md-4 bg-warning">.col-md-4</div>
                  <div class="col-md-4 ml-auto bg-warning">.col-md-4 .ml-auto</div>
                </div>
                <div class="row">
                  <div class="col-md-3 ml-auto bg-danger">.col-md-3 .ml-auto</div>
                  <div class="col-md-2 ml-auto bg-danger">.col-md-2 .ml-auto</div>
                </div>
                <div class="row">
                  <div class="col-md-6 ml-auto bg-warning">.col-md-6 .ml-auto</div>
                </div>
                <div class="row">
                  <div class="col-sm-9 bg-danger">
                    Level 1: .col-sm-9
                    <div class="row">
                      <div class="col-8 col-sm-6 bg-danger">
                        Level 2: .col-8 .col-sm-6
                      </div>
                      <div class="col-4 col-sm-6 bg-warning">
                        Level 2: .col-4 .col-sm-6
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </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" id="exampleModalLongTitle">Long Scroll Modal</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>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>

              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>

              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>

              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>

              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>

              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>

              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>

              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>

              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>

              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>

              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>

              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>

              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>

              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>

              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>

              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>

              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>

              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>

      <!-- Modal -->
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Disable Esc/Click Closure</h5>
            </div>
            <div class="modal-body">
              By adding <code>data-backdrop="static "</code> and <code>data-keyboard="false "</code> to the modal div, we can disable the ability for the user to click outside of the modal to close, or to use the escape button to close. This will be useful
              in order to force a user to select a presented option or click the close button.
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Carousels -->
<div id="carousels" class="tab-pane fade">
  <div class="alert alert-info alert-dismissible fade show mt-3 text-center" role="alert">
    A slideshow component for cycling through elements—images or slides of text—like a carousel. Carousel also allows you to cycle through custom div content and does not require an image!
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  </div>
  <div class="row mt-3">
    <div class="col-md-12 d-flex justify-content-center">
      <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="3000">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
          <div class="carousel-item active">
            <img class="d-block img-fluid" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ff02200e0%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ff02200e0%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9000015258789%22%20y%3D%22218.3%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
              alt="First slide">
            <div class="carousel-caption d-none d-md-block">
              <h3>Caption One</h3>
              <p>Description 1</p>
            </div>
          </div>
          <div class="carousel-item">
            <img class="d-block img-fluid" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ff02200e2%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ff02200e2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.2916717529297%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
              alt="Second slide">
            <div class="carousel-caption d-none d-md-block">
              <h3>Caption Two</h3>
              <p>Description 2</p>
            </div>
          </div>
          <div class="carousel-item">
            <img class="d-block img-fluid" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ff02200e4%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ff02200e4%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22276.9749984741211%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
              alt="Third slide">
            <div class="carousel-caption d-none d-md-block">
              <h3>Caption Three</h3>
              <p>Description 3</p>
            </div>
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" 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>
</div>
<!-- Progress Bar -->
<div id="progress" class="tab-pane fade">
  <div class="alert alert-info alert-dismissible fade show mt-3 text-center" role="alert">
    Progress bars are used to represent a level of completion, but can also be used to show a current running task. These progress bars can be contextually colored and designed.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  </div>
  <div class="row mt-3 justify-content-center">
    <div class="col-md-12 mt-3">
      <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>
    <div class="col-md-12 mt-3">
      <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>
    <div class="col-md-12 mt-3">
      <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>
    <div class="col-md-12 mt-3">
      <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>
    <div class="col-md-12 mt-3">
      <div id="progressChange" class="progress">
        <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
    </div>
  </div>
  <div class="row justify-content-center">
    <button id="progressChanger" class="btn btn-primary mt-3">Change Progress</button>
  </div>
</div>
<!-- Tooltips -->
<div id="tooltips" class="tab-pane fade">
  <div class="alert alert-info alert-dismissible fade show mt-3 text-center" role="alert">
    Tooltips are simply hoverable popovers that can be applied to almost any object to display a styled title.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  </div>
  <div class="row mt-3 justify-content-center">
    <div>
      <p>
        Tight pants next level keffiyeh <a href="#" class="text-info" data-toggle="tooltip" title="" data-original-title="Tooltip 1" data-placement="top">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag
        stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel <a href="#" class="text-info" data-toggle="tooltip"
          title="" data-original-title="Tooltip 2" data-placement="right">williamsburg</a> marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle <a href="#" class="text-info"
          data-toggle="tooltip" title="" data-original-title="Tooltip 3" data-placement="bottom">freegan</a> cred raw denim single-origin coffee viral.
      </p>
    </div>
  </div>
</div>
<!-- Tables -->
<div id="tables" class="tab-pane fade">
  <div class="alert alert-info alert-dismissible fade show mt-3 text-center" role="alert">
    Tables are highly configurable, but I would recommend for large amounts of data, to use Datatables.net with the bootstrap stylesheet!
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  </div>
  <div class="row mt-3">
    <div class="col-12">
      <ul class="nav nav-tabs nav-fill" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" id="home-tab" data-toggle="tab" href="#bootstrap-table" role="tab" aria-controls="home" aria-selected="true">Bootstrap Table</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="profile-tab" data-toggle="tab" href="#datatables" role="tab" aria-controls="profile" aria-selected="false">Datatable w/Bootstrap Theme</a>
        </li>
      </ul>


      <div class="tab-content">
        <div class="tab-pane fade show active" id="bootstrap-table" role="tabpanel" aria-labelledby="home-tab">
          <div class="col-12 pl-0 pr-0 mt-3">
            <table id="example-table" class="table">
              <thead class="thead-dark">
                <tr>
                  <th>#</th>
                  <th>Column heading</th>
                  <th>Column heading</th>
                  <th>Column heading</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>
                  <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>
                  <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>
                  <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>
                  <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>
                  <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>
                  <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>
                  <td>Column content</td>
                  <td>Column content</td>
                  <td>Column content</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <div class="tab-pane fade" id="datatables" role="tabpanel" aria-labelledby="profile-tab">
          <div class="col-12 pl-0 pr-0 mt-3">
            <table id="example" class="table">
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Position</th>
                  <th>Office</th>
                  <th>Age</th>
                  <th>Start date</th>
                  <th>Salary</th>
                </tr>
              </thead>
              <!-- Uncomment for footer!
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
-->
              <tbody>
                <tr>
                  <td>Tiger Nixon</td>
                  <td>System Architect</td>
                  <td>Edinburgh</td>
                  <td>61</td>
                  <td>2011/04/25</td>
                  <td>$320,800</td>
                </tr>
                <tr>
                  <td>Garrett Winters</td>
                  <td>Accountant</td>
                  <td>Tokyo</td>
                  <td>63</td>
                  <td>2011/07/25</td>
                  <td>$170,750</td>
                </tr>
                <tr class="table-info">
                  <td>Ashton Cox</td>
                  <td>Junior Technical Author</td>
                  <td>San Francisco</td>
                  <td>66</td>
                  <td>2009/01/12</td>
                  <td>$86,000</td>
                </tr>
                <tr class="table-success">
                  <td>Cedric Kelly</td>
                  <td>Senior Javascript Developer</td>
                  <td>Edinburgh</td>
                  <td>22</td>
                  <td>2012/03/29</td>
                  <td>$433,060</td>
                </tr>
                <tr class="table-danger">
                  <td>Airi Satou</td>
                  <td>Accountant</td>
                  <td>Tokyo</td>
                  <td>33</td>
                  <td>2008/11/28</td>
                  <td>$162,700</td>
                </tr>
                <tr class="table-warning">
                  <td>Brielle Williamson</td>
                  <td>Integration Specialist</td>
                  <td>New York</td>
                  <td>61</td>
                  <td>2012/12/02</td>
                  <td>$372,000</td>
                </tr>
                <tr class="table-active">
                  <td>Herrod Chandler</td>
                  <td>Sales Assistant</td>
                  <td>San Francisco</td>
                  <td>59</td>
                  <td>2012/08/06</td>
                  <td>$137,500</td>
                </tr>
                <tr>
                  <td>Rhona Davidson</td>
                  <td>Integration Specialist</td>
                  <td>Tokyo</td>
                  <td>55</td>
                  <td>2010/10/14</td>
                  <td>$327,900</td>
                </tr>
                <tr>
                  <td>Colleen Hurst</td>
                  <td>Javascript Developer</td>
                  <td>San Francisco</td>
                  <td>39</td>
                  <td>2009/09/15</td>
                  <td>$205,500</td>
                </tr>
                <tr>
                  <td>Sonya Frost</td>
                  <td>Software Engineer</td>
                  <td>Edinburgh</td>
                  <td>23</td>
                  <td>2008/12/13</td>
                  <td>$103,600</td>
                </tr>
                <tr>
                  <td>Jena Gaines</td>
                  <td>Office Manager</td>
                  <td>London</td>
                  <td>30</td>
                  <td>2008/12/19</td>
                  <td>$90,560</td>
                </tr>
                <tr>
                  <td>Quinn Flynn</td>
                  <td>Support Lead</td>
                  <td>Edinburgh</td>
                  <td>22</td>
                  <td>2013/03/03</td>
                  <td>$342,000</td>
                </tr>
                <tr>
                  <td>Charde Marshall</td>
                  <td>Regional Director</td>
                  <td>San Francisco</td>
                  <td>36</td>
                  <td>2008/10/16</td>
                  <td>$470,600</td>
                </tr>
                <tr>
                  <td>Haley Kennedy</td>
                  <td>Senior Marketing Designer</td>
                  <td>London</td>
                  <td>43</td>
                  <td>2012/12/18</td>
                  <td>$313,500</td>
                </tr>
                <tr>
                  <td>Tatyana Fitzpatrick</td>
                  <td>Regional Director</td>
                  <td>London</td>
                  <td>19</td>
                  <td>2010/03/17</td>
                  <td>$385,750</td>
                </tr>
                <tr>
                  <td>Michael Silva</td>
                  <td>Marketing Designer</td>
                  <td>London</td>
                  <td>66</td>
                  <td>2012/11/27</td>
                  <td>$198,500</td>
                </tr>
                <tr>
                  <td>Paul Byrd</td>
                  <td>Chief Financial Officer (CFO)</td>
                  <td>New York</td>
                  <td>64</td>
                  <td>2010/06/09</td>
                  <td>$725,000</td>
                </tr>
                <tr>
                  <td>Gloria Little</td>
                  <td>Systems Administrator</td>
                  <td>New York</td>
                  <td>59</td>
                  <td>2009/04/10</td>
                  <td>$237,500</td>
                </tr>
                <tr>
                  <td>Bradley Greer</td>
                  <td>Software Engineer</td>
                  <td>London</td>
                  <td>41</td>
                  <td>2012/10/13</td>
                  <td>$132,000</td>
                </tr>
                <tr>
                  <td>Dai Rios</td>
                  <td>Personnel Lead</td>
                  <td>Edinburgh</td>
                  <td>35</td>
                  <td>2012/09/26</td>
                  <td>$217,500</td>
                </tr>
                <tr>
                  <td>Jenette Caldwell</td>
                  <td>Development Lead</td>
                  <td>New York</td>
                  <td>30</td>
                  <td>2011/09/03</td>
                  <td>$345,000</td>
                </tr>
                <tr>
                  <td>Yuri Berry</td>
                  <td>Chief Marketing Officer (CMO)</td>
                  <td>New York</td>
                  <td>40</td>
                  <td>2009/06/25</td>
                  <td>$675,000</td>
                </tr>
                <tr>
                  <td>Caesar Vance</td>
                  <td>Pre-Sales Support</td>
                  <td>New York</td>
                  <td>21</td>
                  <td>2011/12/12</td>
                  <td>$106,450</td>
                </tr>
                <tr>
                  <td>Doris Wilder</td>
                  <td>Sales Assistant</td>
                  <td>Sidney</td>
                  <td>23</td>
                  <td>2010/09/20</td>
                  <td>$85,600</td>
                </tr>
                <tr>
                  <td>Angelica Ramos</td>
                  <td>Chief Executive Officer (CEO)</td>
                  <td>London</td>
                  <td>47</td>
                  <td>2009/10/09</td>
                  <td>$1,200,000</td>
                </tr>
                <tr>
                  <td>Gavin Joyce</td>
                  <td>Developer</td>
                  <td>Edinburgh</td>
                  <td>42</td>
                  <td>2010/12/22</td>
                  <td>$92,575</td>
                </tr>
                <tr>
                  <td>Jennifer Chang</td>
                  <td>Regional Director</td>
                  <td>Singapore</td>
                  <td>28</td>
                  <td>2010/11/14</td>
                  <td>$357,650</td>
                </tr>
                <tr>
                  <td>Brenden Wagner</td>
                  <td>Software Engineer</td>
                  <td>San Francisco</td>
                  <td>28</td>
                  <td>2011/06/07</td>
                  <td>$206,850</td>
                </tr>
                <tr>
                  <td>Fiona Green</td>
                  <td>Chief Operating Officer (COO)</td>
                  <td>San Francisco</td>
                  <td>48</td>
                  <td>2010/03/11</td>
                  <td>$850,000</td>
                </tr>
                <tr>
                  <td>Shou Itou</td>
                  <td>Regional Marketing</td>
                  <td>Tokyo</td>
                  <td>20</td>
                  <td>2011/08/14</td>
                  <td>$163,000</td>
                </tr>
                <tr>
                  <td>Michelle House</td>
                  <td>Integration Specialist</td>
                  <td>Sidney</td>
                  <td>37</td>
                  <td>2011/06/02</td>
                  <td>$95,400</td>
                </tr>
                <tr>
                  <td>Suki Burks</td>
                  <td>Developer</td>
                  <td>London</td>
                  <td>53</td>
                  <td>2009/10/22</td>
                  <td>$114,500</td>
                </tr>
                <tr>
                  <td>Prescott Bartlett</td>
                  <td>Technical Author</td>
                  <td>London</td>
                  <td>27</td>
                  <td>2011/05/07</td>
                  <td>$145,000</td>
                </tr>
                <tr>
                  <td>Gavin Cortez</td>
                  <td>Team Leader</td>
                  <td>San Francisco</td>
                  <td>22</td>
                  <td>2008/10/26</td>
                  <td>$235,500</td>
                </tr>
                <tr>
                  <td>Martena Mccray</td>
                  <td>Post-Sales support</td>
                  <td>Edinburgh</td>
                  <td>46</td>
                  <td>2011/03/09</td>
                  <td>$324,050</td>
                </tr>
                <tr>
                  <td>Unity Butler</td>
                  <td>Marketing Designer</td>
                  <td>San Francisco</td>
                  <td>47</td>
                  <td>2009/12/09</td>
                  <td>$85,675</td>
                </tr>
                <tr>
                  <td>Howard Hatfield</td>
                  <td>Office Manager</td>
                  <td>San Francisco</td>
                  <td>51</td>
                  <td>2008/12/16</td>
                  <td>$164,500</td>
                </tr>
                <tr>
                  <td>Hope Fuentes</td>
                  <td>Secretary</td>
                  <td>San Francisco</td>
                  <td>41</td>
                  <td>2010/02/12</td>
                  <td>$109,850</td>
                </tr>
                <tr>
                  <td>Vivian Harrell</td>
                  <td>Financial Controller</td>
                  <td>San Francisco</td>
                  <td>62</td>
                  <td>2009/02/14</td>
                  <td>$452,500</td>
                </tr>
                <tr>
                  <td>Timothy Mooney</td>
                  <td>Office Manager</td>
                  <td>London</td>
                  <td>37</td>
                  <td>2008/12/11</td>
                  <td>$136,200</td>
                </tr>
                <tr>
                  <td>Jackson Bradshaw</td>
                  <td>Director</td>
                  <td>New York</td>
                  <td>65</td>
                  <td>2008/09/26</td>
                  <td>$645,750</td>
                </tr>
                <tr>
                  <td>Olivia Liang</td>
                  <td>Support Engineer</td>
                  <td>Singapore</td>
                  <td>64</td>
                  <td>2011/02/03</td>
                  <td>$234,500</td>
                </tr>
                <tr>
                  <td>Bruno Nash</td>
                  <td>Software Engineer</td>
                  <td>London</td>
                  <td>38</td>
                  <td>2011/05/03</td>
                  <td>$163,500</td>
                </tr>
                <tr>
                  <td>Sakura Yamamoto</td>
                  <td>Support Engineer</td>
                  <td>Tokyo</td>
                  <td>37</td>
                  <td>2009/08/19</td>
                  <td>$139,575</td>
                </tr>
                <tr>
                  <td>Thor Walton</td>
                  <td>Developer</td>
                  <td>New York</td>
                  <td>61</td>
                  <td>2013/08/11</td>
                  <td>$98,540</td>
                </tr>
                <tr>
                  <td>Finn Camacho</td>
                  <td>Support Engineer</td>
                  <td>San Francisco</td>
                  <td>47</td>
                  <td>2009/07/07</td>
                  <td>$87,500</td>
                </tr>
                <tr>
                  <td>Serge Baldwin</td>
                  <td>Data Coordinator</td>
                  <td>Singapore</td>
                  <td>64</td>
                  <td>2012/04/09</td>
                  <td>$138,575</td>
                </tr>
                <tr>
                  <td>Zenaida Frank</td>
                  <td>Software Engineer</td>
                  <td>New York</td>
                  <td>63</td>
                  <td>2010/01/04</td>
                  <td>$125,250</td>
                </tr>
                <tr>
                  <td>Zorita Serrano</td>
                  <td>Software Engineer</td>
                  <td>San Francisco</td>
                  <td>56</td>
                  <td>2012/06/01</td>
                  <td>$115,000</td>
                </tr>
                <tr>
                  <td>Jennifer Acosta</td>
                  <td>Junior Javascript Developer</td>
                  <td>Edinburgh</td>
                  <td>43</td>
                  <td>2013/02/01</td>
                  <td>$75,650</td>
                </tr>
                <tr>
                  <td>Cara Stevens</td>
                  <td>Sales Assistant</td>
                  <td>New York</td>
                  <td>46</td>
                  <td>2011/12/06</td>
                  <td>$145,600</td>
                </tr>
                <tr>
                  <td>Hermione Butler</td>
                  <td>Regional Director</td>
                  <td>London</td>
                  <td>47</td>
                  <td>2011/03/21</td>
                  <td>$356,250</td>
                </tr>
                <tr>
                  <td>Lael Greer</td>
                  <td>Systems Administrator</td>
                  <td>London</td>
                  <td>21</td>
                  <td>2009/02/27</td>
                  <td>$103,500</td>
                </tr>
                <tr>
                  <td>Jonas Alexander</td>
                  <td>Developer</td>
                  <td>San Francisco</td>
                  <td>30</td>
                  <td>2010/07/14</td>
                  <td>$86,500</td>
                </tr>
                <tr>
                  <td>Shad Decker</td>
                  <td>Regional Director</td>
                  <td>Edinburgh</td>
                  <td>51</td>
                  <td>2008/11/13</td>
                  <td>$183,000</td>
                </tr>
                <tr>
                  <td>Michael Bruce</td>
                  <td>Javascript Developer</td>
                  <td>Singapore</td>
                  <td>29</td>
                  <td>2011/06/27</td>
                  <td>$183,000</td>
                </tr>
                <tr>
                  <td>Donna Snider</td>
                  <td>Customer Support</td>
                  <td>New York</td>
                  <td>27</td>
                  <td>2011/01/25</td>
                  <td>$112,000</td>
                </tr>
              </tbody>
            </table>
          </div>


        </div>
      </div>

    </div>
  </div>

  <div class="row mt-3 justify-content-center">
    <div id="table-changer" class="btn-group" data-toggle="buttons">
      <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Regular Table
  </label>
      <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off">Small
  </label>
      <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off">Striped
  </label>
      <label class="btn btn-secondary">
    <input type="radio" name="options" id="option4" autocomplete="off">Bordered
  </label>
      <label class="btn btn-secondary">
    <input type="radio" name="options" id="option5" autocomplete="off">Hoverable
  </label>
      <label class="btn btn-secondary">
    <input type="radio" name="options" id="option6" autocomplete="off">Responsive
  </label>
    </div>
  </div>
</div>
<!-- Forms -->
<div id="forms" class="tab-pane fade">
  <div class="alert alert-info alert-dismissible fade show mt-3 text-center" role="alert">
    Form inputs are highly stylized with Bootstrap and provide a much better user interface than the stock HTML5 elements.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  </div>
  <div class="row mt-3 d-flex align-items-center">
    <div class="col-3">
      <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>
    <div class="col-3">
      <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        <small id="passwordHelp" class="form-text text-muted">Shhh, don't tell anyone!</small>
      </div>
    </div>
    <div class="col-3 d-flex justify-content-center">
      <div class="form-check">
        <label class="form-check-label">
      <input type="checkbox" class="form-check-input">
      Check me out
    </label>
      </div>
    </div>
    <div class="col-3">
      <div class="form-check">
        <label class="form-check-label">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" 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 class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" 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 class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
    Option three is disabled
  </label>
      </div>
    </div>
  </div>

  <div class="row mt-3 d-flex align-items-center">
    <div class="col-3">
      <label for="exampleInputEmail1">File Selector</label>
      <label class="custom-file">
  <input type="file" id="file2" class="custom-file-input">
  <span class="custom-file-control"></span>
</label>
    </div>
    <div class="col-3">
      <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
      <input class="form-control" type="text" placeholder="Default input">
      <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
    </div>
    <div class="col-3">
      <select class="form-control form-control-lg">
  <option>Large select</option>
</select>
      <select class="form-control">
  <option>Default select</option>
</select>
      <select class="form-control form-control-sm">
  <option>Small select</option>
</select>
    </div>
    <div class="col-3">
      <label for="exampleInputEmail1">Read Only</label>
      <input class="form-control" type="text" placeholder="Readonly input here…" readonly>
    </div>
  </div>


  <div class="row mt-3 d-flex align-items-center">
    <div class="col-3">
      <div class="input-group">
        <span class="input-group-addon">$</span>
        <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
        <span class="input-group-addon">.00</span>
      </div>
    </div>
    <div class="col-3">
      <div class="input-group input-group-lg">
        <span class="input-group-addon" id="sizing-addon1">@</span>
        <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="sizing-addon1">
      </div>
      <br>
      <div class="input-group input-group-sm">
        <span class="input-group-addon" id="sizing-addon2">@</span>
        <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="sizing-addon2">
      </div>
    </div>
    <div class="col-3">
      <div class="input-group">
        <div class="input-group-btn">
          <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Search
        </button>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            <div role="separator" class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Separated link</a>
          </div>
        </div>
        <input type="text" class="form-control" aria-label="Text input with dropdown button">
      </div>
    </div>
    <div class="col-3">
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
        <div class="input-group-btn">
          <button type="button" class="btn btn-secondary">Go</button>
          <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span class="sr-only">Toggle Dropdown</span>
        </button>
          <div class="dropdown-menu dropdown-menu-right">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            <div role="separator" class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Separated link</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row mt-3 d-flex justify-content-center">
    <div class="col-12 d-flex justify-content-center">

      <h2 data-toggle="tooltip" title="" data-original-title="This is a plugin, and does not come with Bootstrap v4." data-placement="top">Multiselect Plugin</h2>
    </div>
    <div class="col-12 d-flex justify-content-center">
      <!-- Build your select: -->
      <select id="example-getting-started" multiple="multiple">
        <option value="1">Jquery</option>
        <option value="2">Bootstrap</option>
        <option value="3">Material</option>
        <option value="4">Angular</option>
        <option value="5">Knockout</option>
        <option value="6">D3.js</option>
    </select>
    </div>
  </div>


  <!-- Big Form -->
  <div class="row mt-5 justify-content-center">
    <h2 data-toggle="tooltip" title="" data-original-title="This is using the JQuery Validation libary." data-placement="top">Form With Validation</h2>
  </div>
  <div class="row mt-3">
    <form id="big-form" class="col-12" novalidate="novalidate">
      <div class="form-row">
        <div class="form-group col-md-6">
          <label for="email">Email</label>
          <input type="email" class="form-control invalid" id="email" name="email" placeholder="Email" data-msg-email="Please enter a valid email address." data-msg="Email address is required." required>
          <div class="valid-feedback">
            WAM!
          </div>
        </div>
        <div class="form-group col-md-6">
          <label for="inputPassword4">Password</label>
          <input type="password" class="form-control" id="password" placeholder="Password" data-msg="Password is required." data-msg-minlength="Password must be at least 8 characters." minlength="8" required>
          <div class="valid-feedback">
            BANG!
          </div>
        </div>
      </div>
      <div class="form-group">
        <label for="inputAddress">Address</label>
        <input type="text" class="form-control" id="address" placeholder="1234 Main St" data-msg="Address is required." data-msg-minlength="Address must be at least 8 characters." minlength="8" required>
        <div class="valid-feedback">
          POW!
        </div>
      </div>
      <div class="form-group">
        <label for="inputAddress2">Address 2</label>
        <input type="text" class="form-control" id="address2" placeholder="Apartment, studio, or floor">
      </div>
      <div class="form-row">
        <div class="form-group col-md-6">
          <label for="inputCity">City</label>
          <input type="text" class="form-control" id="city" data-msg="City is required." data-msg-minlength="City must be at least 2 characters." minlength="2" required>
          <div class="valid-feedback">
            KA-BOOM!
          </div>
        </div>
        <div class="form-group col-md-4">
          <label for="inputState">State</label>
          <select id="inputState" class="form-control custom-select" data-msg="A state must be selected." required>
        <option value="" selected>Choose...</option>
	<option value="AL">Alabama</option>
	<option value="AK">Alaska</option>
	<option value="AZ">Arizona</option>
	<option value="AR">Arkansas</option>
	<option value="CA">California</option>
	<option value="CO">Colorado</option>
	<option value="CT">Connecticut</option>
	<option value="DE">Delaware</option>
	<option value="DC">District Of Columbia</option>
	<option value="FL">Florida</option>
	<option value="GA">Georgia</option>
	<option value="HI">Hawaii</option>
	<option value="ID">Idaho</option>
	<option value="IL">Illinois</option>
	<option value="IN">Indiana</option>
	<option value="IA">Iowa</option>
	<option value="KS">Kansas</option>
	<option value="KY">Kentucky</option>
	<option value="LA">Louisiana</option>
	<option value="ME">Maine</option>
	<option value="MD">Maryland</option>
	<option value="MA">Massachusetts</option>
	<option value="MI">Michigan</option>
	<option value="MN">Minnesota</option>
	<option value="MS">Mississippi</option>
	<option value="MO">Missouri</option>
	<option value="MT">Montana</option>
	<option value="NE">Nebraska</option>
	<option value="NV">Nevada</option>
	<option value="NH">New Hampshire</option>
	<option value="NJ">New Jersey</option>
	<option value="NM">New Mexico</option>
	<option value="NY">New York</option>
	<option value="NC">North Carolina</option>
	<option value="ND">North Dakota</option>
	<option value="OH">Ohio</option>
	<option value="OK">Oklahoma</option>
	<option value="OR">Oregon</option>
	<option value="PA">Pennsylvania</option>
	<option value="RI">Rhode Island</option>
	<option value="SC">South Carolina</option>
	<option value="SD">South Dakota</option>
	<option value="TN">Tennessee</option>
	<option value="TX">Texas</option>
	<option value="UT">Utah</option>
	<option value="VT">Vermont</option>
	<option value="VA">Virginia</option>
	<option value="WA">Washington</option>
	<option value="WV">West Virginia</option>
	<option value="WI">Wisconsin</option>
	<option value="WY">Wyoming</option>
      </select>
          <div class="valid-feedback">
            GONG!
          </div>
        </div>
        <div class="form-group col-md-2">
          <label for="inputZip">Zip</label>
          <input type="text" class="form-control" id="zip" data-msg-pattern="Please enter a valid 5 digit zip." data-msg="Zip is required." pattern="[0-9]{5}" required>
          <div class="valid-feedback">
            CRASH!
          </div>
        </div>
      </div>
      <button type="submit" class="btn btn-info">Submit</button>
    </form>
  </div>
</div>
<!-- List Groups -->
<div id="lists" class="tab-pane fade">
  <div class="alert alert-info alert-dismissible fade show mt-3 text-center" role="alert">
    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.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  </div>
  <div class="row mt-3">
    <div class="col-4">
      <div class="list-group" id="list-tab" role="tablist">
        <a class="list-group-item list-group-item-action d-flex justify-content-between align-items-center active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">What is Lorem Ipsum<span class="badge badge-dark badge-pill">2</span></a>
        <a class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Where does it come from<span class="badge badge-success badge-pill">14</span></a>
        <a class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Why do we use it<span class="badge badge-warning badge-pill">8</span></a>
        <a class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Where can I get some<span class="badge badge-danger badge-pill">21</span></a>
      </div>
    </div>
    <div class="col-8">
      <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
          <div class="row">
            <h2 class="font-italic">What is Lorem Ipsum?</h2>
          </div>
          <div class="row">
            <p><span class="font-weight-bold ">Lorem Ipsum</span> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
              scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
              Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
          </div>
        </div>
        <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
          <div class="row">
            <h2 class="font-italic">Where does it come from?</h2>
          </div>
          <div class="row">
            <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia,
              looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
              of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..",
              comes from a line in section 1.10.32.</p>

            <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English
              versions from the 1914 translation by H. Rackham.
            </p>
          </div>
        </div>
        <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">
          <div class="row">
            <h2 class="font-italic">Why do we use it?</h2>
          </div>
          <div class="row">
            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content
              here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
              Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
            </p>
          </div>
        </div>
        <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">
          <div class="row">
            <h2 class="font-italic">Where can I get some?</h2>
          </div>
          <div class="row">
            <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of
              Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.
              It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic
              words etc.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row mt-3">
    <div class="col-md-5 text-center">
      <h2 class="font-italic text-primary">
            Custom List Object
          </h2>
    </div>
    <div class="col-md-5 offset-md-2 text-center">
      <h2 class="font-italic text-primary">
            Contextual List Classes
          </h2>
    </div>
    <div class="col-md-5">
      <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active" data-toggle="list">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">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" data-toggle="list">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">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>
        <a href="#" class="list-group-item list-group-item-action flex-column align-items-start" data-toggle="list">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">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 class="col-md-5 offset-md-2">
      <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action" data-toggle="list">Dapibus ac facilisis in</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-primary" data-toggle="list">This is a primary list group item</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-secondary" data-toggle="list">This is a secondary list group item</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-success" data-toggle="list">This is a success list group item</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-danger" data-toggle="list">This is a danger list group item</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-warning" data-toggle="list">This is a warning list group item</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-info" data-toggle="list">This is a info list group item</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-light" data-toggle="list">This is a light list group item</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-dark" data-toggle="list">This is a dark list group item</a>
      </div>

    </div>
  </div>

</div>
<!-- Media -->
<div id="media" class="tab-pane fade">


  <div class="alert alert-info alert-dismissible fade show mt-3 text-center" role="alert">
    The media object helps build complex and repetitive components where some media is positioned alongside content that doesn’t wrap around said media.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true ml-3">&times;</span>
  </button>
  </div>

  <div class="row mt-3">
    <div class="col-12">
      <div class="media">
        <img class="mr-3" src="https://lh3.googleusercontent.com/6geoqgXLoeCK4-A1xxkR9KcGcI_KF23SGeHX1sAM2gauaIhNp515feFNS3ML1zmCugI=w128" width="128" height="128" alt="Generic placeholder image">
        <div class="media-body">
          <h5 class="mt-0">Super Mario</h5>
          <strong class="lead">Mario</strong> is a fictional character in the Mario video game franchise, owned by Nintendo and created by Japanese video game designer Shigeru Miyamoto. Serving as the company's mascot and the eponymous protagonist of
          the series, Mario has appeared in over 200 video games since his creation. Depicted as a short, pudgy, Italian plumber who resides in the Mushroom Kingdom, his adventures generally center upon rescuing Princess Peach from the Koopa villain Bowser.
          His younger brother and sidekick is Luigi.

          <div id="baby-mario" class="media mt-3">
            <a class="pr-3 mr-1" href="#">
              <img src="https://img00.deviantart.net/8659/i/2008/305/b/f/super_baby_mario_by_nintendrawer.png" width="64" height="80" alt="Generic placeholder image">
            </a>
            <div class="media-body">
              <h5 class="mt-0">Baby Mario</h5>
              <strong class="lead">Baby Mario</strong> makes his debut in Super Mario World 2: Yoshi's Island (and plays the same role in the remake Yoshi's Island: Super Mario Advance 3). Here, the Stork is on his way to deliver Baby Mario and Baby Luigi
              to their parents in the Mushroom Kingdom. Kamek, however, has predicted that the Mario Brothers will cause problems for the Koopas in the future, and he attempts to kidnap the babies. He successfully kidnaps Baby Luigi and the Stork. Baby
              Mario falls into Yoshi's Island and lands on the back of Yoshi. Yoshi brings Baby Mario to the other Yoshis, and they decide to help Baby Mario rescue Baby Luigi from Kamek and Baby Bowser. After they journey throughout the worlds, they
              reach Baby Bowser's Castle, where they battle Baby Bowser. After defeating him, Yoshi and Baby Mario rescue Baby Luigi. Then, the brothers are brought back to their parents.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row mt-3 justify-content-center">
    <div id="media-changer" class="btn-group" data-toggle="buttons">
      <label class="btn btn-secondary active">
    <input type="radio" name="options" id="top" autocomplete="off" checked> Top Align
  </label>
      <label class="btn btn-secondary">
    <input type="radio" name="options" id="center" autocomplete="off">Center Align
  </label>
      <label class="btn btn-secondary">
    <input type="radio" name="options" id="bottom" autocomplete="off">Bottom Align
  </label>
    </div>
  </div>

  <div class="row mt-3 justify-content-center">
    <div id="media-align" class="btn-group" data-toggle="buttons">
      <label class="btn btn-primary active">
    <input type="radio" name="options" id="left" autocomplete="off" checked> Left Align
  </label>
      <label class="btn btn-primary">
    <input type="radio" name="options" id="right" autocomplete="off"> Right Align
  </label>
    </div>
  </div>

</div>
<!-- Scrollspy -->
<div id="scrollspys" class="tab-pane fade">
  <div class="alert alert-info alert-dismissible fade show mt-3 text-center" role="alert">
    Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  </div>
  <div class="row mt-3">
    <div class="col-4">
      <nav id="navbar-example3" class="navbar navbar-light bg-light flex-column">
        <a class="navbar-brand" href="#">Navbar</a>
        <nav class="nav nav-pills flex-column">
          <a class="nav-link active" href="#item-1">Item 1</a>
          <nav class="nav nav-pills flex-column">
            <a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
            <a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
          </nav>
          <a class="nav-link" href="#item-2">Item 2</a>
          <a class="nav-link" href="#item-3">Item 3</a>
          <nav class="nav nav-pills flex-column">
            <a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
            <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
          </nav>
        </nav>
      </nav>
    </div>
    <div class="col-8">
      <div data-spy="scroll" data-target="#navbar-example3" data-offset="0" class="scrollspy-example-2 position-relative  pre-scrollable">
        <h4 id="item-1" style="">Item 1</h4>
        <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore
          proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat
          id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.</p>
        <h5 id="item-1-1" style="">Item 1-1</h5>
        <p>Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum commodo Lorem et occaecat elit qui et. Aliquip labore ex ex esse voluptate occaecat Lorem ullamco deserunt. Aliqua cillum excepteur irure consequat id quis ea. Sit proident ullamco
          aute magna pariatur nostrud labore. Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur consequat eu commodo fugiat non quis. Enim aliquip exercitation ullamco adipisicing voluptate excepteur minim exercitation
          minim minim commodo adipisicing exercitation officia nisi adipisicing. Anim id duis qui consequat labore adipisicing sint dolor elit cillum anim et fugiat.</p>
        <h5 id="item-1-2" style="">Item 1-2</h5>
        <p>Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure laboris mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna occaecat. Nulla ipsum cillum eiusmod sint elit excepteur
          ea labore enim consectetur in labore anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla in non consequat eiusmod velit incididunt.</p>
        <h4 id="item-2" style="">Item 2</h4>
        <p>Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem.
          Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat
          ex est consectetur ipsum commodo tempor sunt in proident.</p>
        <h4 id="item-3" style="">Item 3</h4>
        <p>Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat
          mollit culpa irure ullamco est ex ullamco excepteur.</p>
        <h5 id="item-3-1" style="">Item 3-1</h5>
        <p>Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem proident nostrud. Ea id dolore anim exercitation aute fugiat labore voluptate cillum do laboris labore. Ex velit exercitation nisi enim labore reprehenderit labore nostrud ut ut.
          Esse officia sunt duis aliquip ullamco tempor eiusmod deserunt irure nostrud irure. Ullamco proident veniam laboris ea consectetur magna sunt ex exercitation aliquip minim enim culpa occaecat exercitation. Est tempor excepteur aliquip laborum
          consequat do deserunt laborum esse eiusmod irure proident ipsum esse qui.</p>
        <h5 id="item-3-2" style="">Item 3-2</h5>
        <p>Labore sit culpa commodo elit adipisicing sit aliquip elit proident voluptate minim mollit nostrud aute reprehenderit do. Mollit excepteur eu Lorem ipsum anim commodo sint labore Lorem in exercitation velit incididunt. Occaecat consectetur nisi
          in occaecat proident minim enim sunt reprehenderit exercitation cupidatat et do officia. Aliquip consequat ad labore labore mollit ut amet. Sit pariatur tempor proident in veniam culpa aliqua excepteur elit magna fugiat eiusmod amet officia.
        </p>
      </div>
    </div>
  </div>
</div>
<!-- Ordering -->
<div id="pushpulls" class="tab-pane fade">
  <div class="alert alert-info alert-dismissible fade show mt-3 text-center" role="alert">
    Bootstrap media queries allow for easy restyling of a page based on the window size. This is very helpful when writing an app for both desktop and mobile view. Click the "View Responsive Page" on the Nav-Bar for a full page example!
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  </div>
  <div class="row mt-3">
    <div class="col-6 order-xs-1 order-sm-2 order-lg-1 bg-light text-right ordering-example">This is First</div>
    <div class="col-6 order-xs-2 order-sm-1 order-lg-2 text-light bg-dark ordering-example">This is Second</div>
    <div class="col-12 col-md-4 col-lg-3 order-3 order-lg-3 order-sm-6 bg-primary text-right ordering-example">This is Third</div>
    <div class="col-12 col-md-4 col-lg-3 order-4 order-lg-4 order-sm-5 bg-warning ordering-example">This is Fourth</div>
    <div class="col-12 col-md-4 col-lg-3 order-5 order-lg-5 order-sm-4 bg-success text-right ordering-example">This is Fifth</div>
    <div class="col-12 col-lg-3 order-6 order-lg-6 order-sm-3 bg-danger ordering-example">This is Sixth</div>
  </div>
</div>
<!-- Navigation Bar -->
<div id="navs" class="tab-pane fade">
  <div class="alert alert-info alert-dismissible fade show mt-3 text-center" role="alert">
    Bootstrap navs and Nav-bar provide a very stylized option for navigation including: Tabs, Pills, Positional Navigation Bars, and resizing and justify options.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  </div>
  <div class="row mt-3 justify-content-center">
    <div id="navSelection" class="btn-group" data-toggle="buttons">
      <label class="btn btn-dark active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked>Top Nav
  </label>
      <label class="btn btn-dark">
    <input type="radio" name="options" id="option2" autocomplete="off">Sticky Top Nav
  </label>
      <label class="btn btn-dark">
    <input type="radio" name="options" id="option3" autocomplete="off">Bottom nav
  </label>
    </div>
  </div>


</div>
</div>

</div>

<footer class="footer mt-3 bg-primary">
  <div class="row">
    <div class="container-fluid">
      <div class="float-right text-light pr-3">
        <a class="text-light" href="https://bootswatch.com/" target="_blank">Themes</a>
        <span> / </span>
        <a class="text-light" href="https://getbootstrap.com/docs/4.0/getting-started/introduction/" target="_blank">Bootstrap Documentation</a>
      </div>
    </div>
  </div>
</footer>
              
            
!

CSS

              
                .ordering-example {
  height: 50px;
}

.card-block {
  padding: 1.25rem;
}

.card-inverse {
  color: rgba(255, 255, 255, 0.80);
}

.card-primary {
  background-color: #0275d8;
  border-color: #0275d8;
}

.card-outline-primary {
  border-color: #0275d8;
}

.card-success {
  background-color: #5cb85c;
  border-color: #5cb85c;
}

.card-outline-success {
  border-color: #5cb85c;
}

.card-info {
  background-color: #5bc0de;

  border-color: #5bc0de;
}

.card-outline-info {
  border-color: #5bc0de;
}

.card-warning {
  background-color: #f0ad4e;

  border-color: #f0ad4e;
}

.card-outline-warning {
  border-color: #f0ad4e;
}

.card-danger {
  background-color: #d9534f;

  border-color: #d9534f;
}

.card-outline-danger {
  border-color: #d9534f;
}

//This is screwed up in sketchy?  Not sure why it swaps to relative but this overrides it!
.alert-dismissible button.close:hover {
  position: absolute !important;
}


//This is used for the custom-file-control to remove the "Choose File" label once a file is selected.
.custom-file-control.selected:lang(en)::after {
  content: "" !important;
}

//Custom footer that goes with the sketchy theme!
.footer {  
border-width: 2px;
border-style: solid;
border-radius: 25px 25px 55px 5px/5px 55px 25px 25px;

position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
  
//position: sticky;
//bottom: 0;
width: 100%;
height: 30px;
line-height: 30px;
z-index: 1000;
}
              
            
!

JS

              
                //Enable tooltips
$(function() {
  $('[data-toggle="tooltip"]').tooltip();
  
  $('#example-getting-started').multiselect({
    includeSelectAllOption: true,
    buttonClass: 'btn btn-info',
    maxHeight: 200
  });
});

//Because multiple tab panes are left active sometimes...
$("#globalTabs > .nav-item").on("click", function() {
  $("#mainTabContent > .tab-pane").removeClass("active");
});

//When the dismissable alert is closed, remove
//the display none from the non dismissable alert.
$("#noDismissMe").on("closed.bs.alert", function() {
  $("#noDismiss").removeClass("d-none");
});

//This was built INTO bootstrap 3, but seems to be missing from bootstrap 4, so here is an example.
$("button.btn[data-loading-text]").on("click", function() {
  //get button clicked
  var $btn = $(this);
  //get the current text.
  var dataText = $btn.text();
  //get the attribute value!
  var dataLoadingText = $btn.attr("data-loading-text");
  //Make sure that a value was provided on the attribute.
  if (
    typeof dataLoadingText !== typeof undefined &&
    dataLoadingText !== false
  ) {
    //Value was provided, change button text, then disable.
    $btn.text(dataLoadingText).addClass("disabled");
    // simulating a timeout, in a real situation
    // we would perform a long running action.
    setTimeout(function() {
      $btn.removeClass("disabled");
      $btn.text(dataText);
    }, 2500);
  }
});

//Change the classes on the navbar
$("#navSelection input[type=radio]").change(function() {
  if ($(this).attr("id") == "option1") {
    $("nav").removeClass("fixed-bottom");
    $("nav").removeClass("sticky-top");
  }

  if ($(this).attr("id") == "option2") {
    $("nav").removeClass("fixed-bottom");
    $("nav").addClass("sticky-top");
  }

  if ($(this).attr("id") == "option3") {
    $("nav").addClass("fixed-bottom");
    $("nav").removeClass("sticky-top");
  }
});

//This is a simple function to update the progress bar
//by 10% on click.  The code can be used easily on a real
//world example as well.
$("#progressChanger").on("click", function() {
  //Gets the current value!  This could also be done by pulling the
  //attributes aria-valuenow, aria-valuemin, and aria-valuemax...but
  //only if they were used, as they are not required.
  var progVal = Math.round(
    100 *
      parseInt($("#progressChange .progress-bar").css("width")) /
      parseInt(
        $("#progressChange .progress-bar")
          .parent()
          .css("width")
      )
  );
  //If we are at 100...reset to 0!
  if (progVal == 100) {
    progVal = 0;
  }

  //This is where the actual bar is changed!
  $("#progressChange .progress-bar").css("width", progVal + 10 + "%");
});

//Below is added because currently "nesting" carousels is not supported.  Basically what happens is when the "active" class is removed from tabs, it's also being removed from the carousel items...when nothing is active the carousel breaks.  This just puts the active class back on the first element of the carousel.  The delay is because this will execute BEFORE the code that is removing the active class.
$("#carouselLink").on("click", function() {
  setTimeout(function() {
    $(
      "#carouselExampleIndicators .carousel-inner .carousel-item:first-child"
    ).addClass("active");
  }, 100);
});

//This gets the value from the button clicked and uses it for updating
//the modal content before opening.
$("#exampleModalMulti").on("show.bs.modal", function(event) {
  var button = $(event.relatedTarget); // Button that triggered the modal
  var recipient = button.data("whatever"); // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this);
  modal.find(".modal-title").text("New message to " + recipient);
  modal.find(".modal-body input").val(recipient);
});


//This just changes the classes on the tables depending on which
//radio is selected.
$("#table-changer label input").on("change", function() {
  var _dataTable = $('#example').DataTable();
  var _id = $(this).attr("id");
  var _table = $("#example-table, #example");
  switch (_id) {
    case "option1":
      //remove all classes
      _table.removeClass();
      _table.addClass("table");
      _dataTable.destroy();
      initDataTable();
      break;
    case "option2":
      //remove all classes
      _table.removeClass();
      _table.addClass("table table-sm");
      _dataTable.destroy();
      initDataTable();
      break;
    case "option3":
      //remove all classes
      _table.removeClass();
      _table.addClass("table table-striped");
      _dataTable.destroy();
      initDataTable();
      break;
    case "option4":
      //remove all classes
      _table.removeClass();
      _table.addClass("table table-bordered ");
      _dataTable.destroy();
      initDataTable();
      break;
    case "option5":
      //remove all classes
      _table.removeClass();
      _table.addClass("table table-hover");
      _dataTable.destroy();
      initDataTable();
      break;
    case "option6":
      //remove all classes
      _table.removeClass();
      _table.addClass("table table-responsive-lg");
      _dataTable.destroy();
      initDataTable();
      break;
  }
});

$("#media-align label input").on("change", function() {
  var _id = $(this).attr("id");
  var _media = $("#baby-mario > a");
  
  switch(_id){
    case "left":
      //remove all classes
      var _temp = _media.detach();
      _temp.prependTo($("#baby-mario"));
      break;
    case "right":
      //remove all classes
      var _temp = _media.detach();
      _temp.appendTo($("#baby-mario"));
      break;
  }
});


$("#media-changer label input").on("change", function() {
  var _id = $(this).attr("id");
  var _media = $("#baby-mario > a");
  switch (_id) {
    case "top":
      //remove all classes
      _media.removeClass();
      _media.addClass("align-self-start pr-3 mr-1");
      break;
    case "center":
      //remove all classes
      _media.removeClass();
      _media.addClass("align-self-center pr-3 mr-1");
      break;
    case "bottom":
      //remove all classes
      _media.removeClass();
      _media.addClass("align-self-end pr-3 mr-1");
      break;    
  }
});


//Init datatables
$(document).ready(function() {
initDataTable();
});

function initDataTable(){
    $("#example").DataTable({
    lengthMenu: [7, 25, 50, 75, 100]
  });
}


//Validation
$.validator.setDefaults({
  invalidHandler: function(event, validator) {
    var errors = validator.numberOfInvalids();
    if (errors) {
      $("#big-form").addClass("was-validated");
    } else {
      $("div.error").hide();
    }
  }
});

$(document).ready(function() {
  $("#big-form").validate({
    debug: true,
    errorElement: "em",
    errorPlacement: function(error, element) {
      error
        .removeClass("valid-feedback")
        .addClass("invalid-feedback form-control-feedback");
      error.insertAfter(element);
    },
    highlight: function(element) {
      $(element)
        .closest(".form-control")
        .removeClass("is-valid")
        .addClass("is-invalid");
    },
    success: function(element) {
      $(element).removeClass("invalid-feedback")
        .prev(".form-control")
        .removeClass("is-invalid")
        .addClass("is-valid");
    }
  });
});

//This updates the file name on the "custom-file" input
$(".custom-file-input").on("change", function() {
  //Gets the file selected, full path.
  var fileName = $(this).val();
  //split on the path designators
  var splits = fileName.split("\\");
  //get just the file name minus the path information, truncate at 17 chars
  fileName = splits[splits.length - 1].substring(0, 17) + "...";

  //Find the following span which shows the "Choose File"
  //make it show as selected which will update our custom
  //css rule for .select::after and remove "choose file".
  $(this)
    .next(".custom-file-control")
    .addClass("selected")
    .html(fileName);
});

              
            
!
999px

Console