shards-ui
Version:
A free, modern and lightweight Bootstrap 4 UI toolkit for web makers.
2,873 lines • 147 kB
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="css/shards.min.css">
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'>
<title>Shards - Visual Regression Testing Suite</title>
</head>
<body><script id="__bs_script__">//<![CDATA[
document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.23.6'><\/script>".replace("HOST", location.hostname));
//]]></script>
<header class="container py-4">
<div class="col-lg-9 mx-auto text-center">
<h1 class="mt-4">Shards</h1>
<p class="my-2">The following page is a visual regression testing template used to ensure consistency between components when updating Shards or integrating updates for a newer version of Bootstrap.</p>
<p class="text-center text-muted">Version 1.2.0</p>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-lg-9 mx-auto">
<hr />
<!-- Theme Colors Container -->
<div class="container py-5 unit-test-color">
<div class="row">
<div class="col">
<h3 class="mb-4">Colors</h3>
</div>
</div>
<div class="row">
<div class="col">
<div class="color mb-2 p-2 bg-primary text-white">Primary</div>
<div class="color mb-2 p-2 bg-secondary text-white">Secondary</div>
<div class="color mb-2 p-2 bg-success text-white">Success</div>
<div class="color mb-2 p-2 bg-info text-white">Info</div>
<div class="color mb-2 p-2 bg-warning text-white">Warning</div>
<div class="color mb-2 p-2 bg-danger text-white">Danger</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="color mb-2 p-2 bg-light">Light</div>
<div class="color mb-2 p-2 bg-dark text-white">Dark</div>
</div>
</div>
</div>
<!-- / Theme Colors Container -->
<hr />
<div class="container py-5">
<div class="row">
<div class="col">
<h3 class="mb-4">Typography</h3>
</div>
</div>
<!-- Headings -->
<div class="row unit-test-headings">
<div class="col-lg-12 py-4">
<h5 class="text-muted mb-3">Default Headings</h5>
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
</div>
</div>
<!-- / Headings -->
<hr class="mb-4">
<!-- Paragraph Headings -->
<div class="row unit-test-headings-using-paragraphs">
<div class="col-lg-12 py-4">
<h5 class="text-muted mb-3">Paragraph Headings</h5>
<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>
</div>
</div>
<!-- / Paragraph Headings -->
<hr class="mb-4">
<!-- Displays -->
<div class="row unit-test-displays">
<div class="col-lg-12 py-4">
<h5 class="text-muted mb-3">Displays</h5>
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
</div>
</div>
<!-- / Displays -->
<hr class="mb-4">
<!-- Inline Elements -->
<div class="row unit-test-inline-elements">
<div class="col-lg-12 py-4">
<h5 class="text-muted mb-3">Inline Elements</h5>
<p>You can use the mark tag to
<mark>highlight</mark> text.</p>
<p>
<del>This line of text is meant to be treated as deleted text.</del>
</p>
<p>
<s>This line of text is meant to be treated as no longer accurate.</s>
</p>
<p>
<ins>This line of text is meant to be treated as an addition to the document.</ins>
</p>
<p>
<u>This line of text will render as underlined</u>
</p>
<p>
<small>This line of text is meant to be treated as fine print.</small>
</p>
<p>
<strong>This line rendered as bold text.</strong>
</p>
<p>
<em>This line rendered as italicized text.</em>
</p>
</div>
</div>
<!-- / Inline Elements -->
<hr class="mb-4">
<!-- Blockquote -->
<div class="row unit-test-blockquote">
<div class="col-lg-12 py-4">
<h5 class="text-muted mb-3">Blockquote</h5>
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
</div>
</div>
<!-- / Blockquote -->
<hr class="mb-4">
<!-- Blockquote with Footer -->
<div class="row unit-test-blockquote-with-footer">
<div class="col-lg-12 py-4">
<h5 class="text-muted mb-3">Blockquote with Footer</h5>
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div>
</div>
<!-- / Blockquote with Footer -->
<hr class="mb-4">
<!-- Leads -->
<div class="row unit-test-blockquote">
<div class="col-lg-12 py-4">
<h5 class="text-muted mb-3">Lead</h5>
<p class="lead"> Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. </p>
</div>
</div>
<!-- / Leads -->
</div>
<hr />
<div class="container py-5">
<div class="row">
<div class="col">
<h3 class="mb-4">Tables</h3>
</div>
</div>
<!-- Default Light Table -->
<div class="row unit-test-default-light-table">
<div class="col-lg-12 py-4">
<h5 class="text-muted mb-3">Default Table</h5>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- / Default Light Table -->
<!-- Default Dark Table -->
<div class="row unit-test-default-dark-table">
<div class="col-lg-12 py-4">
<h5 class="text-muted mb-3">Default Dark Table</h5>
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- / Default Dark Table -->
<!-- Light Table Head -->
<div class="row unit-test-table-head-light">
<div class="col-lg-12 py-4">
<h5 class="text-muted mb-3">Light Table Head</h5>
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- / Light Table Head -->
<!-- Light Table Head -->
<div class="row unit-test-table-head-dark">
<div class="col-lg-12 py-4">
<h5 class="text-muted mb-3">Dark Table Head</h5>
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- / Light Table Head -->
<!-- Light Striped Table -->
<div class="row unit-test-table-light-striped">
<div class="col-lg-12 py-4">
<h5 class="text-muted mb-3">Light Striped Table</h5>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- / Light Striped Table -->
<!-- Dark Striped Table -->
<div class="row unit-test-table-dark-striped">
<div class="col-lg-12 py-4">
<h5 class="text-muted mb-3">Dark Striped Table</h5>
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- / Dark Striped Table -->
<!-- Light Bordered Table -->
<div class="row unit-test-table-light-bordered">
<div class="col-lg-12 py-4">
<h5 class="text-muted mb-3">Light Bordered Table</h5>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- / Light Bordered Table -->
<!-- Dark Bordered Table -->
<div class="row unit-test-table-dark-bordered">
<div class="col-lg-12 py-4">
<h5 class="text-muted mb-3">Dark Bordered Table</h5>
<table class="table table-bordered table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- / Dark Bordered Table -->
<!-- Small Light Table -->
<div class="row unit-test-small-table">
<div class="col-lg-12 py-4">
<h5 class="text-muted mb-3">Small Light Table</h5>
<table class="table table-sm">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- / Small Light Table -->
<!-- Small Dark Table -->
<div class="row unit-test-small-dark-table">
<div class="col-lg-12 py-4">
<h5 class="text-muted mb-3">Small Dark Table</h5>
<table class="table table-sm table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- / Small Dark Table -->
<!-- Contextual Table Colors -->
<div class="row unit-test-contextual-table-classes">
<div class="col-lg-12 py-4">
<h5 class="text-muted mb-3">Contextual Table Colors</h5>
<table class="table">
<thead>
<tr>
<th scope="col">Class</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<th scope="row">Active</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">Default</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-primary">
<th scope="row">Primary</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-secondary">
<th scope="row">Secondary</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-success">
<th scope="row">Success</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-danger">
<th scope="row">Danger</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-warning">
<th scope="row">Warning</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-info">
<th scope="row">Info</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-light">
<th scope="row">Light</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-dark">
<th scope="row">Dark</th>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- / Contextual Table Colors -->
<!-- Contextual Table Colors -->
<div class="row unit-test-contextual-table-bg-classes">
<div class="col-lg-12 py-4">
<h5 class="text-muted mb-3">Contextual Table Background Colors</h5>
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr>
</thead>
<tbody>
<tr class="bg-primary">
<th scope="row">1</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="bg-success">
<th scope="row">3</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="bg-info">
<th scope="row">5</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="bg-warning">
<th scope="row">7</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="bg-danger">
<th scope="row">9</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">9</th>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<hr />
<div class="container py-5">
<div class="row">
<div class="col">
<h3 class="mb-4">Forms</h3>
</div>
</div>
<!-- Basic Form -->
<div class="row unit-test-forms-basic">
<div class="col py-4">
<h5 class="text-muted mb-3">Basic Form</h5>
<form novalidate class="d-block">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div>
<div class="form-group">
<label for="exampleInputPassword2">Repeat Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Repeat Password"> </div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary mt-3">Submit</button>
</form>
</div>
</div>
<!-- / Basic Form -->
<!-- Form Controls -->
<div class="row unit-test-forms-form-controls">
<div class="col-lg-12 py-4">
<h5 class="text-muted mb-3">Form Controls</h5>
<form novalidate>
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlSelect2">Example multiple select</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>1</option>
<option>2</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="form-group">
<label for="exampleFormControlSelect2">Example default checkbox</label>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1"> Default checkbox </label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
<label class="form-check-label" for="defaultCheck2"> Disabled checkbox </label>
</div>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Example default radio</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
<label class="form-check-label" for="exampleRadios1"> Default radio </label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2"> Second default radio </label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
<label class="form-check-label" for="exampleRadios3"> Disabled radio </label>
</div>
</div>
</form>
</div>
</div>
<!-- / Form Controls -->
<div class="row">
<!-- Input Sizing -->
<div class="col-lg-6 py-4 unit-test-forms-input-sizing">
<h5 class="text-muted mb-3">Input Sizing</h5>
<input class="form-control mb-3 form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control mb-3" type="text" placeholder="Default input">
<input class="form-control mb-3 form-control-sm" type="text" placeholder=".form-control-sm"> </div>
<!-- / Input Sizing -->
<!-- Select Sizing -->
<div class="col-lg-6 py-4 unit-test-forms-select-sizing">
<h5 class="text-muted mb-3">Select Sizing</h5>
<select class="form-control mb-3 form-control-lg">
<option>Large select</option>
</select>
<select class="form-control mb-3">
<option>Default select</option>
</select>
<select class="form-control form-control-sm mb-3">
<option>Small select</option>
</select>
</div>
<!-- / Select Sizing -->
</div>
<!-- Readonly Fields -->
<div class="row unit-test-forms-readonly-fields">
<div class="col-lg-12 py-4">
<h5 class="text-muted mb-3">Readonly Fields</h5>
<input class="form-control mb-3" type="text" placeholder="Readonly input here…" readonly>
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com"> </div>
</div>
<!-- / Readonly Fields -->
<!-- Form Label Sizing -->
<div class="row unit-test-forms-label-sizing">
<div class="col-lg-12 py-4">
<h5 class="text-muted mb-3">Form Label Sizing</h5>
<form novalidate>
<div class="form-group row">
<label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm"> </div>
</div>
<div class="form-group row">
<label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label"> </div>
</div>
<div class="form-group row">
<label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg"> </div>
</div>
</form>
</div>
</div>
<!-- / Form Label Sizing -->
<!-- Disabled Forms -->
<div class="row unit-test-forms-disabled">
<div class="col-lg-12 py-4">
<h5 class="text-muted mb-3">Disabled Forms</h5>
<form novalidate>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input"> </div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
<label class="form-check-label" for="disabledFieldsetCheck"> Can't check this </label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
</div>
</div>
<!-- / Disabled Forms -->
<!-- Custom Fields -->
<div class="row">
<div class="col-lg-12 py-4">
<h5 class="text-muted mb-3">Custom Fields</h5>
<!-- Custom Checkboxes, Radio Buttons, Toggles -->
<div class="row mb-4">
<!-- Custom Checkboxes -->
<div class="col unit-test-forms-custom-checkboxes">
<h6 class="text-muted">Custom Checkboxes</h6>
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Unchecked</label>
</div>
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="indeterminateCustomCheck">
<label class="custom-control-label" for="indeterminateCustomCheck">Indeterminate</label>
</div>
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="customCheck2" checked>
<label class="custom-control-label" for="customCheck2">Checked</label>
</div>
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="customCheck3" disabled>
<label class="custom-control-label" for="customCheck3">Disabled</label>
</div>
<form novalidate class="was-validated">
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="customCheck4" required>
<label class="custom-control-label" for="customCheck4">Invalid</label>
</div>
</form>
<form novalidate class="was-validated">
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="customCheck5" required checked>
<label class="custom-control-label" for="customCheck5">Valid</label>
</div>
</form>
</div>
<!-- / Custom Checkboxes -->
<!-- Custom Radio Buttons -->
<div class="col unit-test-forms-custom-radios">
<h6 class="text-muted">Custom Radios</h6>
<div class="custom-control custom-radio mb-3">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">Unchecked</label>
</div>
<div class="custom-control custom-radio mb-3">
<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input" checked>
<label class="custom-control-label" for="customRadio2">Checked</label>
</div>
<div class="custom-control custom-radio mb-3">
<input type="radio" id="customRadio3" name="customRadio" class="custom-control-input" disabled>
<label class="custom-control-label" for="customRadio3">Disabled</label>
</div>
<form novalidate class="was-validated">
<div class="custom-control custom-radio mb-3">
<input type="radio" id="customRadio4" name="customRadio" class="custom-control-input" required>
<label class="custom-control-label" for="customRadio4">Invalid</label>
</div>
</form>
<form novalidate class="was-validated">
<div class="custom-control custom-radio mb-3">
<input type="radio" id="customRadio5" name="customRadio" class="custom-control-input" required checked>
<label class="custom-control-label" for="customRadio5">Valid</label>
</div>
</form>
</div>
<!-- / Custom Radio Buttons -->
<!-- Custom Toggles -->
<div class="col unit-test-forms-custom-toggles">
<h6 class="text-muted">Custom Toggles</h6>
<!-- Default Custom Toggle -->
<div class="custom-control custom-toggle mb-3">
<input type="checkbox" id="customToggle1" name="customToggle1" class="custom-control-input">
<label class="custom-control-label" for="customToggle1">Default Toggle</label>
</div>
<!-- Checked Custom Toggle -->
<div class="custom-control custom-toggle mb-3">
<input type="checkbox" id="customToggle2" name="customToggle2" class="custom-control-input" checked>
<label class="custom-control-label" for="customToggle2">Enabled Toggle</label>
</div>
<!-- Disabled Custom Toggle -->
<div class="custom-control custom-toggle mb-3">
<input type="checkbox" id="customToggle3" name="customToggle3" class="custom-control-input" disabled>
<label class="custom-control-label" for="customToggle3">Disabled Toggle</label>
</div>
<!-- Disabled and Checked Custom Toggle -->
<div class="custom-control custom-toggle mb-3">
<input type="checkbox" id="customToggle3" name="customToggle3" class="custom-control-input" disabled checked>
<label class="custom-control-label" for="customToggle3">Disabled Toggle</label>
</div>
<!-- Invalid Custom Toggle -->
<form novalidate class="was-validated">
<div class="custom-control custom-toggle mb-3">
<input type="checkbox" id="customToggle4" name="customToggle4" class="custom-control-input" required>
<label class="custom-control-label" for="customToggle4">Invalid Toggle</label>
</div>
</form>
</div>
<!-- / Custom Toggles -->
</div>
<!-- / Custom Checkboxes, Radio Buttons, Toggles -->
<!-- Custom Select, File Inputs -->
<div class="row mb-5">
<!-- Custom Select Menus -->
<div class="col unit-test-forms-custom-select-menus">
<h6 class="text-muted">Custom Select Menus</h6>
<select class="custom-select custom-select-lg mb-3">
<option selected>Large</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="custom-select mb-3">
<option selected>Default</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="custom-select mb-3" disabled>
<option selected>Default disabled</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="custom-select custom-select-sm">
<option selected>Small</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<!-- / Custom Select Menus -->
<!-- Custom File Inputs -->
<div class="col unit-test-forms-custom-file-inputs">
<h6 class="text-muted">Custom File Inputs</h6>
<div class="custom-file mb-3">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Default custom file input</label>
</div>
<div class="custom-file mb-3">
<input type="file" class="custom-file-input" id="customFile" disabled>
<label class="custom-file-label" for="customFile">Disabled custom file input</label>
</div>
<form action="" class="was-validated mb-3" novalidate>
<div class="custom-file">
<input type="file" class="custom-file-input" id="validatedCustomFile1" required>
<label class="custom-file-label" for="validatedCustomFile1">Invalid custom file input</label>
</div>
</form>
<form action="" class="was-validated" novalidate>
<div class="custom-file">
<input type="file" class="custom-file-input" id="validatedCustomFile2">
<label class="custom-file-label" for="validatedCustomFile2">Valid custom file input</label>
</div>
</form>
</div>
<!-- / Custom File Inputs -->
</div>
<!-- / Custom Select, File Inputs -->
<!-- General Form Validation -->
<div class="row mb-4 unit-test-forms-validation">
<div class="col">
<h5 class="text-muted mb-3">Forms Validation</h5>
<form novalidate>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationServer01">First name</label>
<input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
<div class="valid-feedback"> Looks good! </div>
</div>
<div class="col-md-4 mb-3">
<label for="validationServer02">Last name</label>
<input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
<div class="valid-feedback"> Looks good! </div>
</div>
<div class="col-md-4 mb-3">
<label for="validationServerUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend3">@</span>
</div>
<input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" required>
<div class="invalid-feedback"> Please choose a username. </div>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationServer03">City</label>
<input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required>
<div class="invalid-feedback"> Please provide a valid city. </div>
</div>
<div class="col-md-3 mb-3">
<label for="validationServer04">State</label>
<input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
<div class="invalid-feedback"> Please provide a valid state. </div>
</div>
<div class="col-md-3 mb-3">
<label for="validationServer05">Zip</label>
<input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip" required>
<div class="invalid-feedback"> Please provide a valid zip. </div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
<label class="form-check-label" for="invalidCheck3"> Agree to terms and conditions </label>
<div class="invalid-feedback"> You must agree before submitting. </div>
</div>
</div>
</form>
</div>
</div>
<!-- / General Form Validation -->
<!-- Forms Validation with Tooltips -->
<div class="row mb-5 unit-test-forms-validation-tooltips">
<div class="col">
<h5 class="text-muted mb-3">Tooltips Validation</h5>
<form class="was-validated" novalidate>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationTooltip01">First name</label>
<input type="text" class="form-control" id="validationTooltip01" placeholder="First name" value="Mark" required>
<div class="valid-tooltip"> Looks good! </div>
</div>
<div class="col-md-4 mb-3">
<label for="validationTooltip02">Last name</label>
<input type="text" class="form-control" id="validationTooltip02" placeholder="Last name" value="Otto" required>
<div class="valid-tooltip"> Looks good! </div>
</div>
<div class="col-md-4 mb-3">
<label for="validationTooltipUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
</div>
<input type="text" class="form-control" id="validationTooltipUsername" placeholder="Username" aria-describedby="validationTooltipUsernamePrepend" required>
<div class="invalid-tooltip"> Please choose a unique and valid username. </div>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationTooltip03">City</label>
<input type="text" class="form-control" id="validationTooltip03" placeholder="City" required>
<div class="invalid-tooltip"> Please provide a valid city. </div>
</div>
<div class="col-md-3 mb-3">
<label for="validationTooltip04">State</label>
<input type="text" class="form-control" id="validationTooltip04" placeholder="State" required>
<div class="invalid-tooltip"> Please provide a valid state. </div>
</div>
<div class="col-md-3 mb-3">
<label for="validationTooltip05">Zip</label>
<input type="text" class="form-control" id="validationTooltip05" placeholder="Zip" required>
<div class="invalid-tooltip"> Please provide a valid zip. </div>
</div>
</div>
</form>
</div>
</div>
<!-- / Forms Validation with Tooltips -->
<!-- Input Groups -->
<h5 class="text-muted mb-3">Input Groups</h5>
<div class="row">
<div class="col unit-test-input-groups-prepend-append-both">
<h6 class="text-muted">Prepend, Append and Both</h6>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"> </div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</div>
</div>
<div class="col unit-test-input-groups-small-default-large">
<h6 class="text-muted">Small, Default, Large</h6>
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
</div>
<input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm"> </div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">Default</span>
</div>
<input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default"> </div>
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
</div>
<input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm"> </div>
</div>
</div>
<!-- Textareas -->
<div class="row mb-3">
<div class="col unit-test-input-groups-textareas">
<h6 class="text-muted">Textareas</h6>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">With textarea</span>
</div>
<textarea class="form-control" aria-label="With textarea"></textarea>
</div>
<div class="input-group">
<textarea class="form-control" aria-label="With textarea"></textarea>
<div class="input-group-append">
<span class="input-group-text">With textarea</span>
</div>
</div>
</div>
</div>
<!-- / Textareas -->
<div class="row">
<!-- Input Groups with Checkboxes -->
<div class="col unit-test-input-groups-with-checkboxes">
<h6 class="text-muted">Input Groups with Checkboxes</h6>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<div class="custom-control custom-checkbox pl-3">
<input type="checkbox" class="custom-control-input" id="inputGroupWithCheckbox">
<label class="custom-control-label" for="inputGroupWithCheckbox"></label>
</div>
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with checkbox"> </div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input"> </div>
</div>
<input type="text" class="form-control" aria-label="Text input with checkbox"> </div>
</div>
<!-- / Input Groups with Checkboxes -->
<!-- Input Groups with Radios -->
<div class="col unit-test-input-groups-with-radios">
<h6 class="text-muted">Input Groups with Radios</h6>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<div class="custom-control custom-radio pl-3">
<input type="radio" id="inputGroupWithRadio" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="inputGroupWithRadio"></label>
</div>
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with checkbox"> </div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="radio" aria-label="Checkbox for following text input"> </div>
</div>
<input type="text" class="form-control" aria-label="Text input with checkbox"> </div>
</div>
<!-- / Input Groups with Radios -->
</div>
<div class="row">
<!-- Input Groups with Icons -->
<div class="col unit-test-input-groups-with-icons">
<h6 class="text-muted">Input Groups with Icons</h6>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-user"></i>
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with checkbox"> </div>
<div class="input-group mb-3">
<input type="text" class="form-control" aria-label="Text input with checkbox">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-user"></i>
</div>
</div>
</div>
</div>
<div class="col unit-test-input-groups-with-seamless-icons">
<h6 class="text-muted">Input Groups with Seamless Icons</h6>
<div class="input-group input-group-seamless mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-user"></i>
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with checkbox"> </div>
<div class="input-group input-group-seamless mb-3">
<input type="text" class="form-control" aria-label="Text input with checkbox">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-user"></i>
</div>
</div>
</div>
</div>
</div>
<!-- / Input Groups with Icons -->
<!-- Multiple Inputs & Addons -->
<div class="row mb-3">
<div class="col unit-test-input-groups-multiple-with-addons">
<h6 class="text-muted">Multiple Inputs & Addons</h6>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="">First and last name</span>
</div>
<input type="text" class="form-control">
<input type="text" class="form-control"> </div>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
</div>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"> </div>
</div>
</div>
<!-- Multiple Inputs & Addons -->
<!-- Buttons & Dropdowns Addons -->
<div class="row mb-3">
<div class="col unit-test-input-groups-button-addons">
<h6 class="text-muted">Buttons Addons</h6>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
<input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1"> </div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
</div>
<div class="col unit-test-input-groups-dropdown-addons">
<h6 class="text-muted">Dropdowns Addons</h6>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with dropdown button"> </div>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
</div>
</div>
<!-- / Buttons & Dropdowns Addons -->
<!-- Custom File & Select Input Groups -->
<div class="row">
<div class="col unit-test-input-groups-custom-select">
<h6 class="text-muted">Custom Select</h6>
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">Options</label>
</div>
<select class="custom-select" id="inputGroupSelect01">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="input-group mb-3">
<select class="custom-select" id="inputGroupSelect02">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="input-group-append">
<label class="input-group-text" for="inputGroupSelect02">Options</label>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
<select class="custom-select" id="inputGroupSelect03">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="input-group">
<select class="custom-select" id="inputGroupSelect04">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
</div>
<div class="col unit-test-input-groups-custom-file">
<h6 class="text-muted">Custom Select</h6>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Upload</span>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile01">
<label class="custom-file-label" for="inputGroupFile01">Choose file</label>
</div>
</div>
<div class="input-group mb-3">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile02">
<label class="custom-file-label" for="inputGroupFile02">Choose file</label>
</div>
<div class="input-group-append">
<span class="input-group-text" id="">Upload</span>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile03">
<label class="custom-file-label" for="inputGroupFile03">Choose file</label>
</div>
</div>
<div class="input-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile04">
<label class="custom-file-label" for="inputGroupFile04">Choose file</label>
</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
</div>
</div>
<!-- /Custom File & Select Input Groups -->
</div>
<!-- / Input Groups -->
</div>
<!-- Custom Fields -->
</div>
<hr>
<!-- Buttons -->
<div class="container py-5">
<div class="row">
<div class="col">
<h3 class="mb-4">Buttons</h3>
</div>
</div>
<!-- Default Buttons -->
<div class="row mb-5">
<div class="col unit-test-buttons-default">
<h5 class="text-muted mb-3">Default Buttons</h5>
<div class="row mb-2">
<div class="col">
<button type="button" class="btn mr-2 btn-primary">Primary</button>
<button type="button" class="btn mr-2 btn-secondary">Secondary</button>
<button type="button" class="btn mr-2 btn-success">Success</button>
<button type="button" class="btn mr-2 btn-danger">Danger</button>
<button type="button" class="btn mr-2 btn-warning">Warning</button>
<button type="button" class="btn mr-2 btn-info">Info</button>
</div>
</div>
<div class="row">
<div class="col">
<button type="button" class="btn mr-2 btn-light">Light</button>
<button type="button" class="btn mr-2 btn-dark">Dark</button>
<div class="p-1 bg-dark d-inline-block mr-2">
<button type="button" class="btn btn-white">White</button>
</div>
<button type="button" class="btn btn-black">Black</button>
</div>
</div>
</div>
</div>
<!-- / Default Buttons -->
<!-- Outlined Buttons -->
<div class="row mb-5">
<div class="col unit-test-buttons-outlined">
<h5 class="text-muted mb-3">Outlined Buttons</h5>
<div class="row mb-2">
<div class="col">
<button type="button" class="btn mr-2 btn-outline-primary">Primary</button>
<button type="button" class="btn mr-2 btn-outline-secondary">Secondary</button>
<button type="button" class="btn mr-2 btn-outline-success">Success</button>
<button type="button" class="btn mr-2 btn-outline-danger">Danger</button>
<button type="button" class="btn mr-2 btn-outline-warning">Warning</button>
<button type="button" class="btn mr-2 btn-outline-info">Info</button>
</div>
</div>
<div class="row">
<div class="col">
<button type="button" class="btn mr-2 btn-outline-light">Light</button>
<button type="button" class="btn mr-2 btn-outline-dark">Dark</button>
<div class="p-1 bg-dark d-inline-block mr-2">
<button type="button" class="btn btn-outline-white">White</button>
</div>
<button type="button" class="btn btn-outline-black">Black</button>
</div>
</div>
</div>
</div>
<!-- / Outlined Buttons -->
<!-- Pill-shaped Buttons -->
<div class="row mb-5">
<div class="col unit-test-buttons-pill-shaped">
<h5 class="text-muted mb-3">Pill-shaped Buttons</h5>
<div class="row mb-2">
<div class="col">
<button type="button" class="btn mr-2 btn-primary btn-pill">Primary</button>
<button type="button" class="btn mr-2 btn-secondary btn-pill">Secondary</button>
<button type="button" class="btn mr-2 btn-success btn-pill">Success</button>
<button type="button" class="btn mr-2 btn-danger btn-pill">Danger</button>
<button type="button" class="btn mr-2 btn-warning btn-pill">Warning</button>
<button type="button" class="btn mr-2 btn-info btn-pill">Info</button>
</div>
</div>
<div class="row">
<div class="col">
<button type="button" class="btn mr-2 btn-light btn-pill">Light</button>
<button type="button" class="btn mr-2 btn-dark btn-pill">Dark</button>
<div class="p-1 bg-dark d-inline-block mr-2">
<button type="button" class="btn btn-white btn-pill">White</button>
</div>
<button type="button" class="btn btn-black btn-pill">Black</button>
</div>
</div>
</div>
</div>
<!-- / Pill-shaped Buttons -->
<!-- Pill-shaped Outline Buttons -->
<div class="row mb-5">
<div class="col unit-test-buttons-outlined-pill-shaped">
<h5 class="text-muted mb-3">Pill-shaped Outlined Buttons</h5>
<div class="row mb-2">
<div class="col">
<button type="button" class="btn mr-2 btn-outline-primary btn-pill">Primary</button>
<button type="button" class="btn mr-2 btn-outline-secondary btn-pill">Secondary</button>
<button type="button" class="btn mr-2 btn-outline-success btn-pill">Success</button>
<button type="button" class="btn mr-2 btn-outline-danger btn-pill">Danger</button>
<button type="button" class="btn mr-2 btn-outline-warning btn-pill">Warning</button>
<button type="button" class="btn mr-2 btn-outline-info btn-pill">Info</button>
</div>
</div>
<div class="row">
<div class="col">
<button type="button" class="btn mr-2 btn-outline-light btn-pill">Light</button>
<button type="button" class="btn mr-2 btn-outline-dark btn-pill">Dark</button>
<div class="p-1 bg-dark d-inline-block mr-2">
<button type="button" class="btn btn-outline-white btn-pill">White</button>
</div>
<button type="button" class="btn btn-outline-black btn-pill">Black</button>
</div>
</div>
</div>
</div>
<!-- / Pill-shaped Outline Buttons -->
<!-- Squared Buttons -->
<div class="row mb-5">
<div class="col unit-test-buttons-squared">
<h5 class="text-muted mb-3">Squared Buttons</h5>
<div class="row mb-2">
<div class="col">
<button type="button" class="btn mr-2 btn-primary btn-squared">Primary</button>
<button type="button" class="btn mr-2 btn-secondary btn-squared">Secondary</button>
<button type="button" class="btn mr-2 btn-success btn-squared">Success</button>
<button type="button" class="btn mr-2 btn-danger btn-squared">Danger</button>
<button type="button" class="btn mr-2 btn-warning btn-squared">Warning</button>
<button type="button" class="btn mr-2 btn-info btn-squared">Info</button>
</div>
</div>
<div class="row">
<div class="col">
<button type="button" class="btn mr-2 btn-light btn-squared">Light</button>
<button type="button" class="btn mr-2 btn-dark btn-squared">Dark</button>
<div class="p-1 bg-dark d-inline-block mr-2">
<button type="button" class="btn btn-white btn-squared">White</button>
</div>
<button type="button" class="btn btn-black btn-squared">Black</button>
</div>
</div>
</div>
</div>
<!-- / Squared Buttons -->
<!-- Squared Outline Buttons -->
<div class="row mb-5">
<div class="col unit-test-buttons-outlined-squared">
<h5 class="text-muted mb-3">Squared Outlined Buttons</h5>
<div class="row mb-2">
<div class="col">
<button type="button" class="btn mr-2 btn-outline-primary btn-squared">Primary</button>
<button type="button" class="btn mr-2 btn-outline-secondary btn-squared">Secondary</button>
<button type="button" class="btn mr-2 btn-outline-success btn-squared">Success</button>
<button type="button" class="btn mr-2 btn-outline-danger btn-squared">Danger</button>
<button type="button" class="btn mr-2 btn-outline-warning btn-squared">Warning</button>
<button type="button" class="btn mr-2 btn-outline-info btn-squared">Info</button>
</div>
</div>
<div class="row">
<div class="col">
<button type="button" class="btn mr-2 btn-outline-light btn-squared">Light</button>
<button type="button" class="btn mr-2 btn-outline-dark btn-squared">Dark</button>
<div class="p-1 bg-dark d-inline-block mr-2">
<button type="button" class="btn btn-outline-white btn-squared">White</button>
</div>
<button type="button" class="btn btn-outline-black btn-squared">Black</button>
</div>
</div>
</div>
</div>
<!-- / Squared Outline Buttons -->
</div>
<!-- / Buttons -->
<hr>
<!-- Dropdowns & Button Groups -->
<div class="container py-5">
<div class="row">
<div class="col">
<h3 class="mb-4">Dropdowns & Button Groups</h3>
</div>
</div>
<!-- Basic Dropdowns & Split Button Dropdown -->
<div class="row" style="height: 300px;">
<div class="col">
<h5 class="text-muted mb-3">Basic Dropdown</h5>
<div class="dropdown show">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown button </button>
<div class="dropdown-menu show" aria-labelledby="dropdownMenuButton">
<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>
</div>
</div>
<div class="col">
<h5 class="text-muted mb-3">Split Button Dropdown</h5>
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger 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 show">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
</div>
<!-- / Basic Dropdowns & Split Button Dropdown -->
<!-- Large & Small Default & Split Buttons -->
<div class="row mb-5">
<!-- Large button groups (default and split) -->
<div class="col">
<h5 class="text-muted mb-3">Large & Split Buttons</h5>
<div class="btn-group">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Large </button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group">
<button class="btn btn-secondary btn-lg" type="button"> Large split </button>
<button type="button" class="btn btn-lg btn-secondary 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">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
<!-- / Large button groups (default and split) -->
<!-- Small button groups (default and split) -->
<div class="col">
<h5 class="text-muted mb-3">Small & Split Buttons</h5>
<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Small button </button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group">
<button class="btn btn-secondary btn-sm" type="button"> Small split button </button>
<button type="button" class="btn btn-sm btn-secondary 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">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
<!-- / Small button groups (default and split) -->
</div>
<!-- Large & Small Default & Split Buttons -->
<!-- Dropdowns -->
<div class="row mb-5 clearfix" style="height: 180px;">
<!-- Dropdown Header -->
<div class="col">
<h5 class="text-muted mb-3">Dropdown Header</h5>
<div style="position: static;" class="dropdown-menu show">
<h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
</div>
<!-- Dropdown Header -->
<!-- Active Menu Items -->
<div class="col">
<h5 class="text-muted mb-3">Active Menu Items</h5>
<div style="position: static;" class="dropdown-menu show">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item active" href="#">Active link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
</div>
<!-- Active Menu Items -->
<!-- Disabled Menu Item -->
<div class="col">
<h5 class="text-muted mb-3">Disabled Menu Item</h5>
<div style="position: static;" class="dropdown-menu show">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item disabled" href="#">Disabled link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
</div>
<!-- Disabled Menu Item -->
</div>
<!-- / Dropdowns -->
<!-- Button Groups -->
<div class="row mb-5">
<!-- Default Button Group -->
<div class="col">
<h5 class="text-muted mb-3">Button Groups</h5>
<div class="btn-toolbar mb-4" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
</div>
<h5 class="text-muted mb-3">Button Groups With Nesting</h5>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-secondary 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="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
</div>
<!-- / Default Button Group -->
<div class="col">
<h5 class="text-muted mb-3">Button Groups Sizing</h5>
<div class="btn-group w-100 mb-2 btn-group-lg" role="group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
<div class="btn-group w-100 mb-2" role="group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
<div class="btn-group w-100 mb-2 btn-group-sm" role="group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
</div>
<!-- Button Groups -->
</div>
<!-- Dropdowns & Button Groups -->
</div>
<!-- / Dropdowns & Button Groups -->
<hr>
<!-- Navs -->
<div class="container py-5">
<div class="row">
<div class="col">
<h3 class="mb-4">Navs</h3>
</div>
</div>
<div class="row mb-5">
<!-- Basic Nav -->
<div class="col">
<h5 class="text-muted mb-3">Basic Nav</h5>
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<!-- / Basic Nav -->
<!-- Nav with Links -->
<div class="col">
<h5 class="text-muted mb-3">Nav Using Links</h5>
<nav class="nav">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#">Disabled</a>
</nav>
</div>
<!-- / Nav with Links -->
</div>
<!-- Tabbed Nav -->
<div class="row mb-5">
<div class="col">
<h5 class="text-muted mb-3">Tabbed Nav</h5>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
<!-- / Tabbed Nav -->
<!-- Tabbed Nav -->
<div class="row mb-5">
<div class="col">
<h5 class="text-muted mb-3">Tabbed with Dropdowns Nav</h5>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
<!-- / Tabbed Nav -->
<!-- Pill Nav -->
<div class="row mb-5">
<div class="col">
<h5 class="text-muted mb-3">Pill Nav</h5>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
<!-- / Pill Nav -->
<!-- Pills with Dropdowns Nav -->
<div class="row mb-5">
<div class="col">
<h5 class="text-muted mb-3">Pills with Dropdowns Nav</h5>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
<!-- / Pills with Dropdowns Nav -->
<!-- Nav Outlined Pills -->
<div class="row mb-5">
<div class="col">
<h5 class="text-muted mb-3">Nav Outlined Pills</h5>
<ul class="nav nav-outlined-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
<!-- / Nav Outlined Pills -->
<!-- Pill Nav Color Variations -->
<div class="row mb-5">
<div class="col">
<h5 class="text-muted mb-3">Pill Nav Color Variation</h5>
<ul class="nav nav-pills nav-green">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
<!-- / Pill Nav Color Variations -->
</div>
<!-- Navs -->
<hr>
<!-- Navbars -->
<div class="container py-5">
<div class="row">
<div class="col">
<h3 class="mb-4">Navbars</h3>
</div>
</div>
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-4">
<a class="navbar-brand" href="#">Shards</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown-1" aria-controls="navbarNavDropdown-1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown-1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Design</a>
<a class="dropdown-item" href="#">Development</a>
<a class="dropdown-item" href="#">Marketing</a>
</div>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-facebook"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-github"></i>
</a>
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-secondary mb-4">
<a class="navbar-brand" href="#">Shards</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown-2" aria-controls="navbarNavDropdown-2" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse mr-auto" id="navbarNavDropdown-2">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink-2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink-2">
<a class="dropdown-item" href="#">Design</a>
<a class="dropdown-item" href="#">Development</a>
<a class="dropdown-item" href="#">Marketing</a>
</div>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-facebook"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-github"></i>
</a>
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-success mb-4">
<a class="navbar-brand" href="#">Shards</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown-3" aria-controls="navbarNavDropdown-3" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse mr-auto" id="navbarNavDropdown-3">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink-3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink-3">
<a class="dropdown-item" href="#">Design</a>
<a class="dropdown-item" href="#">Development</a>
<a class="dropdown-item" href="#">Marketing</a>
</div>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-facebook"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-github"></i>
</a>
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-warning mb-4">
<a class="navbar-brand" href="#">Shards</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown-4" aria-controls="navbarNavDropdown-4" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown-4">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink-4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink-4">
<a class="dropdown-item" href="#">Design</a>
<a class="dropdown-item" href="#">Development</a>
<a class="dropdown-item" href="#">Marketing</a>
</div>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-facebook"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-github"></i>
</a>
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-danger mb-4">
<a class="navbar-brand" href="#">Shards</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown-5" aria-controls="navbarNavDropdown-5" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse mr-auto" id="navbarNavDropdown-5">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink-5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink-5">
<a class="dropdown-item" href="#">Design</a>
<a class="dropdown-item" href="#">Development</a>
<a class="dropdown-item" href="#">Marketing</a>
</div>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-facebook"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-github"></i>
</a>
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
<a class="navbar-brand" href="#">Shards</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown-6" aria-controls="navbarNavDropdown-6" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse mr-auto" id="navbarNavDropdown-6">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink-6" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink-6">
<a class="dropdown-item" href="#">Design</a>
<a class="dropdown-item" href="#">Development</a>
<a class="dropdown-item" href="#">Marketing</a>
</div>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-facebook"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-github"></i>
</a>
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
<a class="navbar-brand" href="#">Shards</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown-7" aria-controls="navbarNavDropdown-7" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown-7">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink-7" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink-7">
<a class="dropdown-item" href="#">Design</a>
<a class="dropdown-item" href="#">Development</a>
<a class="dropdown-item" href="#">Marketing</a>
</div>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-facebook"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-github"></i>
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<!-- / Navbars -->
<hr>
<!-- Cards -->
<div class="container py-5">
<div class="row">
<div class="col">
<h3 class="mb-4">Cards</h3>
</div>
</div>
<!-- Mixed cards and cards with headers and footers -->
<div class="row mb-4">
<!-- Mixed Card -->
<div class="col">
<h6 class="text-muted">Mixed Cards</h6>
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="http://via.placeholder.com/350x100" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<!-- Mixed Card -->
<!-- Card with header & footer -->
<div class="col">
<h6 class="text-muted">Card With Header & Footer</h6>
<div class="card">
<div class="card-header"> Featured </div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quam corporis recusandae odit dolorum expedita quibusdam, dignissimos asperiores eum architecto dolore sed laborum accusantium quae rerum vero facere? Ea, iusto accusantium.
Dignissimos possimus iste quasi corporis earum.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted"> 2 days ago </div>
</div>
</div>
<!-- / Card with header & footer -->
</div>
<!-- / Mixed cards and cards with headers and footers -->
<!-- Card with tabbed navigation -->
<div class="row mb-4">
<div class="col">
<h6 class="text-muted">Card with tabbed navigation</h6>
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
<!-- Card with tabbed navigation -->
<!-- Card with pills navigation -->
<div class="row mb-4">
<div class="col">
<h6 class="text-muted">Card with pills navigation</h6>
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
<!-- Card with pills navigation -->
<!-- Cards group -->
<div class="row mb-4">
<div class="col">
<h6 class="text-muted">Cards Group</h6>
<div class="card-group">
<div class="card">
<img class="card-img-top" src="http://via.placeholder.com/350x100" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="http://via.placeholder.com/350x100" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="http://via.placeholder.com/350x100" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
</div>
<!-- / Card group -->
<!-- Cards deck -->
<div class="row">
<div class="col">
<h6 class="text-muted">Cards Deck</h6>
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="http://via.placeholder.com/350x100" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="http://via.placeholder.com/350x100" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="http://via.placeholder.com/350x100" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
</div>
<!-- / Card deck -->
</div>
<!-- Cards -->
<hr>
<!-- Cards -->
<div class="container py-5">
<div class="row">
<div class="col">
<h3 class="mb-4">Pagination & Badges</h3>
</div>
</div>
<!-- Pagination -->
<div class="row">
<div class="col">
<h6 class="text-muted">Pagination</h6>
<nav>
<ul class="pagination">
<li class="page-item disabled">
<span class="page-link">Previous</span>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item active">
<span class="page-link"> 2
<span class="sr-only">(current)</span>
</span>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- / Pagination -->
<!-- Badges -->
<div class="row mb-3">
<div class="col">
<h6 class="text-muted">Normal Badges</h6>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
</div>
</div>
<div class="row mb-3">
<div class="col">
<h6 class="text-muted">Outline Badges</h6>
<span class="badge badge-outline-primary">Primary</span>
<span class="badge badge-outline-secondary">Secondary</span>
<span class="badge badge-outline-success">Success</span>
<span class="badge badge-outline-danger">Danger</span>
<span class="badge badge-outline-warning">Warning</span>
<span class="badge badge-outline-info">Info</span>
<span class="badge badge-outline-light">Light</span>
<span class="badge badge-outline-dark">Dark</span>
</div>
</div>
<div class="row mb-3">
<div class="col">
<h6 class="text-muted">Pill-shaped Badges</h6>
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>
</div>
</div>
<div class="row">
<div class="col">
<h6 class="text-muted">Mixed Badges</h6>
<span class="badge badge-pill badge-outline-primary">Primary</span>
<span class="badge badge-pill badge-outline-secondary">Secondary</span>
<span class="badge badge-pill badge-outline-success">Success</span>
<span class="badge badge-pill badge-outline-danger">Danger</span>
<span class="badge badge-pill badge-outline-warning">Warning</span>
<span class="badge badge-pill badge-outline-info">Info</span>
<span class="badge badge-pill badge-outline-light">Light</span>
<span class="badge badge-pill badge-outline-dark">Dark</span>
</div>
</div>
<!-- / Badges -->
</div>
<hr>
<!-- Alerts -->
<div class="container py-5">
<div class="row">
<div class="col">
<h3 class="mb-4">Alerts</h3>
</div>
</div>
<div class="row">
<div class="col">
<div class="alert alert-primary" role="alert"> This is a primary alert with
<a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div>
<div class="alert alert-secondary" role="alert"> This is a secondary alert with
<a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div>
<div class="alert alert-success" role="alert"> This is a success alert with
<a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div>
<div class="alert alert-danger" role="alert"> This is a danger alert with
<a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div>
<div class="alert alert-warning" role="alert"> This is a warning alert with
<a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div>
<div class="alert alert-info" role="alert"> This is a info alert with
<a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div>
<div class="alert alert-light" role="alert"> This is a light alert with
<a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div>
<div class="alert alert-dark" role="alert"> This is a dark alert with
<a href="#" class="alert-link">an example link</a>. Give it a click if you like. </div>
</div>
</div>
</div>
<!-- / Alerts -->
<hr>
<!-- Progress Bars -->
<div class="container py-5">
<div class="row">
<div class="col">
<h3 class="mb-4">Progress Bars</h3>
</div>
</div>
<div class="row">
<div class="col">
<div class="progress mb-3">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col">
<div class="progress mb-3">
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
<div class="progress-bar bg-secondary" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="progress-wrapper mb-3">
<span class="progress-label">My Fancy Label</span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 75%;">
<span class="progress-value">75%</span>
</div>
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
</div>
</div>
<div class="col">
<div class="progress progress-sm mb-3">
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-lg mb-3">
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
<!-- / Progress Bars -->
<hr>
<!-- List Groups -->
<div class="container py-5">
<div class="row">
<div class="col">
<h3 class="mb-4">List Groups</h3>
</div>
</div>
<div class="row">
<div class="col">
<div class="list-group mb-3">
<button type="button" class="list-group-item list-group-item-action active"> Cras justo odio </button>
<button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
<button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
<button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button>
</div>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center"> Cras justo odio
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center"> Dapibus ac facilisis in
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center"> Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
</div>
<div class="col">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">This is a primary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">This is a secondary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">This is a success list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">This is a danger list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">This is a warning list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">This is a info list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">This is a light list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">This is a dark list group item</a>
</div>
</div>
</div>
</div>
<!-- / List Groups -->
<hr>
<!-- Tooltips -->
<div class="container py-5">
<div class="row">
<div class="col">
<h3 class="mb-4">Tooltips</h3>
</div>
</div>
<div class="row">
<div class="col">
<button id="tooltip-0" type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top"> Tooltip on top </button>
<button id="tooltip-3" type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left"> Tooltip on left </button>
<button id="tooltip-2" type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom"> Tooltip on bottom </button>
<button id="tooltip-1" type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right"> Tooltip on right </button>
</div>
</div>
</div>
<!-- Tooltips -->
<hr>
<!-- Popovers -->
<div class="container py-5">
<div class="row">
<div class="col">
<h3 class="mb-4">Popovers</h3>
</div>
</div>
<div class="row">
<div class="col">
<button type="button" id="popover-0" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on top </button>
<button type="button" id="popover-2" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus."> Popover on bottom </button>
<button type="button" id="popover-3" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on left </button>
<button type="button" id="popover-1" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on right </button>
</div>
</div>
</div>
<!-- Popovers -->
<hr>
<!-- Carousel -->
<div class="container py-5">
<div class="row">
<div class="col">
<h3 class="mb-4">Carousel</h3>
</div>
</div>
<div class="row">
<div class="col">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<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">
<div class="carousel-item active">
<img class="d-block w-100" src="http://via.placeholder.com/600x400" alt="First slide"> </div>
<div class="carousel-item">
<img class="d-block w-100" src="http://via.placeholder.com/600x400" alt="Second slide"> </div>
<div class="carousel-item">
<img class="d-block w-100" src="http://via.placeholder.com/600x400" alt="Third slide"> </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>
<!-- Carousel -->
<hr>
<!-- Custom Sliders -->
<div class="container py-5">
<div class="row">
<div class="col">
<h3 class="mb-4">Custom Sliders</h3>
</div>
</div>
<div class="row">
<div class="col">
<div id="shards-custom-slider">
<input type="hidden" class='custom-slider-input' name="custom-slider-value-1">
<input type="hidden" class='custom-slider-input' name="custom-slider-value-2"> </div>
</div>
</div>
</div>
<!-- Custom Sliders -->
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="js/shards.min.js"></script>
<script>
(function($)
{
$(document).ready(function()
{
$('#indeterminateCustomCheck').prop('indeterminate', true);
// Enable tooltips & popovers everywhere.
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover();
// Show demo tooltips & popovers.
[0, 1, 2, 3].map(function(val)
{
$('#tooltip-' + val).tooltip('show');
$('#popover-' + val).popover('show');
});
// Initialize the custom slider.
$('#shards-custom-slider').customSlider(
{
start: [25, 50],
tooltips: [true, true],
connect: true,
range:
{
'min': 0,
'max': 100
},
pips:
{
mode: 'positions',
values: [0, 25, 50, 75, 100],
density: 5
}
});
})
})(jQuery);
</script>
</body>
</html>