shards-ui
Version:
A free, modern and lightweight Bootstrap 4 UI toolkit for web makers.
1,070 lines (1,067 loc) • 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">