diff --git a/frontend/src/components/Sidebar.vue b/frontend/src/components/Sidebar.vue
index 10428c0..b6dd9dc 100644
--- a/frontend/src/components/Sidebar.vue
+++ b/frontend/src/components/Sidebar.vue
@@ -33,6 +33,12 @@
<span class="align-middle">Admin</span>
</router-link>
</li>
+ <li class="sidebar-item">
+ <router-link to="/swatch" class="sidebar-link">
+ <b-icon-gear class="bi-valign-middle"></b-icon-gear>
+ <span class="align-middle">Swatch</span>
+ </router-link>
+ </li>
</ul>
</div>
</nav>
diff --git a/frontend/src/router.js b/frontend/src/router.js
index 6db5b83..0a3432b 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -17,6 +17,8 @@ import Files from '@/views/Files.vue';
const routes = [
{path: '/', component: Dashboard, meta: {requiresAuth: true}},
+ {path: '/profile', component: Profile, meta: {requiresAuth: true}},
+ {path: '/settings', component: Settings, meta: {requiresAuth: true}},
{path: '/inventory', component: Inventory, meta: {requiresAuth: true}},
{path: '/inventory/:id', component: InventoryDetail, meta: {requiresAuth: true}, props: true},
{path: '/inventory/:id/edit', component: InventoryEdit, meta: {requiresAuth: true}, props: true},
@@ -48,4 +50,4 @@ router.beforeEach((to/*, from*/) => {
}
})
-export default router
\ No newline at end of file
+export default router
diff --git a/frontend/src/views/Admin.vue b/frontend/src/views/Admin.vue
index f2db343..53ff1ba 100644
--- a/frontend/src/views/Admin.vue
+++ b/frontend/src/views/Admin.vue
@@ -92,7 +92,7 @@ import * as BIcons from "bootstrap-icons-vue";
import BaseLayout from "@/components/BaseLayout.vue";
export default {
- name: "Inventory",
+ name: "Admin",
components: {
BaseLayout,
...BIcons
diff --git a/frontend/src/views/Swatch.vue b/frontend/src/views/Swatch.vue
new file mode 100644
index 0000000..a88d38c
--- /dev/null
+++ b/frontend/src/views/Swatch.vue
@@ -0,0 +1,4907 @@
+<template>
+ <BaseLayout>
+ <main class="content">
+
+ <div class="container-fluid example-container">
+ <h1>Brand color</h1>
+
+ <div class="mt-3 mb-5">
+ <h3>Theme colors</h3>
+ <div class="p-2 mb-2 bg-primary text-white">.bg-primary</div>
+ <div class="p-2 mb-2 bg-secondary text-white">.bg-secondary</div>
+ <div class="p-2 mb-2 bg-success text-white">.bg-success</div>
+ <div class="p-2 mb-2 bg-danger text-white">.bg-danger</div>
+ <div class="p-2 mb-2 bg-warning text-white">.bg-warning</div>
+ <div class="p-2 mb-2 bg-info text-white">.bg-info</div>
+ <div class="p-2 mb-2 bg-light text-gray-dark">.bg-light</div>
+ <div class="p-2 mb-2 bg-dark text-white">.bg-dark</div>
+ <div class="p-2 mb-2 bg-white text-gray-dark">.bg-white</div>
+ </div>
+
+ <div class="mt-3 mb-5">
+ <h3>Gradient of grey</h3>
+ <div class="p-2 mb-2 swatch-100">.swatch-100</div>
+ <div class="p-2 mb-2 swatch-200">.swatch-200</div>
+ <div class="p-2 mb-2 swatch-300">.swatch-300</div>
+ <div class="p-2 mb-2 swatch-400">.swatch-400</div>
+ <div class="p-2 mb-2 swatch-500">.swatch-500</div>
+ <div class="p-2 mb-2 swatch-600">.swatch-600</div>
+ <div class="p-2 mb-2 swatch-700">.swatch-700</div>
+ <div class="p-2 mb-2 swatch-800">.swatch-800</div>
+ <div class="p-2 mb-2 swatch-900">.swatch-900</div>
+ </div>
+ </div>
+
+ <!-- Links -->
+ <div class="container-fluid example-container" data-category="links">
+ <h1>Links</h1>
+
+ <div class="mt-3 mb-5">
+ <h3>Default Link</h3>
+ <a href="javascript:void(0);">Exemple link</a>
+ </div>
+
+ <div class="mt-3 mb-5">
+ <h3>Link inside an alert</h3>
+ <div class="alert alert-primary" role="alert">
+ This is a primary alert with
+ <a href="javascript:void(0);" class="alert-link">an example link</a>. Give it a click if you
+ like.
+ </div>
+ </div>
+ </div>
+
+ <!-- Grid -->
+ <div class="container-fluid example-container" data-category="grid">
+ <h1>Grid</h1>
+
+ <div>
+ <div class="bs-example-row">
+ <!-- Bootstrap Grid -->
+ <div class="row">
+ <div class="col-sm-1">.col-sm-1</div>
+ <div class="col-sm-1">.col-sm-1</div>
+ <div class="col-sm-1">.col-sm-1</div>
+ <div class="col-sm-1">.col-sm-1</div>
+ <div class="col-sm-1">.col-sm-1</div>
+ <div class="col-sm-1">.col-sm-1</div>
+ <div class="col-sm-1">.col-sm-1</div>
+ <div class="col-sm-1">.col-sm-1</div>
+ <div class="col-sm-1">.col-sm-1</div>
+ <div class="col-sm-1">.col-sm-1</div>
+ <div class="col-sm-1">.col-sm-1</div>
+ <div class="col-sm-1">.col-sm-1</div>
+ </div>
+ <div class="row">
+ <div class="col-sm-2">.col-sm-2</div>
+ <div class="col-sm-3">.col-sm-3</div>
+ <div class="col-sm-7">.col-sm-7</div>
+ </div>
+ <div class="row">
+ <div class="col-sm-4">.col-sm-4</div>
+ <div class="col-sm-4">.col-sm-4</div>
+ <div class="col-sm-4">.col-sm-4</div>
+ </div>
+ <div class="row">
+ <div class="col-sm-5">.col-sm-5</div>
+ <div class="col-sm-7">.col-sm-7</div>
+ </div>
+ <div class="row">
+ <div class="col-sm-6">.col-sm-6</div>
+ <div class="col-sm-6">.col-sm-6</div>
+ </div>
+ <div class="row">
+ <div class="col-sm-12">.col-sm-12</div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Fonts -->
+ <div class="container-fluid example-container" data-category="fonts">
+ <h1>Fonts</h1>
+
+ <div>
+ <h1>h1 </h1>
+ <h2>h2 </h2>
+ <h3>h3 </h3>
+ <h4>h4 </h4>
+ <h5>h5 </h5>
+ <h6>h6 </h6>
+
+ <br>
+
+ <h1>Heading 1
+ <small>Sub-heading</small>
+ </h1>
+ <h2>Heading 2
+ <small>Sub-heading</small>
+ </h2>
+ <h3>Heading 3
+ <small>Sub-heading</small>
+ </h3>
+ <h4>Heading 4
+ <small>Sub-heading</small>
+ </h4>
+ <h5>Heading 5
+ <small>Sub-heading</small>
+ </h5>
+ <h6>Heading 6
+ <small>Sub-heading</small>
+ </h6>
+
+ <br>
+
+ <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>
+
+ <br>
+
+ <p class="lead">
+ This is the article lead — it stands out at the start of the article.
+ </p>
+
+ <p>
+ This is normal text at the normal size etc...
+ </p>
+
+ <p>Sample
+ <mark>marked text</mark>
+ .
+ </p>
+
+ <br>
+ <blockquote class="blockquote">
+ <p>The most important moment of your life is now. The most important person in your life is the
+ one you are with now,
+ and the most important activity in your life is the one you are involved with now.</p>
+ </blockquote>
+ </div>
+ </div>
+
+
+ <!-- Buttons -->
+ <div class="container-fluid example-container" data-category="buttons">
+ <h1>Buttons</h1>
+
+ <div class="mt-3 mb-5">
+ <h3>Default buttons</h3>
+ <button type="button" class="btn btn-primary">Primary</button>
+ <button type="button" class="btn btn-secondary">Secondary</button>
+ <button type="button" class="btn btn-info">Info</button>
+ <button type="button" class="btn btn-success">Success</button>
+ <button type="button" class="btn btn-warning">Warning</button>
+ <button type="button" class="btn btn-danger">Danger</button>
+ <button type="button" class="btn btn-light">Light</button>
+ <button type="button" class="btn btn-dark">Dark</button>
+ <button type="button" class="btn btn-link">Link</button>
+ </div>
+
+ <div class="mt-3 mb-5">
+ <h3>Buttons with outline</h3>
+ <button type="button" class="btn btn-outline-primary">Primary</button>
+ <button type="button" class="btn btn-outline-secondary">Secondary</button>
+ <button type="button" class="btn btn-outline-info">Info</button>
+ <button type="button" class="btn btn-outline-success">Success</button>
+ <button type="button" class="btn btn-outline-warning">Warning</button>
+ <button type="button" class="btn btn-outline-danger">Danger</button>
+ <button type="button" class="btn btn-outline-light">Light</button>
+ <button type="button" class="btn btn-outline-dark">Dark</button>
+ </div>
+
+
+ <div class="mt-3 mb-5">
+ <h3>Buttons sizes</h3>
+ <button type="button" class="btn btn-success btn-sm">Small</button>
+ <button type="button" class="btn btn-success">Default</button>
+ <button type="button" class="btn btn-success btn-lg">Large</button>
+
+ <br>
+
+ <button type="button" class="btn btn-danger btn-lg btn-block">Block level button</button>
+ </div>
+
+
+ <div class="mt-3 mb-5">
+ <h3>Disabled button</h3>
+ <p>
+ <a href="javascript:void(0);" class="btn btn-primary btn-lg disabled" role="button">The 'a'
+ Element</a>
+ </p>
+
+ <p>
+ <button type="button" class="btn btn-lg btn-primary" disabled="disabled">The 'button' Element
+ </button>
+ </p>
+
+ <p>
+ <input type="button" class="btn btn-lg btn-primary" disabled="disabled"
+ value="The 'input' Element">
+ </p>
+ </div>
+
+ <div class="mt-3 mb-5">
+ <h3>Checkbox buttons</h3>
+ <div class="btn-group" data-toggle="buttons">
+ <label class="btn btn-primary active">
+ <input type="checkbox" checked autocomplete="off"> Boots
+ </label>
+ <label class="btn btn-primary">
+ <input type="checkbox" autocomplete="off"> Shoes
+ </label>
+ <label class="btn btn-primary">
+ <input type="checkbox" autocomplete="off"> Feet
+ </label>
+ </div>
+ </div>
+
+
+ <div class="mt-3 mb-5">
+ <h3>Radio buttons</h3>
+ <div class="btn-group" data-toggle="buttons">
+ <label class="btn btn-primary">
+ <input type="radio" name="options" id="boots" autocomplete="off" checked> Boots
+ </label>
+ <label class="btn btn-primary">
+ <input type="radio" name="options" id="shoes" autocomplete="off"> Shoes
+ </label>
+ <label class="btn btn-primary">
+ <input type="radio" name="options" id="feet" autocomplete="off"> Feet
+ </label>
+ </div>
+ </div>
+ </div>
+
+ <!-- Forms -->
+ <div class="container-fluid example-container" data-category="forms">
+ <h1>Forms</h1>
+
+
+ <div class="mt-3 mb-5">
+ <h3>Default form group</h3>
+ <form action="javascript:void(0);">
+ <fieldset class="form-group">
+ <label for="first_name">First Name</label>
+ <input type="text" class="form-control" id="first_name" name="first_name">
+ </fieldset>
+ <fieldset class="form-group">
+ <label for="last_name">Last Name</label>
+ <input type="text" class="form-control" id="last_name" name="last_name">
+ </fieldset>
+ <button type="submit" class="btn btn-default">Submit</button>
+ </form>
+ </div>
+
+ <h3>Inline form</h3>
+
+ <div class="mt-3 mb-5">
+ <form action="javascript:void(0);" class="form-inline">
+ <label class="mr-sm-2 mb-0" for="first_name">First Name</label>
+ <input type="text" class="form-control mr-sm-2 mb-2 mb-sm-0" id="first_name" name="first_name">
+ <label class="mr-sm-2 mb-0" for="last_name">Last Name</label>
+ <input type="text" class="form-control mr-sm-2 mb-2 mb-sm-0" id="last_name" name="last_name">
+ <button type="submit" class="btn btn-default mt-2 mt-sm-0">Submit</button>
+ </form>
+ </div>
+
+ <h3>Aligned form</h3>
+
+ <div class="mt-3 mb-5">
+ <div class="container">
+ <form action="javascript:void(0);">
+ <div class="form-group row">
+ <label for="first_name" class="col-xs-3 col-form-label mr-2">First Name</label>
+ <div class="col-xs-9">
+ <input type="text" class="form-control" id="first_name" name="first_name">
+ </div>
+ </div>
+ <div class="form-group row">
+ <label for="last_name" class="col-xs-3 col-form-label mr-2">Last Name</label>
+ <div class="col-xs-9">
+ <input type="text" class="form-control" id="last_name" name="last_name">
+ </div>
+ </div>
+ <div class="form-group row">
+ <div class="offset-xs-3 col-xs-9">
+ <button type="submit" class="btn btn-default">Submit</button>
+ </div>
+ </div>
+ </form>
+ </div>
+ </div>
+
+ <div>
+ <div class="container">
+ <form action="javascript:void(0);">
+ <fieldset class="form-group">
+ <div class="row">
+ <legend class="col-form-legend col-3">Fruit</legend>
+ <div class="col-9">
+ <div class="form-check">
+ <label class="form-check-label">
+ <input class="form-check-input" type="radio" name="legendRadio"
+ id="legendRadio1" value="1"> Apple
+ </label>
+ </div>
+ <div class="form-check">
+ <label class="form-check-label">
+ <input class="form-check-input" type="radio" name="legendRadio"
+ id="legendRadio2" value="2" checked> Orange
+ </label>
+ </div>
+ <div class="form-check">
+ <label class="form-check-label">
+ <input class="form-check-input" type="radio" name="legendRadio"
+ id="legendRadio3" value="3"> Watermelon
+ </label>
+ </div>
+ </div>
+ </div>
+ </fieldset>
+
+ <div class="form-group row">
+ <label for="first_name" class="col-3 col-form-label">First Name</label>
+ <div class="col-9">
+ <input type="text" class="form-control" id="first_name" name="first_name">
+ </div>
+ </div>
+ <div class="form-group row">
+ <label for="last_name" class="col-3 col-form-label">Last Name</label>
+ <div class="col-9">
+ <input type="text" class="form-control" id="last_name" name="last_name">
+ </div>
+ </div>
+
+ <div class="form-group row">
+ <div class="offset-3 col-9">
+ <button type="submit" class="btn btn-default">Submit</button>
+ </div>
+ </div>
+
+ </form>
+ </div>
+ </div>
+
+ <h3>Form with help text </h3>
+
+ <div class="mt-3 mb-5">
+ <label for="accountId">Account Id</label>
+ <input type="text" id="accountId" class="form-control" aria-describedby="helpAccountId">
+ <span id="helpAccountId" class="form-text text-muted">Your account ID is located at the top of your invoice.</span>
+ </div>
+
+ <h3>Checkbox and radio </h3>
+
+ <div class="mt-3 mb-5">
+ <div class="form-check form-check-inline">
+ <label class="form-check-label">
+ <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="1"> 1
+ </label>
+ </div>
+
+ <div class="form-check form-check-inline">
+ <label class="form-check-label">
+ <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="2"> 2
+ </label>
+ <label class="form-check-label">
+ <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="3"> 3
+ </label>
+ </div>
+
+ <div class="form-check form-check-inline">
+ <label class="form-check-label">
+ <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1"
+ value="1"> 1
+ </label>
+ </div>
+
+ <div class="form-check form-check-inline">
+ <label class="form-check-label">
+ <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2"
+ value="2"> 2
+ </label>
+ </div>
+
+ <div class="form-check form-check-inline">
+ <label class="form-check-label">
+ <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3"
+ value="3"> 3
+ </label>
+ </div>
+ </div>
+ </div>
+
+ <!-- Dropdown -->
+ <div class="container-fluid example-container" data-category="dropdown">
+ <h1>Dropdown</h1>
+
+ <div class="row">
+ <div style="position: relative" class="mt-3 mb-5 col-4">
+ <h3>Default dropdown</h3>
+ <div class="dropdown">
+ <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" aria-labelledby="dropdownMenuButton">
+ <a class="dropdown-item" href="javascript:void(0);">Action</a>
+ <a class="dropdown-item" href="javascript:void(0);">Another action</a>
+ <a class="dropdown-item" href="javascript:void(0);">Something else here</a>
+ </div>
+
+ </div>
+ </div>
+ <div class="mt-3 mb-5 col-4">
+ <h3>Dropdown with menu</h3>
+ <div class="dropdown">
+ <button class="btn btn-primary dropdown-toggle" type="button" id="about-us"
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ About Us
+ </button>
+ <div class="dropdown-menu" aria-labelledby="about-us">
+ <h6 class="dropdown-header">Company Information</h6>
+ <a class="dropdown-item" href="javascript:void(0);">Our Story</a>
+ <a class="dropdown-item" href="javascript:void(0);">Our Team</a>
+ <h6 class="dropdown-header">Contact Us</h6>
+ <a class="dropdown-item" href="javascript:void(0);">Call Center</a>
+ <a class="dropdown-item" href="javascript:void(0);">Store Locations</a>
+ </div>
+ </div>
+ </div>
+ <div class="mt-3 mb-5 col-4">
+ <h3>Dropdown with divider</h3>
+ <div class="dropdown">
+ <button class="btn btn-primary dropdown-toggle" type="button" id="about-us"
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ About Us
+ </button>
+ <div class="dropdown-menu" aria-labelledby="about-us">
+ <a class="dropdown-item" href="javascript:void(0);">Our Story</a>
+ <a class="dropdown-item" href="javascript:void(0);">Our Team</a>
+ <div class="dropdown-divider"></div>
+ <a class="dropdown-item" href="javascript:void(0);">Contact Us</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Navs -->
+ <div class="container-fluid example-container" data-category="navs">
+ <h1>Navs</h1>
+
+ <h3>Default nav</h3>
+
+ <div class="mt-3 mb-5">
+ <ul class="nav">
+
+ <li class="nav-item">
+ <a class="nav-link active" href="javascript:void(0);">HTML</a>
+ </li>
+
+ <li class="nav-item">
+ <a class="nav-link" href="javascript:void(0);">CSS</a>
+ </li>
+
+ <li class="nav-item">
+ <a class="nav-link" href="javascript:void(0);">JavaScript</a>
+ </li>
+
+ <li class="nav-item">
+ <a class="nav-link" href="javascript:void(0);">Preview</a>
+ </li>
+
+ </ul>
+ </div>
+
+ <h3>Horizontal menu</h3>
+
+ <div class="mt-3 mb-5">
+ <nav class="nav flex-column">
+ <a class="nav-link active" href="javascript:void(0);">HTML</a>
+ <a class="nav-link" href="javascript:void(0);">CSS</a>
+ <a class="nav-link" href="javascript:void(0);">JavaScript</a>
+ <a class="nav-link" href="javascript:void(0);">Preview</a>
+ </nav>
+ </div>
+
+ <h3>Nav with tabs</h3>
+
+ <div class="mt-3 mb-5">
+ <ul class="nav nav-tabs">
+
+ <li class="nav-item">
+ <a class="nav-link active" href="javascript:void(0);">HTML</a>
+ </li>
+
+ <li class="nav-item">
+ <a class="nav-link" href="javascript:void(0);">CSS</a>
+ </li>
+
+ <li class="nav-item">
+ <a class="nav-link" href="javascript:void(0);">JavaScript</a>
+ </li>
+
+ <li class="nav-item">
+ <a class="nav-link" href="javascript:void(0);">Preview</a>
+ </li>
+
+ </ul>
+ </div>
+
+ <h3>Nav with pills</h3>
+
+ <div class="mt-3 mb-5">
+ <ul class="nav nav-pills">
+
+ <li class="nav-item">
+ <a class="nav-link active" href="javascript:void(0);">HTML</a>
+ </li>
+
+ <li class="nav-item">
+ <a class="nav-link" href="javascript:void(0);">CSS</a>
+ </li>
+
+ <li class="nav-item">
+ <a class="nav-link" href="javascript:void(0);">JavaScript</a>
+ </li>
+
+ <li class="nav-item">
+ <a class="nav-link" href="javascript:void(0);">Preview</a>
+ </li>
+
+ </ul>
+ </div>
+
+ <h3>Horizontal nav with pills</h3>
+
+ <div class="mt-3 mb-5">
+ <ul class="nav nav-pills flex-column">
+
+ <li class="nav-item">
+ <a class="nav-link active" href="javascript:void(0);">HTML</a>
+ </li>
+
+ <li class="nav-item">
+ <a class="nav-link" href="javascript:void(0);">CSS</a>
+ </li>
+
+ <li class="nav-item">
+ <a class="nav-link" href="javascript:void(0);">JavaScript</a>
+ </li>
+
+ <li class="nav-item">
+ <a class="nav-link" href="javascript:void(0);">Preview</a>
+ </li>
+
+ </ul>
+ </div>
+
+ <h3>Nav with tabs and dropdown</h3>
+
+ <div class="mt-3 mb-5">
+ <ul id="clothing-nav" class="nav nav-tabs" role="tablist">
+
+ <li class="nav-item">
+ <a class="nav-link active" href="#home" id="home-tab" role="tab" data-toggle="tab"
+ aria-controls="home" aria-expanded="true">Home</a>
+ </li>
+
+ <li class="nav-item">
+ <a class="nav-link" href="#hats" role="tab" id="hats-tab" data-toggle="tab"
+ aria-controls="hats">Hats</a>
+ </li>
+
+ <!-- Dropdown -->
+ <li class="nav-item dropdown">
+ <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"
+ role="button" aria-haspopup="true"
+ aria-expanded="false">
+ Footwear
+ </a>
+ <div class="dropdown-menu">
+ <a class="dropdown-item" href="#dropdown-shoes" role="tab" id="dropdown-shoes-tab"
+ data-toggle="tab" aria-controls="dropdownShoes">Shoes</a>
+ <a class="dropdown-item" href="#dropdown-boots" role="tab" id="dropdown-boots-tab"
+ data-toggle="tab" aria-controls="dropdownBoots">Boots</a>
+ </div>
+ </li>
+
+ </ul>
+
+ <!-- Content Panel -->
+ <div id="clothing-nav-content" class="tab-content">
+
+ <div role="tabpanel" class="tab-pane fade show active" id="home" aria-labelledby="home-tab">
+ <p>Welcome home! Click on the tabs to see the content change.</p>
+ </div>
+
+ <div role="tabpanel" class="tab-pane fade" id="hats" aria-labelledby="hats-tab">
+ <p>A hat is a head covering. It can be worn for protection against the elements, ceremonial
+ reasons, religious reasons,
+ safety, or as a fashion accessory.</p>
+ </div>
+
+ <div role="tabpanel" class="tab-pane fade" id="dropdown-shoes"
+ aria-labelledby="dropdown-shoes-tab">
+ <p>A shoe is an item of footwear intended to protect and comfort the human foot while doing
+ various activities. Shoes
+ are also used as an item of decoration.</p>
+ </div>
+
+ <div role="tabpanel" class="tab-pane fade" id="dropdown-boots"
+ aria-labelledby="dropdown-boots-tab">
+ <p>A boot is a type of footwear and a specific type of shoe. Most boots mainly cover the
+ foot and the ankle, while
+ some also cover some part of the lower calf. Some boots extend up the leg, sometimes as
+ far as the knee or even
+ the hip.
+ </p>
+ </div>
+
+ </div>
+ </div>
+ </div>
+
+ <!-- Navbar -->
+ <div class="container-fluid example-container" data-category="navbar">
+ <h1>Navbar</h1>
+
+ <div class="mt-3 mb-5">
+ <nav class="navbar navbar-expand-sm navbar-light bg-faded">
+ <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content"
+ aria-controls="nav-content"
+ aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+
+ <!-- Brand -->
+ <a class="navbar-brand" href="javascript:void(0);">Logo</a>
+
+ <!-- Links -->
+ <div class="collapse navbar-collapse" id="nav-content">
+ <ul class="navbar-nav">
+ <li class="nav-item">
+ <a class="nav-link" href="javascript:void(0);">Link 1</a>
+ </li>
+ <li class="nav-item active">
+ <a class="nav-link" href="javascript:void(0);">Link 2
+ <span class="sr-only">(current)</span>
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="javascript:void(0);">Link 3</a>
+ </li>
+ </ul>
+ </div>
+ </nav>
+
+ </div>
+ <div class="mt-3 mb-5">
+ <nav class="navbar navbar-expand-sm navbar-light bg-primary">
+ <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content"
+ aria-controls="nav-content"
+ aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+
+ <!-- Brand -->
+ <a class="navbar-brand" href="javascript:void(0);">Logo</a>
+
+ <!-- Links -->
+ <div class="collapse navbar-collapse" id="nav-content">
+ <ul class="navbar-nav">
+ <li class="nav-item">
+ <a class="nav-link" href="javascript:void(0);">Link 1</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="javascript:void(0);">Link 2</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="javascript:void(0);">Link 3</a>
+ </li>
+ </ul>
+ </div>
+ </nav>
+
+ </div>
+
+ <div class="mt-3 mb-5">
+ <nav class="navbar navbar-expand-sm navbar-dark bg-primary">
+ <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content"
+ aria-controls="nav-content"
+ aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+
+ <!-- Brand -->
+ <a class="navbar-brand" href="javascript:void(0);">Logo</a>
+
+ <!-- Links -->
+ <div class="collapse navbar-collapse" id="nav-content">
+ <ul class="navbar-nav">
+ <li class="nav-item">
+ <a class="nav-link" href="javascript:void(0);">Link 1</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="javascript:void(0);">Link 2</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="javascript:void(0);">Link 3</a>
+ </li>
+ </ul>
+ </div>
+ </nav>
+ </div>
+ </div>
+
+
+ <!-- Tables -->
+ <div class="container-fluid example-container" data-category="tables">
+ <h1>Tables</h1>
+
+ <div class="mt-3 mb-5">
+ <h3>Default table</h3>
+ <div>
+ <table class="table">
+ <thead>
+ <tr>
+ <th>Header 1</th>
+ <th>Header 2</th>
+ <th>Header 3</th>
+ </tr>
+ </thead>
+ <tfoot>
+ <tr>
+ <th>Footer 1</th>
+ <th>Footer 2</th>
+ <th>Footer 3</th>
+ </tr>
+ </tfoot>
+ <tbody>
+ <tr>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ <tr>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ <tr>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+
+
+ <div class="mt-3 mb-5">
+ <h3>Table inverse</h3>
+ <table class="table table-inverse">
+ <thead>
+ <tr>
+ <th>Header 1</th>
+ <th>Header 2</th>
+ <th>Header 3</th>
+ </tr>
+ </thead>
+ <tfoot>
+ <tr>
+ <th>Footer 1</th>
+ <th>Footer 2</th>
+ <th>Footer 3</th>
+ </tr>
+ </tfoot>
+ <tbody>
+ <tr>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ <tr>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ <tr>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+
+ <div class="mt-3 mb-5">
+ <h3>Table striped</h3>
+ <table class="table table-striped">
+ <thead>
+ <tr>
+ <th>Header 1</th>
+ <th>Header 2</th>
+ <th>Header 3</th>
+ </tr>
+ </thead>
+ <tfoot>
+ <tr>
+ <th>Footer 1</th>
+ <th>Footer 2</th>
+ <th>Footer 3</th>
+ </tr>
+ </tfoot>
+ <tbody>
+ <tr>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ <tr>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ <tr>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+
+ <div class="mt-3 mb-5">
+ <h3>Table with border</h3>
+ <table class="table table-bordered">
+ <thead>
+ <tr>
+ <th>Header 1</th>
+ <th>Header 2</th>
+ <th>Header 3</th>
+ </tr>
+ </thead>
+ <tfoot>
+ <tr>
+ <th>Footer 1</th>
+ <th>Footer 2</th>
+ <th>Footer 3</th>
+ </tr>
+ </tfoot>
+ <tbody>
+ <tr>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ <tr>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ <tr>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="mt-3 mb-5">
+ <h3>Table with hover</h3>
+ <table class="table table-hover">
+ <thead>
+ <tr>
+ <th>Header 1</th>
+ <th>Header 2</th>
+ <th>Header 3</th>
+ </tr>
+ </thead>
+ <tfoot>
+ <tr>
+ <th>Footer 1</th>
+ <th>Footer 2</th>
+ <th>Footer 3</th>
+ </tr>
+ </tfoot>
+ <tbody>
+ <tr>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ <tr>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ <tr>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+
+ <div class="mt-3 mb-5">
+ <h3>Table with Head with default color</h3>
+ <table class="table">
+ <thead class="thead-default">
+ <tr>
+ <th>Header 1</th>
+ <th>Header 2</th>
+ <th>Header 3</th>
+ </tr>
+ </thead>
+ <tfoot>
+ <tr>
+ <th>Footer 1</th>
+ <th>Footer 2</th>
+ <th>Footer 3</th>
+ </tr>
+ </tfoot>
+ <tbody>
+ <tr>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ <tr>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ <tr>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+
+ <div class="mt-3 mb-5">
+ <h3>Table with inverse Head color</h3>
+ <table class="table">
+ <thead class="thead-inverse">
+ <tr>
+ <th>Header 1</th>
+ <th>Header 2</th>
+ <th>Header 3</th>
+ </tr>
+ </thead>
+ <tfoot>
+ <tr>
+ <th>Footer 1</th>
+ <th>Footer 2</th>
+ <th>Footer 3</th>
+ </tr>
+ </tfoot>
+ <tbody>
+ <tr>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ <tr>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ <tr>
+ <td>Cell</td>
+ <td>Cell</td>
+ <td>Cell</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+
+ <!-- Pagination -->
+ <div class="container-fluid example-container" data-category="pagination">
+ <h1>Pagination</h1>
+
+ <div class="mt-3 mb-5">
+ <nav>
+ <ul class="pagination">
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link" aria-label="Previous">
+ <span aria-hidden="true">«</span>
+ </a>
+ </li>
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link">1</a>
+ </li>
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link">2</a>
+ </li>
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link">3</a>
+ </li>
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link">4</a>
+ </li>
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link">5</a>
+ </li>
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link">6</a>
+ </li>
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link">7</a>
+ </li>
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link" aria-label="Next">
+ <span aria-hidden="true">»</span>
+ </a>
+ </li>
+ </ul>
+ </nav>
+ </div>
+
+ <div class="mt-3 mb-5">
+ <nav>
+ <ul class="pagination">
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link" aria-label="Previous">
+ <span aria-hidden="true">«</span>
+ </a>
+ </li>
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link">1</a>
+ </li>
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link">2</a>
+ </li>
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link">3</a>
+ </li>
+ <li class="page-item active">
+ <a href="javascript:void(0);" class="page-link">4</a>
+ </li>
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link">5</a>
+ </li>
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link">6</a>
+ </li>
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link">7</a>
+ </li>
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link" aria-label="Next">
+ <span aria-hidden="true">»</span>
+ </a>
+ </li>
+ </ul>
+ </nav>
+ </div>
+
+ <div class="mt-3 mb-5">
+ <nav>
+ <ul class="pagination pagination-lg">
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link" aria-label="Previous">
+ <span aria-hidden="true">«</span>
+ </a>
+ </li>
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link">1</a>
+ </li>
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link">2</a>
+ </li>
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link">3</a>
+ </li>
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link">4</a>
+ </li>
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link">5</a>
+ </li>
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link">6</a>
+ </li>
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link">7</a>
+ </li>
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link" aria-label="Next">
+ <span aria-hidden="true">»</span>
+ </a>
+ </li>
+ </ul>
+ </nav>
+ </div>
+
+ <div class="mt-3 mb-5">
+ <nav>
+ <ul class="pagination">
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link" aria-label="Previous">
+ <span aria-hidden="true">«</span>
+ </a>
+ </li>
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link">1</a>
+ </li>
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link">2</a>
+ </li>
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link">3</a>
+ </li>
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link">4</a>
+ </li>
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link">5</a>
+ </li>
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link">6</a>
+ </li>
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link">7</a>
+ </li>
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link" aria-label="Next">
+ <span aria-hidden="true">»</span>
+ </a>
+ </li>
+ </ul>
+ </nav>
+ </div>
+
+ <div class="mt-3 mb-5">
+ <nav>
+ <ul class="pagination pagination-sm">
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link" aria-label="Previous">
+ <span aria-hidden="true">«</span>
+ </a>
+ </li>
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link">1</a>
+ </li>
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link">2</a>
+ </li>
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link">3</a>
+ </li>
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link">4</a>
+ </li>
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link">5</a>
+ </li>
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link">6</a>
+ </li>
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link">7</a>
+ </li>
+ <li class="page-item">
+ <a href="javascript:void(0);" class="page-link" aria-label="Next">
+ <span aria-hidden="true">»</span>
+ </a>
+ </li>
+ </ul>
+ </nav>
+ </div>
+ </div>
+
+ <!-- Jumbotron -->
+ <div class="container-fluid example-container" data-category="jumbotron">
+ <h1>Jumbotron</h1>
+
+ <div class="container">
+ <div class="jumbotron">
+ <h1>Container size jumboton</h1>
+ <p>Think BIG with a Bootstrap Jumbotron!</p>
+ </div>
+ </div>
+
+ <div>
+ <div class="jumbotron jumbotron-fluid">
+ <div class="container">
+ <h1>Container fluid size jumbotron</h1>
+ <p>Think BIG with a Bootstrap Jumbotron!</p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Cards -->
+ <div class="container-fluid example-container" data-category="cards">
+ <h1>Cards</h1>
+ <div class="row mb-3">
+ <div class="col-3">
+ <div class="card card-body">
+ <h4 class="card-title">Boot Polish</h4>
+ <p class="card-text">Boot polish is a waxy paste, cream, or liquid used to polish, shine,
+ and waterproof leather shoes or boots to extend
+ the footwear's life, and restore, maintain and improve their appearance.</p>
+ <a href="javascript:void(0);" class="btn btn-primary">More</a>
+ </div>
+ </div>
+
+ <div class="col-3">
+ <div class="card">
+ <div class="card-body">
+ <h4 class="card-title">Sun Gone</h4>
+ <p class="card-text">Here are the top resources for all things related to the Sun.</p>
+ <a href="javascript:void(0);" class="card-link">Sun Gone</a>
+ <a href="javascript:void(0);" class="card-link">Still Gone</a>
+ </div>
+ </div>
+ </div>
+
+ <div class="col-3">
+ <div class="card text-center">
+ <div class="card-body">
+ <h4 class="card-title">Sun Gone</h4>
+ <h6 class="card-subtitle text-muted">Sun disappears!</h6>
+ </div>
+ <img src="https://via.placeholder.com/300x150" alt="Photo of sunset">
+
+ <div class="card-body">
+ <p class="card-text">The sun disappeared behind the horizon today. Experts claim it
+ could be gone for good!</p>
+ <a href="javascript:void(0);" class="btn btn-primary">Full Report</a>
+ </div>
+
+ </div>
+ </div>
+
+ <div class="col-3">
+ <div class="card">
+ <div class="card-header">
+ Sponsored Content
+ </div>
+ <div class="card-body">
+ <h4 class="card-title">Ugg Boots</h4>
+ <p class="card-text">Best ugg boots on the planet. Free shipping, 24/7 customer
+ service.</p>
+ </div>
+ <div class="card-footer">
+ By boots.com
+ </div>
+ </div>
+ </div>
+
+ </div>
+ <div class="row mb-3">
+ <div class="col-12">
+ <div class="card-group">
+ <div class="card">
+ <div class="card-header">Sun Gone</div>
+ <div class="card-body">
+ <p class="card-text">The top resources for all things related to the Sun.</p>
+ <a href="javascript:void(0);" class="card-link">Sun Gone</a>
+ <a href="javascript:void(0);" class="card-link">Still Gone</a>
+ </div>
+ </div>
+
+ <div class="card">
+ <div class="card-header">Sun Up</div>
+ <div class="card-body">
+ <p class="card-text">Looks like the Sun has returned. Here's
+ <a href="javascript:void(0);" class="card-link">why</a>.</p>
+ </div>
+ </div>
+
+ </div>
+ </div>
+
+ </div>
+ </div>
+
+ <!-- Tooltip -->
+ <div class="container-fluid example-container" data-category="tooltip">
+ <h1>Tooltip</h1>
+
+ <div class="mt-3 mb-5">
+ <h3>Inline tooltip</h3>
+ <p style="margin:40px;">Check out my
+ <a target="_blank" href="javascript:void(0);" data-toggle="tooltip" data-placement="top"
+ title="Build advanced layouts easily with CSS!">Grid tutorial</a>, as you never know when you
+ might need it!</p>
+ </div>
+
+ <div class="mt-3 mb-5">
+ <h3>All position tooltip</h3>
+ <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top"
+ title="Top shoes" style="margin:20px;">
+ Shoes
+ </button>
+ <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="right"
+ title="Right boot" style="margin:20px;">
+ Boots
+ </button>
+ <button type="button" class="btn btn-warning" data-toggle="tooltip" data-placement="bottom"
+ title="Bottom uggs" style="margin:20px;">
+ Ugg
+ </button>
+ <button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="left"
+ title="Left sock" style="margin:20px;">
+ Socks
+ </button>
+ </div>
+
+ </div>
+
+ <!-- Popovers -->
+ <div class="container-fluid example-container" data-category="popovers">
+ <h1>Popovers</h1>
+ <div class="mt-3 mb-5">
+ <h3>All popover position</h3>
+ <button type="button" 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" 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>
+
+ <button type="button" 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" 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>
+ </div>
+ </div>
+
+ <!-- Badges -->
+ <div class="container-fluid example-container" data-category="badges">
+ <h1>Badges</h1>
+
+ <div class="mt-3 mb-5">
+ <h3>Badge heading</h3>
+ <h1>Example heading
+ <span class="badge badge-secondary">New</span>
+ </h1>
+ <h2>Example heading
+ <span class="badge badge-secondary">New</span>
+ </h2>
+ <h3>Example heading
+ <span class="badge badge-secondary">New</span>
+ </h3>
+ <h4>Example heading
+ <span class="badge badge-secondary">New</span>
+ </h4>
+ <h5>Example heading
+ <span class="badge badge-secondary">New</span>
+ </h5>
+ <h6>Example heading
+ <span class="badge badge-secondary">New</span>
+ </h6>
+ </div>
+
+ <div class="mt-3 mb-5">
+ <h3>Button with inline badge</h3>
+ <button type="button" class="btn btn-primary">
+ Notifications
+ <span class="badge badge-light">4</span>
+ </button>
+ <button type="button" class="btn btn-primary">
+ Profile
+ <span class="badge badge-light">9</span>
+ <span class="sr-only">unread messages</span>
+ </button>
+ </div>
+
+ <div class="mt-3 mb-5">
+ <h3>Default badges</h3>
+ <span class="badge badge-primary">Primary</span>
+ <span class="badge badge-secondary">Secondary</span>
+ <span class="badge badge-success">Success</span>
+ <span class="badge badge-danger">Danger</span>
+ <span class="badge badge-warning">Warning</span>
+ <span class="badge badge-info">Info</span>
+ <span class="badge badge-light">Light</span>
+ <span class="badge badge-dark">Dark</span>
+ </div>
+
+ <div class="mt-3 mb-5">
+ <h3>Badges pill</h3>
+ <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 class="mt-3 mb-5">
+ <h3>Badges with link</h3>
+ <a href="javascript:void(0);" class="badge badge-primary">Primary</a>
+ <a href="javascript:void(0);" class="badge badge-secondary">Secondary</a>
+ <a href="javascript:void(0);" class="badge badge-success">Success</a>
+ <a href="javascript:void(0);" class="badge badge-danger">Danger</a>
+ <a href="javascript:void(0);" class="badge badge-warning">Warning</a>
+ <a href="javascript:void(0);" class="badge badge-info">Info</a>
+ <a href="javascript:void(0);" class="badge badge-light">Light</a>
+ <a href="javascript:void(0);" class="badge badge-dark">Dark</a>
+ </div>
+ </div>
+
+ <!-- Modals -->
+ <div class="container-fluid example-container" data-category="modals">
+ <h1>Modals</h1>
+
+ <div class="mt-3 mb-5 row">
+ <button type="button" class="btn btn-primary btn-lg col-3 mr-3 ml-3" data-toggle="modal"
+ data-target="#flipFlop">
+ Default Modal
+ </button>
+
+ <button type="button" class="btn btn-primary btn-lg col-3 mr-3 ml-3" data-toggle="modal"
+ data-target="#largeShoes">
+ Large Modal
+ </button>
+
+ <button type="button" class="btn btn-primary btn-lg col-3 mr-3 ml-3" data-toggle="modal"
+ data-target="#smallShoes">
+ Small Modal
+ </button>
+
+ <!-- The modal -->
+ <div class="modal fade" id="smallShoes" tabindex="-1" role="dialog"
+ aria-labelledby="modalLabelSmall" aria-hidden="true">
+ <div class="modal-dialog modal-sm">
+ <div class="modal-content">
+
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ </button>
+ <h4 class="modal-title" id="modalLabelSmall">Small Shoes</h4>
+ </div>
+
+ <div class="modal-body">
+ Small shoes are typically worn by people with small feet.
+ </div>
+
+ </div>
+ </div>
+ </div>
+
+ <!-- The modal -->
+ <div class="modal fade" id="largeShoes" tabindex="-1" role="dialog"
+ aria-labelledby="modalLabelLarge" aria-hidden="true">
+ <div class="modal-dialog modal-lg">
+ <div class="modal-content">
+
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ </button>
+ <h4 class="modal-title" id="modalLabelLarge">Large Shoes</h4>
+ </div>
+
+ <div class="modal-body">
+ Large shoes are usually avoided by people with small feet.
+ </div>
+
+ </div>
+ </div>
+ </div>
+
+ <!-- The modal -->
+ <div class="modal fade" id="flipFlop" tabindex="-1" role="dialog" aria-labelledby="modalLabel"
+ aria-hidden="true">
+ <div class="modal-dialog" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ </button>
+ <h4 class="modal-title" id="modalLabel">Flip-flop</h4>
+ </div>
+ <div class="modal-body">
+ A type of open-toed sandal.
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Alerts -->
+ <div class="container-fluid example-container" data-category="alerts">
+ <h1>Alerts</h1>
+
+ <div class="mt-3 mb-5">
+ <h3>Default alert</h3>
+ <div class="alert alert-success" role="alert">Success alert</div>
+ <div class="alert alert-info" role="alert">Info alert</div>
+ <div class="alert alert-warning" role="alert">Warning alert</div>
+ <div class="alert alert-danger" role="alert">Danger alert</div>
+ <div class="alert alert-light" role="alert">Light alert</div>
+ <div class="alert alert-dark" role="alert">Dark alert</div>
+ </div>
+
+ <div class="mt-3 mb-5">
+ <h3>Dismissible alert</h3>
+ <div class="alert alert-success alert-dismissible" role="alert">
+ <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ </button>
+ <strong>Congratulations!</strong> You successfully tied your shoelace!
+ </div>
+ </div>
+
+ <div class="mt-3 mb-5">
+ <h3>Dismissible alert with fade</h3>
+ <div class="alert alert-success alert-dismissible fade show" role="alert">
+ <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ </button>
+ <strong>Congratulations!</strong> You successfully tied your shoelace!
+ </div>
+ </div>
+ </div>
+
+ <!-- Progress bars -->
+ <div class="container-fluid example-container" data-category="progress-bars">
+ <h1>Progress bars</h1>
+
+ <div class="mt-3 mb-5">
+ <h3>Default Progress bar</h3>
+ <div class="progress">
+ <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25"
+ aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ <br>
+ <div class="progress">
+ <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50"
+ aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ <br>
+ <div class="progress">
+ <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75"
+ aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ <br>
+ <div class="progress">
+ <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100"
+ aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ <br>
+ <div class="progress">
+ <div class="progress-bar bg-light" role="progressbar" style="width: 40%" aria-valuenow="40"
+ aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ <br>
+ <div class="progress">
+ <div class="progress-bar bg-dark" role="progressbar" style="width: 80%" aria-valuenow="80"
+ aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ </div>
+
+ <div class="mt-3 mb-5">
+ <h3>Striped Progress bar </h3>
+ <div class="progress">
+ <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%"
+ aria-valuenow="10" aria-valuemin="0"
+ aria-valuemax="100"></div>
+ </div>
+ <br>
+ <div class="progress">
+ <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%"
+ aria-valuenow="25" aria-valuemin="0"
+ aria-valuemax="100"></div>
+ </div>
+ <br>
+ <div class="progress">
+ <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%"
+ aria-valuenow="50" aria-valuemin="0"
+ aria-valuemax="100"></div>
+ </div>
+ <br>
+ <div class="progress">
+ <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%"
+ aria-valuenow="75" aria-valuemin="0"
+ aria-valuemax="100"></div>
+ </div>
+ <br>
+ <div class="progress">
+ <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%"
+ aria-valuenow="100" aria-valuemin="0"
+ aria-valuemax="100"></div>
+ </div>
+ <br>
+ <div class="progress">
+ <div class="progress-bar progress-bar-striped bg-light" role="progressbar" style="width: 40%"
+ aria-valuenow="40" aria-valuemin="0"
+ aria-valuemax="100"></div>
+ </div>
+ <br>
+ <div class="progress">
+ <div class="progress-bar progress-bar-striped bg-dark" role="progressbar" style="width: 80%"
+ aria-valuenow="80" aria-valuemin="0"
+ aria-valuemax="100"></div>
+ </div>
+ </div>
+
+ <div class="mt-3 mb-5">
+ <h3>Animated Progress bar</h3>
+ <div class="progress">
+ <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
+ aria-valuenow="75" aria-valuemin="0"
+ aria-valuemax="100" style="width: 75%"></div>
+ </div>
+ </div>
+ </div>
+
+ <!-- List group -->
+ <div class="container-fluid example-container" data-category="list-group">
+ <h1>List group</h1>
+
+ <div class="mt-3 mb-5">
+ <h3>Default list group</h3>
+ <ul class="list-group">
+ <li class="list-group-item">These Boots Are Made For Walking</li>
+ <li class="list-group-item">Eleanor, Put Your Boots On</li>
+ <li class="list-group-item">Puss 'n' Boots</li>
+ <li class="list-group-item">Die With Your Boots On</li>
+ <li class="list-group-item">Fairies Wear Boots</li>
+ </ul>
+ </div>
+
+ <div class="mt-3 mb-5">
+ <h3>List group with pills</h3>
+ <ul class="list-group">
+ <li class="list-group-item justify-content-between">
+ These Boots Are Made For Walking
+ <span class="badge badge-secondary badge-pill">15</span>
+ </li>
+ <li class="list-group-item justify-content-between">
+ Eleanor, Put Your Boots On
+ <span class="badge badge-secondary badge-pill">38</span>
+ </li>
+ <li class="list-group-item justify-content-between">
+ Puss 'n' Boots
+ <span class="badge badge-secondary badge-pill">76</span>
+ </li>
+ <li class="list-group-item justify-content-between">
+ Die With Your Boots On
+ <span class="badge badge-secondary badge-pill">112</span>
+ </li>
+ <li class="list-group-item justify-content-between">
+ Fairies Wear Boots
+ <span class="badge badge-secondary badge-pill">181</span>
+ </li>
+ </ul>
+ </div>
+
+ <div class="mt-3 mb-5">
+ <h3>Link List group</h3>
+ <div class="list-group">
+ <a href="javascript:void(0);" class="list-group-item list-group-item-action">These Boots Are
+ Made For Walking</a>
+ <a href="javascript:void(0);" class="list-group-item list-group-item-action active">Eleanor, Put
+ Your Boots On</a>
+ <a href="javascript:void(0);" class="list-group-item list-group-item-action">Puss 'n' Boots</a>
+ <a href="javascript:void(0);" class="list-group-item list-group-item-action">Die With Your Boots
+ On</a>
+ <a href="javascript:void(0);" class="list-group-item list-group-item-action">Fairies Wear
+ Boots</a>
+ </div>
+ </div>
+
+ <div class="mt-3 mb-5">
+ <h3>Button List group</h3>
+ <div class="list-group">
+ <button type="button" class="list-group-item list-group-item-action">These Boots Are Made For
+ Walking
+ </button>
+ <button type="button" class="list-group-item list-group-item-action active">Eleanor, Put Your
+ Boots On
+ </button>
+ <button type="button" class="list-group-item list-group-item-action">Puss 'n' Boots</button>
+ <button type="button" class="list-group-item list-group-item-action">Die With Your Boots On
+ </button>
+ <button type="button" class="list-group-item list-group-item-action">Fairies Wear Boots</button>
+ </div>
+ </div>
+
+ <div class="mt-3 mb-5">
+ <h3>List group with colors</h3>
+ <div class="list-group">
+ <a href="javascript:void(0);"
+ class="list-group-item list-group-item-action list-group-item-success">These Boots Are Made
+ For Walking</a>
+ <a href="javascript:void(0);"
+ class="list-group-item list-group-item-action list-group-item-success active">Eleanor, Put
+ Your Boots On</a>
+ <a href="javascript:void(0);"
+ class="list-group-item list-group-item-action list-group-item-info">Puss 'n' Boots</a>
+ <a href="javascript:void(0);"
+ class="list-group-item list-group-item-action list-group-item-warning">Die With Your Boots
+ On</a>
+ <a href="javascript:void(0);"
+ class="list-group-item list-group-item-action list-group-item-danger">Fairies Wear Boots</a>
+ <a href="javascript:void(0);"
+ class="list-group-item list-group-item-action list-group-item-light">Head Over Boots</a>
+ <a href="javascript:void(0);"
+ class="list-group-item list-group-item-action list-group-item-dark">Boot Scootin' Boogie</a>
+ </div>
+ </div>
+ </div>
+
+ <!-- Image thumbnails -->
+ <div class="container-fluid example-container" data-category="image-thumbnails">
+ <h1>Image thumbnails </h1>
+
+ <div>
+ <img src="https://via.placeholder.com/100x100" class="rounded" alt="Sample image">
+ <img src="https://via.placeholder.com/100x100" class="rounded-circle" alt="Sample image">
+ <img src="https://via.placeholder.com/100x100" class="img-thumbnail" alt="Sample image">
+ <img src="https://via.placeholder.com/100x100" class="rounded-top" alt="Sample image">
+ </div>
+ </div>
+
+ <!-- Figures -->
+ <div class="container-fluid example-container" data-category="figures">
+ <h1>Figures</h1>
+
+ <div>
+ <figure class="figure">
+ <img src="https://via.placeholder.com/400x300" class="figure-img img-fluid rounded"
+ alt="A generic square placeholder image with rounded corners in a figure.">
+ <figcaption class="figure-caption">A caption for the above image.</figcaption>
+ </figure>
+ </div>
+
+ <div>
+ <figure class="figure">
+ <img src="https://via.placeholder.com/400x300" class="figure-img img-fluid rounded"
+ alt="A generic square placeholder image with rounded corners in a figure.">
+ <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
+ </figure>
+ </div>
+ </div>
+
+ <!-- Breadcrumbs -->
+ <div class="container-fluid example-container" data-category="breadcrumbs">
+ <h1>Breadcrumbs</h1>
+
+ <div>
+ <ul class="breadcrumb">
+ <li class="breadcrumb-item">
+ <a href="javascript:void(0);">Home</a>
+ </li>
+ <li class="breadcrumb-item">
+ <a href="javascript:void(0);">Fruit</a>
+ </li>
+ <li class="breadcrumb-item active">Pears</li>
+ </ul>
+ </div>
+ </div>
+
+ <!-- Carousel -->
+ <div class="container-fluid example-container" data-category="carousel">
+ <h1>Carousel</h1>
+
+ <div>
+ <div id="myCarousel" class="carousel slide bg-inverse w-50 ml-auto mr-auto" data-ride="carousel">
+ <ol class="carousel-indicators">
+ <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+ <li data-target="#myCarousel" data-slide-to="1"></li>
+ <li data-target="#myCarousel" data-slide-to="2"></li>
+ </ol>
+ <div class="carousel-inner" role="listbox">
+ <div class="carousel-item active">
+ <img class="d-block w-100" src="https://via.placeholder.com/1280x720" alt="First slide">
+ <div class="carousel-caption">
+ <h3>First slide</h3>
+ <p>This is the first slide.</p>
+ </div>
+ </div>
+ <div class="carousel-item">
+ <img class="d-block w-100" src="https://via.placeholder.com/1280x720"
+ alt="Second slide">
+ <div class="carousel-caption">
+ <h3>Second slide</h3>
+ <p>This is the second slide.</p>
+ </div>
+ </div>
+ <div class="carousel-item">
+ <img class="d-block w-100" src="https://via.placeholder.com/1280x720" alt="Third slide">
+ <div class="carousel-caption">
+ <h3>Third slide</h3>
+ <p>This is the third slide.</p>
+ </div>
+ </div>
+ </div>
+ <a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" 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>
+
+ <!-- Close -->
+ <div class="container-fluid example-container" data-category="close">
+ <h1>Close</h1>
+ <button type="button" class="close" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ </button>
+ </div>
+
+ <!-- Code -->
+ <div class="container-fluid example-container" data-category="code">
+ <h1>Code</h1>
+ <div class="mt-3 mb-5">
+ <h3>Default code</h3>
+ For example,
+ <code><section></code> should be wrapped as inline.
+ </div>
+
+ <div class="mt-3 mb-5">
+ <h3>Code with pre tag</h3>
+ <pre>
+ <code>
+ <p>Sample text here...</p>
+ <p>And another line of sample text here...</p>
+ </code>
+ </pre>
+ </div>
+
+
+ <div class="mt-3 mb-5">
+ <h3>Var tag</h3>
+ <var>y</var> =
+ <var>m</var>
+ <var>x</var> +
+ <var>b</var>
+ </div>
+
+ <div class="mt-3 mb-5">
+ <h3>Kbd tag</h3>
+ To switch directories, type
+ <kbd>cd</kbd> followed by the name of the directory.
+ <br> To edit settings, press
+ <kbd>
+ <kbd>ctrl</kbd> +
+ <kbd>,</kbd>
+ </kbd>
+ </div>
+
+ <div class="mt-3 mb-5">
+ <h3>Samp tag</h3>
+ <samp>This text is meant to be treated as sample output from a computer program.</samp>
+ </div>
+
+ <div class="pt-5 pb-5 mb-5 mt-3"></div>
+ <div class="pt-5 pb-5 mb-5 mt-3"></div>
+ <div class="pt-5 pb-5 mb-5 mt-3"></div>
+ <div class="pt-5 pb-5 mb-5 mt-3"></div>
+ <div class="pt-5 pb-5 mb-5 mt-3"></div>
+ </div>
+ <div class="ht-tm-cat">
+ <a id="alerts" class="ht-anchor">Alerts</a>
+ <h5 class="ht-tm-cat-title">Alerts</h5>
+
+
+ <div class="ht-tm-codeblock ht-tm-needs-darkness">
+ <div class="ht-tm-element alert alert-primary" role="alert">
+ <strong>Well done!</strong> You successfully read this
+ important alert message.
+ </div>
+
+ <div class="ht-tm-element alert alert-primary alert-dismissible fade show" role="alert">
+ <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ </button>
+ <strong>Well done!</strong> You can dismiss this message with the X button.
+ </div>
+
+ <div class="ht-tm-element alert alert-primary" role="alert">
+ <h4 class="alert-heading">Well done!</h4>
+ You successfully read this important alert message.
+ <a href="#!" class="alert-link">It contains a link and heading.</a>
+ </div>
+ </div>
+
+
+ </div> <!--alerts -->
+
+ <div class="ht-tm-cat">
+ <a id="badges" class="ht-anchor">Badges</a>
+ <h5 class="ht-tm-cat-title">Badges</h5>
+
+ <div class="ht-tm-codeblock ht-tm-needs-darkness">
+ <span class="ht-tm-element badge badge-primary">Regular Badge</span>
+ <span class="ht-tm-element badge badge-pill badge-primary">Pill Badge</span>
+ <a href="#!" class="ht-tm-element badge badge-primary">Link Badge</a>
+ </div>
+ </div> <!-- Badges -->
+
+ <div class="ht-tm-cat">
+ <a id="buttons" class="ht-anchor"></a>
+ <h5 class="ht-tm-cat-title">Buttons</h5>
+
+ <div class="ht-tm-needs-darkness">
+
+ <div class="ht-tm-codeblock ht-tm-btn-replaceable">
+ <div class="row">
+ <div class="col-md-6">
+ <a href="#!" class="ht-tm-element btn btn-primary">Default Button</a>
+ <a href="#!" class="ht-tm-element btn btn-primary"><span
+ class="fas fa-download mr-2"></span>With Icon</a>
+ <a href="#!" class="ht-tm-element btn btn-primary"><span
+ class="fas fa-download"></span></a>
+ </div>
+ <div class="col-md-6">
+ <a href="#!" class="ht-tm-element btn btn-outline-primary">Outline Button</a>
+ <a href="#!" class="ht-tm-element btn btn-outline-primary">
+ <span class="fas fa-download mr-2"></span>
+ With Icon</a>
+ <a href="#!" class="ht-tm-element btn btn-outline-primary">
+ <span class="fas fa-download"></span></a>
+ </div>
+ </div>
+ </div>
+
+ <div class="ht-tm-codeblock ht-tm-btn-replaceable">
+ <div class="row">
+ <div class="col-md-6">
+ <a href="#!" class="ht-tm-element btn btn-primary">
+ <span class="fab fa-twitter mr-2"></span>
+ Tweet</a>
+ <a href="#!" class="ht-tm-element btn btn-primary">
+ <span class="fab fa-twitter"></span></a>
+ <a href="#!" class="ht-tm-element btn btn-primary">
+ <span class="fab fa-facebook mr-2"></span>
+ Share</a>
+ <a href="#!" class="ht-tm-element btn btn-primary">
+ <span class="fab fa-facebook"></span></a>
+ </div>
+ <div class="col-md-6">
+ <a href="#!" class="ht-tm-element btn btn-outline-primary">
+ <span class="fab fa-twitter mr-2"></span>
+ Tweet</a>
+ <a href="#!" class="ht-tm-element btn btn-outline-primary">
+ <span class="fab fa-twitter"></span></a>
+ <a href="#!" class="ht-tm-element btn btn-outline-primary">
+ <span class="fab fa-facebook mr-2"></span>
+ Share</a>
+ <a href="#!" class="ht-tm-element btn btn-outline-primary">
+ <span class="fab fa-facebook"></span></a>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-6">
+ <a href="#!" class="ht-tm-element btn btn-primary">
+ <span class="fab fa-instagram mr-2"></span>
+ Instagram</a>
+ <a href="#!" class="ht-tm-element btn btn-primary">
+ <span class="fab fa-instagram"></span></a>
+ <a href="#!" class="ht-tm-element btn btn-primary">
+ <span class="fab fa-github mr-2"></span>
+ Git</a>
+ <a href="#!" class="ht-tm-element btn btn-primary">
+ <span class="fab fa-github"></span></a>
+ </div>
+ <div class="col-md-6">
+ <a href="#!" class="ht-tm-element btn btn-outline-primary">
+ <span class="fab fa-instagram mr-2"></span>
+ Instagram</a>
+ <a href="#!" class="ht-tm-element btn btn-outline-primary">
+ <span class="fab fa-instagram"></span></a>
+ <a href="#!" class="ht-tm-element btn btn-outline-primary">
+ <span class="fab fa-github mr-2"></span>
+ Git</a>
+ <a href="#!" class="ht-tm-element btn btn-outline-primary">
+ <span class="fab fa-github"></span></a>
+ </div>
+ </div>
+ </div>
+
+ <div class="ht-tm-codeblock ht-tm-btn-replaceable">
+ <div class="row">
+ <div class="col-md-6">
+ <a href="#!" class="ht-tm-element btn btn-primary btn-block">Block level button</a>
+ </div>
+ <div class="col-md-6">
+ <a href="#!" class="ht-tm-element btn btn-outline-primary btn-block">Block level
+ button</a>
+ </div>
+ </div>
+ </div>
+
+ <h6 class="ht-tm-cat-subtitle">Dropdowns</h6>
+ <div class="row">
+ <div class="col-lg-6">
+ <div class="ht-tm-codeblock ht-tm-btn-replaceable">
+ <div class="ht-tm-element btn-group">
+ <button type="button" class="btn btn-primary dropdown-toggle"
+ data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false">
+ Action
+ </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="ht-tm-element btn-group">
+ <button type="button" class="btn btn-primary">Action</button>
+ <button type="button"
+ class="btn btn-primary dropdown-toggle dropdown-toggle-split"
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
+ <div class="dropdown-menu">
+ <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>
+
+ <div class="col-lg-6">
+ <div class="ht-tm-codeblock ht-tm-btn-replaceable">
+ <div class="ht-tm-element btn-group">
+ <button type="button" class="btn btn-outline-primary dropdown-toggle"
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Action
+ </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="ht-tm-element btn-group">
+ <button type="button" class="btn btn-outline-primary">Action</button>
+ <button type="button"
+ class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split"
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
+ <div class="dropdown-menu">
+ <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>
+
+ </div>
+
+ <h6 class="ht-tm-cat-subtitle">Grouping them</h6>
+ <div class="row">
+ <div class="col-xl-6">
+ <div class="ht-tm-codeblock">
+ <div class="ht-tm-element btn-group">
+ <a href="#!" class="btn btn-primary">One</a>
+ <a href="#!" class="btn btn-primary">Two</a>
+ <a href="#!" class="btn btn-primary">Three</a>
+ </div>
+ </div>
+ <div class="ht-tm-codeblock">
+ <div class="ht-tm-element btn-group" role="group"
+ aria-label="Button group with nested dropdown">
+ <a href="#!" class="btn btn-primary">One</a>
+ <a href="#!" class="btn btn-primary">Two</a>
+
+ <div class="btn-group" role="group">
+ <button id="btnGroupDrop5" type="button"
+ class="btn btn-primary dropdown-toggle"
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Dropdown
+ </button>
+ <div class="dropdown-menu" aria-labelledby="btnGroupDrop5">
+ <a class="dropdown-item" href="#!">Dropdown link</a>
+ <a class="dropdown-item" href="#!">Dropdown link</a>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ <div class="ht-tm-codeblock">
+ <div class="ht-tm-element btn-group-vertical" role="group"
+ aria-label="Basic example">
+ <a href="#!" class="btn btn-primary">Seven</a>
+ <a href="#!" class="btn btn-primary">Eleven</a>
+ </div>
+
+ <div class="ht-tm-element btn-group-vertical" role="group"
+ aria-label="Button group with nested dropdown">
+ <a href="#!" class="btn btn-primary">Seven</a>
+
+ <div class="btn-group" role="group">
+ <button id="btnGroupDrop3" type="button"
+ class="btn btn-primary dropdown-toggle"
+ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Dropdown
+ </button>
+ <div class="dropdown-menu" aria-labelledby="btnGroupDrop3">
+ <a class="dropdown-item" href="#!">Dropdown link</a>
+ <a class="dropdown-item" href="#!">Dropdown link</a>
+ </div>
+ </div>
+ </div>
+
+
+ </div>
+ </div>
+ <div class="col-xl-6">
+ <div class="ht-tm-codeblock">
+ <div class="ht-tm-element btn-group">
+ <a href="#!" class="btn btn-outline-primary">One</a>
+ <a href="#!" class="btn btn-outline-primary">Two</a>
+ <a href="#!" class="btn btn-outline-primary">Three</a>
+ </div>
+ </div>
+ <div class="ht-tm-codeblock">
+ <div class="ht-tm-element btn-group" role="group"
+ aria-label="Button group with nested dropdown">
+ <a href="#!" class="btn btn-outline-primary">One</a>
+ <a href="#!" class="btn btn-outline-primary">Two</a>
+
+ <div class="btn-group" role="group">
+ <button id="btnGroupDrop1" type="button"
+ class="btn btn-outline-primary dropdown-toggle"
+ data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false">
+ Dropdown
+ </button>
+ <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
+ <a class="dropdown-item" href="#!">Dropdown link</a>
+ <a class="dropdown-item" href="#!">Dropdown link</a>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ <div class="ht-tm-codeblock">
+ <div class="ht-tm-element btn-group-vertical" role="group"
+ aria-label="Basic example">
+ <a href="#!" class="btn btn-outline-primary">Seven</a>
+ <a href="#!" class="btn btn-outline-primary">Eleven</a>
+ </div>
+
+ <div class="ht-tm-element btn-group-vertical" role="group"
+ aria-label="Button group with nested dropdown">
+ <a href="#!" class="btn btn-outline-primary">Seven</a>
+
+ <div class="btn-group" role="group">
+ <button id="btnGroupDrop2" type="button"
+ class="btn btn-outline-primary dropdown-toggle"
+ data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false">
+ Dropdown
+ </button>
+ <div class="dropdown-menu" aria-labelledby="btnGroupDrop2">
+ <a class="dropdown-item" href="#!">Dropdown link</a>
+ <a class="dropdown-item" href="#!">Dropdown link</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <h6 class="ht-tm-cat-subtitle">Checkboxes and Radios</h6>
+ <div class="row">
+ <div class="col-xl-6">
+ <div class="ht-tm-codeblock ht-tm-btn-replaceable">
+ <div class="ht-tm-element btn-group btn-group-toggle" data-toggle="buttons">
+ <label class="btn btn-primary active">
+ <input type="checkbox" checked="" autocomplete="off"> Checkbox 1
+ </label>
+ <label class="btn btn-primary">
+ <input type="checkbox" autocomplete="off"> Checkbox 2
+ </label>
+ </div>
+ <div class="ht-tm-element btn-group btn-group-toggle" data-toggle="buttons">
+ <label class="btn btn-primary active">
+ <input type="radio" name="options" id="option-1" autocomplete="off"
+ checked="">
+ Radio 1
+ </label>
+ <label class="btn btn-primary">
+ <input type="radio" name="options" id="option-2" autocomplete="off"> Radio 2
+ </label>
+ </div>
+ </div>
+ </div>
+ <div class="col-xl-6">
+ <div class="ht-tm-codeblock ht-tm-btn-replaceable">
+ <div class="ht-tm-element btn-group btn-group-toggle" data-toggle="buttons">
+ <label class="btn btn-outline-primary active">
+ <input type="checkbox" checked="" autocomplete="off"> Checkbox 1
+ </label>
+ <label class="btn btn-outline-primary">
+ <input type="checkbox" autocomplete="off"> Checkbox 2
+ </label>
+ </div>
+ <div class="ht-tm-element btn-group btn-group-toggle" data-toggle="buttons">
+ <label class="btn btn-outline-primary active">
+ <input type="radio" name="options" id="radio-option-1" autocomplete="off"
+ checked=""> Radio 1
+ </label>
+ <label class="btn btn-outline-primary">
+ <input type="radio" name="options" id="radio-option-2" autocomplete="off">
+ Radio
+ 2
+ </label>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+
+ </div> <!-- buttons -->
+
+ <div class="ht-tm-cat ht-tm-btn-replaceable">
+ <a id="cards" class="ht-anchor">Cards</a>
+
+ <h5 class="ht-tm-cat-title">Cards</h5>
+
+ <div class="row">
+ <div class="col-lg-6">
+ <div class="ht-tm-codeblock">
+ <div class="ht-tm-element card bg-primary text-white mb-3 text-center">
+ <div class="card-body">
+ <blockquote class="card-blockquote">
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
+ erat
+ a ante. Integer posuere erat a ante.</p>
+ <footer>Someone famous in <cite title="Source Title">Source Title</cite>
+ </footer>
+ </blockquote>
+ </div>
+ </div>
+ </div>
+
+ <div class="ht-tm-codeblock">
+ <div class="ht-tm-element card">
+ <img class="card-img-top" src="/bootstrap-themes/demo/images/card.png"
+ alt="Card image cap">
+ <div class="card-body">
+ <h4 class="card-title">Card title</h4>
+ <p class="card-text">Some quick example text to build on the card title and make
+ up
+ the bulk of the card's content.</p>
+ <a href="#!" class="btn btn-primary">Go somewhere</a>
+ </div>
+ </div>
+ </div>
+
+ <div class="ht-tm-codeblock">
+ <div class="card ht-tm-element">
+ <div class="card-header">
+ Quote
+ </div>
+ <div class="card-body">
+ <blockquote class="card-blockquote">
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
+ erat
+ a ante.</p>
+ <footer>Someone famous in <cite title="Source Title">Source Title</cite>
+ </footer>
+ </blockquote>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="col-lg-6">
+
+ <div class="ht-tm-codeblock">
+ <div class="ht-tm-element card border-primary mb-3 text-center">
+ <div class="card-body">
+ <blockquote class="card-blockquote">
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
+ erat
+ a ante.</p>
+ <footer>Someone famous in <cite title="Source Title">Source Title</cite>
+ </footer>
+ </blockquote>
+ </div>
+ </div>
+ </div>
+
+ <div class="ht-tm-codeblock ht-tm-btn">
+ <div class="ht-tm-element card text-center">
+ <div class="card-header">
+ Featured
+ </div>
+ <div class="card-body">
+ <h4 class="card-title">Special title treatment</h4>
+ <p class="card-text">With supporting text below as a natural lead-in to
+ additional
+ content.</p>
+ <a href="#!" class="btn btn-primary">Go somewhere</a>
+ </div>
+ <div class="card-footer text-muted">
+ 2 days ago
+ </div>
+ </div>
+ </div>
+
+ <div class="ht-tm-codeblock">
+ <div class="card ht-tm-element">
+ <img class="card-img-top" src="/bootstrap-themes/demo/images/card.png"
+ alt="Card image cap">
+ <ul class="list-group list-group-flush">
+ <li class="list-group-item list-group-item-action">Cras justo odio</li>
+ <li class="list-group-item list-group-item-action">Dapibus ac facilisis in</li>
+ <li class="list-group-item list-group-item-action">Vestibulum at eros</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="ht-tm-codeblock">
+
+ <div class="card text-center ht-tm-element">
+ <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">
+ <h4 class="card-title">Special title treatment</h4>
+ <p class="card-text">With supporting text below as a natural lead-in to additional
+ content.</p>
+ <a href="#" class="btn btn-primary">Go somewhere</a>
+ </div>
+ </div>
+
+ </div>
+
+ </div> <!-- cards -->
+
+ <div class="ht-tm-cat">
+ <a id="carousel" class="ht-anchor">Carousel</a>
+ <h5 class="ht-tm-cat-title">Carousel</h5>
+ <div id="carouselExampleControls" class="ht-tm-element carousel slide" data-ride="carousel">
+ <div class="carousel-inner" role="listbox">
+ <div class="carousel-item active">
+ <img class="d-block img-fluid" src="/bootstrap-themes/demo/images/slider1.png"
+ alt="First slide">
+ </div>
+ <div class="carousel-item">
+ <img class="d-block img-fluid" src="/bootstrap-themes/demo/images/slider2.png"
+ alt="Second slide">
+ </div>
+ <div class="carousel-item">
+ <img class="d-block img-fluid" src="/bootstrap-themes/demo/images/slider3.png"
+ alt="Third slide">
+ </div>
+ </div>
+ <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button"
+ data-slide="next">
+ <span class="carousel-control-next-icon" aria-hidden="true"></span>
+ <span class="sr-only">Next</span>
+ </a>
+ </div>
+ </div> <!-- carousel -->
+
+ <div class="ht-tm-cat">
+ <a id="forms" class="ht-anchor">Forms</a>
+ <h5 class="ht-tm-cat-title">Forms</h5>
+
+ <div class="row">
+ <div class="col-xl-6">
+ <div class="card">
+ <div class="card-body">
+ <h6 class="card-title">Start with a small group form</h6>
+
+ <div
+ class="ht-tm-codeblock ht-tm-btn-replaceable ht-tm-element ht-tm-element-inner">
+ <form>
+ <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</small>
+ </div>
+ <button type="submit" class="btn btn-primary">Submit</button>
+ </form>
+ </div>
+ </div>
+
+
+ </div>
+ </div>
+ <div class="col-xl-6">
+ <div class="card">
+ <div class="card-body ht-tm-superspecialcardcheat">
+
+ <h6 class="card-title">Or with an inline form</h6>
+
+ <div class="ht-tm-codeblock ht-tm-btn-replaceable">
+ <form class="form-inline ht-tm-element">
+ <label class="sr-only" for="inlineFormInputGroup">Username</label>
+ <div class="input-group mb-2 mr-sm-2 mb-sm-0">
+ <input type="text" class="form-control" id="inlineFormInputGroup"
+ placeholder="Username">
+ </div>
+
+ <button type="submit" class="btn btn-primary">Go</button>
+ </form>
+ </div>
+
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="ht-tm-codeblock">
+
+ <div class="row">
+ <div class="col-xl-6">
+ <div class="card">
+ <div class="card-body">
+ <form autocomplete="off">
+
+ <h6 class="card-title">Add some extras too..</h6>
+
+ <div class="ht-tm-element ht-tm-element-inner">
+ <input class="form-control" type="text" value="Text input"
+ id="example-text-input">
+ </div>
+
+ <div class="ht-tm-element ht-tm-element-inner">
+ <input class="form-control" type="email" value="email@example.com"
+ id="example-email-input">
+ </div>
+
+ <div class="ht-tm-element ht-tm-element-inner">
+ <input class="form-control" type="url" value="https://getbootstrap.com"
+ id="example-url-input">
+ </div>
+
+ <div class="ht-tm-element ht-tm-element-inner">
+ <input class="form-control" type="date" value="2011-08-19"
+ id="example-date-input">
+ </div>
+
+ <div class="ht-tm-element ht-tm-element-inner">
+ <input class="form-control" type="password" value="hunter2"
+ id="example-password-input">
+ </div>
+
+ <div class="ht-tm-element ht-tm-element-inner">
+ <input class="form-control" type="number" value="42"
+ id="example-number-input">
+ </div>
+
+ </form>
+ </div>
+ </div>
+
+ </div>
+ <div class="col-xl-6">
+
+ <div class="card">
+ <div class="card-body">
+
+ <h6 class="card-title">Even more form controls</h6>
+ <div class="ht-tm-codeblock">
+ <div class="ht-tm-element custom-control custom-checkbox">
+ <input type="checkbox" class="custom-control-input" id="customCheck1">
+ <label class="custom-control-label" for="customCheck1">Check this custom
+ checkbox</label>
+ </div>
+
+ </div>
+
+ <div class="ht-tm-codeblock">
+ <div class="ht-tm-element custom-control custom-radio">
+ <input type="radio" id="customRadio1" name="customRadio"
+ class="custom-control-input">
+ <label class="custom-control-label" for="customRadio1">Toggle this
+ custom
+ radio</label>
+ </div>
+ <div class="ht-tm-element custom-control custom-radio">
+ <input type="radio" id="customRadio2" name="customRadio"
+ class="custom-control-input">
+ <label class="custom-control-label" for="customRadio2">Or toggle this
+ other
+ custom radio</label>
+ </div>
+ </div>
+
+ <div class="ht-tm-codeblock">
+ <div class="ht-tm-element ht-tm-element-inner d-inline-block">
+ <select class="custom-select">
+ <option selected="">Open this select menu</option>
+ <option value="1">One</option>
+ <option value="2">Two</option>
+ <option value="3">Three</option>
+ </select>
+ </div>
+ </div>
+
+ <div class="ht-tm-codeblock">
+ <div class="ht-tm-element custom-file">
+ <input type="file" class="custom-file-input" id="customFile">
+ <label class="custom-file-label" for="customFile">Choose file</label>
+ </div>
+ </div>
+
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="row ht-tm-btn-replaceable ht-tm-needs-darkness">
+ <div class="col-xl-6">
+
+ <div class="ht-tm-codeblock">
+ <div class="ht-tm-element 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-primary" type="button">Go!</button>
+ </div>
+ </div>
+ </div>
+
+ <div class="ht-tm-codeblock">
+ <div class="ht-tm-element input-group">
+ <div class="input-group-prepend">
+ <button class="btn btn-primary" type="button">Go!</button>
+ </div>
+ <input type="text" class="form-control" placeholder="" aria-label=""
+ aria-describedby="basic-addon1">
+ </div>
+ </div>
+
+ <div class="ht-tm-codeblock">
+ <div class="ht-tm-element input-group">
+ <div class="input-group-prepend">
+ <button class="btn btn-primary" type="button">Love it</button>
+ </div>
+ <input type="text" class="form-control" placeholder="" aria-label=""
+ aria-describedby="basic-addon1">
+ <div class="input-group-append">
+ <button class="btn btn-primary" type="button">Hate it</button>
+ </div>
+ </div>
+ </div>
+
+ <div class="ht-tm-codeblock">
+ <div class="ht-tm-element input-group">
+ <div class="input-group-prepend">
+ <button class="btn btn-primary 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>
+ </div>
+ </div>
+ <input type="text" class="form-control"
+ aria-label="Text input with dropdown button">
+ </div>
+ </div>
+ </div>
+
+ <div class="col-xl-6">
+
+ <div class="ht-tm-codeblock">
+ <div class="ht-tm-element 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-primary" type="button">Go!</button>
+ </div>
+ </div>
+ </div>
+
+ <div class="ht-tm-codeblock">
+ <div class="ht-tm-element input-group">
+ <div class="input-group-prepend">
+ <button class="btn btn-outline-primary" type="button">Go!</button>
+ </div>
+ <input type="text" class="form-control" placeholder="" aria-label=""
+ aria-describedby="basic-addon1">
+ </div>
+ </div>
+
+ <div class="ht-tm-codeblock">
+ <div class="ht-tm-element input-group">
+ <div class="input-group-prepend">
+ <button class="btn btn-outline-primary" type="button">Love it</button>
+ </div>
+ <input type="text" class="form-control" placeholder="" aria-label=""
+ aria-describedby="basic-addon1">
+ <div class="input-group-append">
+ <button class="btn btn-outline-primary" type="button">Hate it</button>
+ </div>
+ </div>
+ </div>
+
+ <div class="ht-tm-codeblock">
+ <div class="ht-tm-element input-group">
+ <div class="input-group-prepend">
+ <button class="btn btn-outline-primary 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>
+ </div>
+ </div>
+ <input type="text" class="form-control"
+ aria-label="Text input with dropdown button">
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+ </div> <!-- forms -->
+
+ <div class="ht-tm-cat ht-tm-btn-replaceable">
+ <a id="jumbotron" class="ht-anchor">Jumbotron</a>
+ <h5 class="ht-tm-cat-title">Jumbotron</h5>
+
+ <div class="ht-tm-codeblock">
+ <div class="ht-tm-element jumbotron">
+ <h1 class="display-3">Hello, world!</h1>
+ <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling
+ extra
+ attention to featured content or information.</p>
+ <hr class="my-4">
+ <p>It uses utility classes for typography and spacing to space content out within the larger
+ container.</p>
+ <p class="lead">
+ <a class="btn btn-primary" href="#!" role="button">Learn more</a>
+ </p>
+ </div>
+
+ </div>
+ </div> <!-- jumbotron -->
+
+ <div class="ht-tm-cat">
+ <a id="lists" class="ht-anchor">Lists</a>
+ <h5 class="ht-tm-cat-title">
+ Lists
+ </h5>
+
+ <div class="row">
+ <div class="col-xl-6">
+ <div class="ht-tm-codeblock">
+ <ul class="list-group ht-tm-element">
+ <li class="list-group-item">Cras justo odio</li>
+ <li class="list-group-item">Dapibus ac facilisis in</li>
+ <li class="list-group-item">Porta ac consectetur ac</li>
+ <li class="list-group-item justify-content-between">
+ Cras justo odio
+ <span class="badge badge-default badge-pill">14</span>
+ </li>
+ <li class="list-group-item">Vestibulum at eros</li>
+ <li class="list-group-item list-group-item-primary">Dapibus ac facilisis in</li>
+ </ul>
+ </div>
+ </div>
+ <div class="col-xl-6">
+ <div class="ht-tm-codeblock">
+ <div class="list-group ht-tm-element">
+ <a href="#!" class="list-group-item active">
+ Cras justo odio
+ </a>
+ <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">Morbi leo risus</a>
+ <a href="#!" class="list-group-item list-group-item-action justify-content-between">
+ Cras justo odio
+ <span class="badge badge-default badge-pill">14</span>
+ </a>
+ <a href="#!" class="list-group-item list-group-item-action">Porta ac consectetur
+ ac</a>
+ <a href="#!" class="list-group-item list-group-item-action list-group-item-primary">Vestibulum
+ at eros</a>
+ </div>
+
+ </div>
+ </div>
+ </div>
+ </div> <!-- lists -->
+
+ <div class="ht-tm-cat">
+ <a id="navigation" class="ht-anchor">Navigation</a>
+ <h5 class="ht-tm-cat-title">Navigation</h5>
+
+ <div class="row">
+ <div class="col-lg-6">
+ <div class="ht-tm-codeblock">
+ <ul class="nav nav-tabs ht-tm-element">
+ <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>
+ <div class="col-lg-6">
+ <div class="ht-tm-codeblock">
+ <ul class="nav nav-pills ht-tm-element">
+ <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>
+ </div>
+
+ <div class="ht-tm-codeblock">
+ <nav class="navbar navbar-expand-lg navbar-dark bg-primary ht-tm-element">
+ <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
+ data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03"
+ aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+ <a class="navbar-brand" href="#!">Navbar</a>
+
+ <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
+ <ul class="navbar-nav mr-auto mt-2 mt-md-0">
+ <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="#!">Link</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link disabled" href="#!">Disabled</a>
+ </li>
+ </ul>
+ <form class="form-inline my-2 my-lg-0">
+ <input class="form-control mr-sm-2" type="text" placeholder="Search">
+ </form>
+ </div>
+ </nav>
+ </div>
+ </div> <!-- navigation -->
+
+ <div class="ht-tm-cat">
+ <a id="pagination" class="ht-anchor">Pagination</a>
+ <h5 class="ht-tm-cat-title">Pagination</h5>
+
+ <div class="row">
+ <div class="col-xl-6">
+ <div class="ht-tm-codeblock ht-tm-element ht-tm-element-inner">
+ <nav aria-label="Page navigation example">
+ <ul class="pagination">
+ <li class="page-item"><a class="page-link" href="#!">Previous</a></li>
+ <li class="page-item"><a class="page-link" href="#!">1</a></li>
+ <li class="page-item"><a class="page-link" href="#!">2</a></li>
+ <li class="page-item"><a class="page-link" href="#!">3</a></li>
+ <li class="page-item"><a class="page-link" href="#!">Next</a></li>
+ </ul>
+ </nav>
+ </div>
+ </div>
+ <div class="col-xl-6">
+ <div class="ht-tm-codeblock ht-tm-element ht-tm-element-inner">
+ <nav aria-label="...">
+ <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>
+ </div>
+ </div> <!-- pagination -->
+
+ <div class="ht-tm-btn-replaceable">
+ <a id="popovers" class="ht-anchor">Popovers</a>
+ <h5 class="ht-tm-cat-title">Popovers</h5>
+
+ <div class="ht-tm-codeblock ht-tm-needs-darkness">
+ <button type="button" class="btn btn-primary ht-tm-element" 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" class="btn btn-primary ht-tm-element" data-container="body"
+ data-toggle="popover" data-placement="right"
+ data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+ Popover on right
+ </button>
+
+ <button type="button" class="btn btn-primary ht-tm-element" 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" class="btn btn-primary ht-tm-element" data-container="body"
+ data-toggle="popover" data-placement="left"
+ data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+ Popover on left
+ </button>
+ </div>
+
+ </div> <!-- popovers -->
+
+ <div class="ht-tm-cat">
+ <a id="progress" class="ht-anchor">Progress</a>
+ <h5 class="ht-tm-cat-title">Progress</h5>
+
+ <div class="ht-tm-codeblock">
+ <div class="progress ht-tm-element">
+ <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="0" aria-valuemin="0"
+ aria-valuemax="100"></div>
+ </div>
+ </div>
+ <div class="ht-tm-codeblock">
+ <div class="progress ht-tm-element">
+ <div class="progress-bar bg-primary" role="progressbar" style="width: 25%"
+ aria-valuenow="25"
+ aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ </div>
+ <div class="ht-tm-codeblock">
+ <div class="progress ht-tm-element">
+ <div class="progress-bar bg-primary" role="progressbar" style="width: 50%"
+ aria-valuenow="50"
+ aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ </div>
+ <div class="ht-tm-codeblock">
+ <div class="progress ht-tm-element">
+ <div class="progress-bar bg-primary" role="progressbar" style="width: 75%"
+ aria-valuenow="75"
+ aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ </div>
+ <div class="ht-tm-codeblock">
+ <div class="progress ht-tm-element">
+ <div class="progress-bar bg-primary" role="progressbar" style="width: 100%"
+ aria-valuenow="100"
+ aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ </div>
+
+
+ <div class="ht-tm-codeblock mt-5">
+ <div class="progress ht-tm-element">
+ <div class="progress-bar progress-bar-striped bg-primary" role="progressbar"
+ aria-valuenow="0"
+ aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ </div>
+ <div class="ht-tm-codeblock">
+ <div class="progress ht-tm-element">
+ <div class="progress-bar progress-bar-striped bg-primary" role="progressbar"
+ style="width: 25%"
+ aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ </div>
+ <div class="ht-tm-codeblock">
+ <div class="progress ht-tm-element">
+ <div class="progress-bar progress-bar-striped bg-primary" role="progressbar"
+ style="width: 50%"
+ aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ </div>
+ <div class="ht-tm-codeblock">
+ <div class="progress ht-tm-element">
+ <div class="progress-bar progress-bar-striped bg-primary" role="progressbar"
+ style="width: 75%"
+ aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ </div>
+ <div class="ht-tm-codeblock">
+ <div class="progress ht-tm-element">
+ <div class="progress-bar progress-bar-striped bg-primary" role="progressbar"
+ style="width: 100%"
+ aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ </div>
+
+ <div class="ht-tm-codeblock mt-5">
+ <div class="progress ht-tm-element">
+ <div class="progress-bar progress-bar-striped progress-bar-animated bg-primary"
+ role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"
+ style="width: 75%"></div>
+ </div>
+ </div>
+
+ <div class="my-5">
+ <div class="progress ht-tm-element">
+ <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15"
+ aria-valuemin="0" aria-valuemax="100"></div>
+ <div class="progress-bar bg-success" role="progressbar" style="width: 30%"
+ aria-valuenow="30"
+ aria-valuemin="0" aria-valuemax="100"></div>
+ <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20"
+ aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ </div>
+
+ </div> <!-- progress -->
+
+ <div class="ht-tm-cat">
+ <a id="tables" class="ht-anchor">Tables</a>
+ <h5 class="ht-tm-cat-title">Tables</h5>
+
+ <div class="ht-tm-codeblock">
+ <table class="table table-hover table-striped ht-tm-element">
+ <thead class="thead-dark">
+ <tr>
+ <th>#</th>
+ <th>First Name</th>
+ <th>Last Name</th>
+ <th>Username</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+
+ <tr class="table-primary">
+ <th scope="row">3</th>
+ <td>Contextual</td>
+ <td>Row</td>
+ <td>@hackerthemes</td>
+ </tr>
+
+ </tbody>
+ </table>
+ </div>
+
+ <div class="ht-tm-codeblock mt-4">
+ <table class="table table-hover table-primary ht-tm-element">
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>First Name</th>
+ <th>Last Name</th>
+ <th>Username</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr class="bg-primary">
+ <th scope="row">3</th>
+ <td colspan="2">Contextual Row</td>
+ <td>@hackerthemes</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div> <!-- tables -->
+
+ <div class="ht-tm-cat">
+ <a id="tooltips" class="ht-anchor">Tooltips</a>
+ <h5 class="ht-tm-cat-title">Tooltips</h5>
+
+ <div class="ht-tm-codeblock ht-tm-btn-replaceable ht-tm-needs-darkness">
+ <button type="button" class="btn btn-primary ht-tm-element" data-toggle="tooltip"
+ data-placement="top" title="Tooltip on top">
+ Tooltip on top
+ </button>
+ <button type="button" class="btn btn-primary ht-tm-element" data-toggle="tooltip"
+ data-placement="right" title="Tooltip on right">
+ Tooltip on right
+ </button>
+ <button type="button" class="btn btn-primary ht-tm-element" data-toggle="tooltip"
+ data-placement="bottom" title="Tooltip on bottom">
+ Tooltip on bottom
+ </button>
+ <button type="button" class="btn btn-primary ht-tm-element" data-toggle="tooltip"
+ data-placement="left" title="Tooltip on left">
+ Tooltip on left
+ </button>
+ </div>
+ </div> <!-- tooltips -->
+
+ <div class="ht-tm-cat">
+ <a id="typography" class="ht-anchor">Typography</a>
+ <h5 class="ht-tm-cat-title">Typography</h5>
+
+ <div class="row">
+ <div class="col-xl-12">
+ <div class="ht-tm-codeblock">
+ <h1 class="display-1 ht-tm-element">Display 1</h1>
+ <h1 class="display-2 ht-tm-element">Display 2</h1>
+ <h1 class="display-3 ht-tm-element">Display 3</h1>
+ <h1 class="display-4 ht-tm-element">Display 4</h1>
+ </div>
+ <div class="ht-tm-codeblock">
+ <div class="ht-tm-element ht-tm-element-inner">
+ <h1>h1. Bootstrap heading</h1>
+ </div>
+ <div class="ht-tm-element ht-tm-element-inner">
+ <h2>h2. Bootstrap heading</h2>
+ </div>
+ <div class="ht-tm-element ht-tm-element-inner">
+ <h3>h3. Bootstrap heading</h3>
+ </div>
+ <div class="ht-tm-element ht-tm-element-inner">
+ <h4>h4. Bootstrap heading</h4>
+ </div>
+ <div class="ht-tm-element ht-tm-element-inner">
+ <h5>h5. Bootstrap heading</h5>
+ </div>
+ <div class="ht-tm-element ht-tm-element-inner">
+ <h6>h6. Bootstrap heading</h6>
+ </div>
+ </div>
+ <div class="ht-tm-codeblock">
+ <p class="lead ht-tm-element">
+ Lead Text - Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+ Duis
+ mollis, est non commodo luctus.
+ </p>
+ </div>
+ <div class="ht-tm-codeblock">
+ <div class="ht-tm-element ht-tm-element-inner">
+ <h6>Body text </h6>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, cumque delectus
+ deleniti dolor esse ex fugiat, id in ipsum modi molestiae mollitia, nulla
+ numquam
+ provident quasi soluta sunt tempora vel. Lorem ipsum dolor sit amet, consectetur
+ adipisicing elit. Accusamus, aspernatur consequuntur cumque dolor ducimus earum
+ eos,
+ expedita, fuga harum incidunt maxime modi mollitia numquam praesentium sapiente
+ suscipit temporibus ut vero. Lorem ipsum dolor sit amet, consectetur adipisicing
+ elit. Amet nam nostrum pariatur praesentium tempore. Ad architecto at aut dicta
+ enim, eveniet expedita libero magnam minus, nihil, non sequi sunt
+ voluptates!</p>
+ </div>
+ </div>
+ </div>
+
+ <div class="col-xl-6">
+ <div class="ht-tm-codeblock">
+ <blockquote class="blockquote ht-tm-element">
+ <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
+ posuere
+ erat a ante.</p>
+ </blockquote>
+ </div>
+ </div>
+ <div class="col-xl-6">
+ <blockquote class="blockquote blockquote-reverse ht-tm-element">
+ <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 class="col-xl-12">-->
+ <!--<div class="ht-tm-codeblock">-->
+ <!--<p class="text-primary ht-tm-element">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>-->
+ <!--<div class="bg-primary ht-tm-element">Background color. Nullam id dolor id nibh ultricies vehicula ut id elit.</div>-->
+ <!--</div>-->
+ <!--</div>-->
+ </div>
+ </div> <!-- typography -->
+
+ <!--<div class="ht-tm-cat">-->
+ <!--<h5 class="ht-tm-cat-title">Cat</h5>-->
+
+ <!--</div> <!– something –>-->
+
+
+ <!--<div class="ht-tm-cat">-->
+ <!--<a id="lists" class="ht-anchor">Lists</a>-->
+ <!--<h5 class="ht-tm-cat-title">-->
+ <!--Lists-->
+ <!--</h5>-->
+
+ <!--<div class="row">-->
+ <!--<div class="col-xl-6">-->
+ <!--<div class="ht-tm-codeblock">-->
+
+ <!--</div>-->
+ <!--</div>-->
+ <!--<div class="col-xl-6">-->
+ <!--<div class="ht-tm-codeblock">-->
+
+ <!--</div>-->
+ <!--</div>-->
+ <!--</div>-->
+ <!--</div> <!– cat title –>-->
+
+
+ <!--<div class="ht-tm-cat">-->
+ <!--<h5 class="ht-tm-cat-title">Cat</h5>-->
+
+ <!--</div> <!– something –>-->
+
+
+ <div class="container-fluid p-0">
+ <div class="page-header">
+ <div class="row">
+ <div class="col-sm-12">
+ <h2 id="buttons">Buttons</h2>
+ </div>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="col-sm-8">
+
+ <p class="bs-component">
+ <button type="button" class="btn btn-primary">Primary</button>
+ <button type="button" class="btn btn-secondary">Secondary</button>
+ <button type="button" class="btn btn-success">Success</button>
+ <button type="button" class="btn btn-info">Info</button>
+ <button type="button" class="btn btn-warning">Warning</button>
+ <button type="button" class="btn btn-danger">Danger</button>
+ <button type="button" class="btn btn-link">Link</button>
+ </p>
+
+ <p class="bs-component">
+ <button type="button" class="btn btn-primary disabled">Primary</button>
+ <button type="button" class="btn btn-secondary disabled">Secondary</button>
+ <button type="button" class="btn btn-success disabled">Success</button>
+ <button type="button" class="btn btn-info disabled">Info</button>
+ <button type="button" class="btn btn-warning disabled">Warning</button>
+ <button type="button" class="btn btn-danger disabled">Danger</button>
+ <button type="button" class="btn btn-link disabled">Link</button>
+ </p>
+
+ <p class="bs-component">
+ <button type="button" class="btn btn-outline-primary">Primary</button>
+ <button type="button" class="btn btn-outline-secondary">Secondary</button>
+ <button type="button" class="btn btn-outline-success">Success</button>
+ <button type="button" class="btn btn-outline-info">Info</button>
+ <button type="button" class="btn btn-outline-warning">Warning</button>
+ <button type="button" class="btn btn-outline-danger">Danger</button>
+ </p>
+
+ <div class="bs-component">
+ <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
+ <button type="button" class="btn btn-primary">Primary</button>
+ <div class="btn-group" role="group">
+ <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle"
+ data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false"></button>
+ <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
+ <a class="dropdown-item" href="#">Dropdown link</a>
+ <a class="dropdown-item" href="#">Dropdown link</a>
+ </div>
+ </div>
+ </div>
+
+ <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
+ <button type="button" class="btn btn-success">Success</button>
+ <div class="btn-group" role="group">
+ <button id="btnGroupDrop2" type="button" class="btn btn-success dropdown-toggle"
+ data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false"></button>
+ <div class="dropdown-menu" aria-labelledby="btnGroupDrop2">
+ <a class="dropdown-item" href="#">Dropdown link</a>
+ <a class="dropdown-item" href="#">Dropdown link</a>
+ </div>
+ </div>
+ </div>
+
+ <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
+ <button type="button" class="btn btn-info">Info</button>
+ <div class="btn-group" role="group">
+ <button id="btnGroupDrop3" type="button" class="btn btn-info dropdown-toggle"
+ data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false"></button>
+ <div class="dropdown-menu" aria-labelledby="btnGroupDrop3">
+ <a class="dropdown-item" href="#">Dropdown link</a>
+ <a class="dropdown-item" href="#">Dropdown link</a>
+ </div>
+ </div>
+ </div>
+
+ <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
+ <button type="button" class="btn btn-danger">Danger</button>
+ <div class="btn-group" role="group">
+ <button id="btnGroupDrop4" type="button" class="btn btn-danger dropdown-toggle"
+ data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false"></button>
+ <div class="dropdown-menu" aria-labelledby="btnGroupDrop4">
+ <a class="dropdown-item" href="#">Dropdown link</a>
+ <a class="dropdown-item" href="#">Dropdown link</a>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="bs-component">
+ <button type="button" class="btn btn-primary btn-lg">Large button</button>
+ <button type="button" class="btn btn-primary">Default button</button>
+ <button type="button" class="btn btn-primary btn-sm">Small button</button>
+ </div>
+
+ </div>
+ <div class="col-sm-4">
+
+ <div class="bs-component" style="margin-bottom: 15px;">
+ <div class="btn-group btn-group-toggle" data-toggle="buttons">
+ <label class="btn btn-primary active">
+ <input type="checkbox" checked autocomplete="off"> Active
+ </label>
+ <label class="btn btn-primary">
+ <input type="checkbox" autocomplete="off"> Check
+ </label>
+ <label class="btn btn-primary">
+ <input type="checkbox" autocomplete="off"> Check
+ </label>
+ </div>
+ </div>
+
+ <div class="bs-component" style="margin-bottom: 15px;">
+ <div class="btn-group btn-group-toggle" data-toggle="buttons">
+ <label class="btn btn-primary active">
+ <input type="radio" name="options" id="option1" autocomplete="off" checked>
+ Active
+ </label>
+ <label class="btn btn-primary">
+ <input type="radio" name="options" id="option2" autocomplete="off"> Radio
+ </label>
+ <label class="btn btn-primary">
+ <input type="radio" name="options" id="option3" autocomplete="off"> Radio
+ </label>
+ </div>
+ </div>
+
+ <div class="bs-component" style="margin-bottom: 15px;">
+ <div class="btn-group" role="group" aria-label="Basic example">
+ <button type="button" class="btn btn-secondary">Left</button>
+ <button type="button" class="btn btn-secondary">Middle</button>
+ <button type="button" class="btn btn-secondary">Right</button>
+ </div>
+ </div>
+
+ <div class="bs-component" style="margin-bottom: 15px;">
+ <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
+ <div class="btn-group mr-2" role="group" aria-label="First group">
+ <button type="button" class="btn btn-secondary">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 mr-2" role="group" aria-label="Second group">
+ <button type="button" class="btn btn-secondary">5</button>
+ <button type="button" class="btn btn-secondary">6</button>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ </div>
+ </div>
+
+ <!-- Navbar
+ ================================================== -->
+ <div class="bs-docs-section clearfix">
+ <div class="row">
+ <div class="col-sm-12">
+ <div class="page-header">
+ <h2 id="navbars">Navbars</h2>
+ </div>
+
+ <div class="bs-component">
+ <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+ <a class="navbar-brand" href="#">Navbar</a>
+ <button class="navbar-toggler" type="button" data-toggle="collapse"
+ data-target="#navbarColor01"
+ aria-controls="navbarColor01" aria-expanded="false"
+ aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+
+ <div class="collapse navbar-collapse" id="navbarColor01">
+ <ul class="navbar-nav mr-auto">
+ <li class="nav-item active">
+ <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">Features</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">Pricing</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">About</a>
+ </li>
+ </ul>
+ <form class="form-inline my-2 my-lg-0">
+ <input class="form-control mr-sm-2" type="text" placeholder="Search">
+ <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
+ </form>
+ </div>
+ </nav>
+ </div>
+
+ <div class="bs-component">
+ <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+ <a class="navbar-brand" href="#">Navbar</a>
+ <button class="navbar-toggler" type="button" data-toggle="collapse"
+ data-target="#navbarColor02"
+ aria-controls="navbarColor02" aria-expanded="false"
+ aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+
+ <div class="collapse navbar-collapse" id="navbarColor02">
+ <ul class="navbar-nav mr-auto">
+ <li class="nav-item active">
+ <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">Features</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">Pricing</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">About</a>
+ </li>
+ </ul>
+ <form class="form-inline my-2 my-lg-0">
+ <input class="form-control mr-sm-2" type="text" placeholder="Search">
+ <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
+ </form>
+ </div>
+ </nav>
+ </div>
+
+ <div class="bs-component">
+ <nav class="navbar navbar-expand-lg navbar-light bg-light">
+ <a class="navbar-brand" href="#">Navbar</a>
+ <button class="navbar-toggler" type="button" data-toggle="collapse"
+ data-target="#navbarColor03"
+ aria-controls="navbarColor03" aria-expanded="false"
+ aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+
+ <div class="collapse navbar-collapse" id="navbarColor03">
+ <ul class="navbar-nav mr-auto">
+ <li class="nav-item active">
+ <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">Features</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">Pricing</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">About</a>
+ </li>
+ </ul>
+ <form class="form-inline my-2 my-lg-0">
+ <input class="form-control mr-sm-2" type="text" placeholder="Search">
+ <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
+ </form>
+ </div>
+ </nav>
+ </div>
+
+ </div>
+ </div>
+ </div>
+
+ <!-- Typography
+ ================================================== -->
+ <div class="bs-docs-section">
+ <div class="row">
+ <div class="col-sm-12">
+ <div class="page-header">
+ <h2 id="typography">Typography</h2>
+ </div>
+ </div>
+ </div>
+
+ <!-- Headings -->
+
+ <div class="row">
+ <div class="col-sm-4">
+ <div class="bs-component">
+ <h1>Heading 1</h1>
+ <h2>Heading 2</h2>
+ <h3>Heading 3</h3>
+ <h4>Heading 4</h4>
+ <h5>Heading 5</h5>
+ <h6>Heading 6</h6>
+ <h3>
+ Heading
+ <small class="text-muted">with muted text</small>
+ </h3>
+ <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
+ auctor.</p>
+ </div>
+ </div>
+ <div class="col-sm-4">
+ <div class="bs-component">
+ <h2>Example body text</h2>
+ <p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis
+ natoque
+ penatibus et
+ magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh
+ ultricies
+ vehicula.</p>
+ <p><small>This line of text is meant to be treated as fine print.</small></p>
+ <p>The following is <strong>rendered as bold text</strong>.</p>
+ <p>The following is <em>rendered as italicized text</em>.</p>
+ <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
+ </div>
+
+ </div>
+ <div class="col-sm-4">
+ <div class="bs-component">
+ <h2>Emphasis classes</h2>
+ <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
+ <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+ <p class="text-secondary">Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
+ <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
+ <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
+ <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor
+ ligula.</p>
+ <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+ </div>
+
+ </div>
+ </div>
+
+ <!-- Blockquotes -->
+
+ <div class="row">
+ <div class="col-sm-12">
+ <h2 id="type-blockquotes">Blockquotes</h2>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-sm-4">
+ <div class="bs-component">
+ <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>
+ <div class="col-sm-4">
+ <div class="bs-component">
+ <blockquote class="blockquote text-center">
+ <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
+ posuere
+ erat a ante.</p>
+ <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source
+ Title</cite></footer>
+ </blockquote>
+ </div>
+ </div>
+ <div class="col-sm-4">
+ <div class="bs-component">
+ <blockquote class="blockquote text-right">
+ <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
+ posuere
+ erat a ante.</p>
+ <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source
+ Title</cite></footer>
+ </blockquote>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Tables
+ ================================================== -->
+ <div class="bs-docs-section">
+
+ <div class="row">
+ <div class="col-sm-12">
+ <div class="page-header">
+ <h2 id="tables">Tables</h2>
+ </div>
+
+ <div class="bs-component">
+ <table class="table table-hover">
+ <thead>
+ <tr>
+ <th scope="col">Type</th>
+ <th scope="col">Column heading</th>
+ <th scope="col">Column heading</th>
+ <th scope="col">Column heading</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr class="table-active">
+ <th scope="row">Active</th>
+ <td>Column content</td>
+ <td>Column content</td>
+ <td>Column content</td>
+ </tr>
+ <tr>
+ <th scope="row">Default</th>
+ <td>Column content</td>
+ <td>Column content</td>
+ <td>Column content</td>
+ </tr>
+ <tr class="table-primary">
+ <th scope="row">Primary</th>
+ <td>Column content</td>
+ <td>Column content</td>
+ <td>Column content</td>
+ </tr>
+ <tr class="table-secondary">
+ <th scope="row">Secondary</th>
+ <td>Column content</td>
+ <td>Column content</td>
+ <td>Column content</td>
+ </tr>
+ <tr class="table-success">
+ <th scope="row">Success</th>
+ <td>Column content</td>
+ <td>Column content</td>
+ <td>Column content</td>
+ </tr>
+ <tr class="table-danger">
+ <th scope="row">Danger</th>
+ <td>Column content</td>
+ <td>Column content</td>
+ <td>Column content</td>
+ </tr>
+ <tr class="table-warning">
+ <th scope="row">Warning</th>
+ <td>Column content</td>
+ <td>Column content</td>
+ <td>Column content</td>
+ </tr>
+ <tr class="table-info">
+ <th scope="row">Info</th>
+ <td>Column content</td>
+ <td>Column content</td>
+ <td>Column content</td>
+ </tr>
+ <tr class="table-light">
+ <th scope="row">Light</th>
+ <td>Column content</td>
+ <td>Column content</td>
+ <td>Column content</td>
+ </tr>
+ <tr class="table-dark">
+ <th scope="row">Dark</th>
+ <td>Column content</td>
+ <td>Column content</td>
+ <td>Column content</td>
+ </tr>
+ </tbody>
+ </table>
+ </div><!-- /example -->
+ </div>
+ </div>
+ </div>
+
+ <!-- Forms
+ ================================================== -->
+ <div class="bs-docs-section">
+ <div class="row">
+ <div class="col-sm-12">
+ <div class="page-header">
+ <h2 id="forms">Forms</h2>
+ </div>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="col-sm-6">
+ <div class="bs-component">
+ <form>
+ <fieldset>
+ <legend>Legend</legend>
+ <div class="form-group row">
+ <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
+ <div class="col-sm-10">
+ <input type="text" readonly class="form-control-plaintext"
+ id="staticEmail"
+ value="email@example.com">
+ </div>
+ </div>
+ <div class="form-group">
+ <label for="exampleInputEmail1">Email address</label>
+ <input type="email" class="form-control" id="exampleInputEmail1"
+ aria-describedby="emailHelp"
+ placeholder="Enter email">
+ <small id="emailHelp" class="form-text text-muted">We'll never share your
+ email
+ with anyone else.</small>
+ </div>
+ <div class="form-group">
+ <label for="exampleInputPassword1">Password</label>
+ <input type="password" class="form-control" id="exampleInputPassword1"
+ placeholder="Password">
+ </div>
+ <div class="form-group">
+ <label for="exampleSelect1">Example select</label>
+ <select class="form-control" id="exampleSelect1">
+ <option>1</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+ </select>
+ </div>
+ <div class="form-group">
+ <label for="exampleSelect2">Example multiple select</label>
+ <select multiple class="form-control" id="exampleSelect2">
+ <option>1</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+ </select>
+ </div>
+ <div class="form-group">
+ <label for="exampleTextarea">Example textarea</label>
+ <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
+ </div>
+ <div class="form-group">
+ <label for="exampleInputFile">File input</label>
+ <input type="file" class="form-control-file" id="exampleInputFile"
+ aria-describedby="fileHelp">
+ <small id="fileHelp" class="form-text text-muted">This is some placeholder
+ block-level help text for
+ the above input. It's a bit lighter and easily wraps to a new
+ line.</small>
+ </div>
+ <fieldset class="form-group">
+ <legend>Radio buttons</legend>
+ <div class="form-check">
+ <label class="form-check-label">
+ <input type="radio" class="form-check-input" name="optionsRadios"
+ id="optionsRadios1" value="option1"
+ checked>
+ Option one is this and that—be sure to include why it's great
+ </label>
+ </div>
+ <div class="form-check">
+ <label class="form-check-label">
+ <input type="radio" class="form-check-input" name="optionsRadios"
+ id="optionsRadios2" value="option2">
+ Option two can be something else and selecting it will deselect
+ option
+ one
+ </label>
+ </div>
+ <div class="form-check disabled">
+ <label class="form-check-label">
+ <input type="radio" class="form-check-input" name="optionsRadios"
+ id="optionsRadios3" value="option3"
+ disabled>
+ Option three is disabled
+ </label>
+ </div>
+ </fieldset>
+ <fieldset class="form-group">
+ <legend>Checkboxes</legend>
+ <div class="form-check">
+ <label class="form-check-label">
+ <input class="form-check-input" type="checkbox" value="" checked>
+ Option one is this and that—be sure to include why it's great
+ </label>
+ </div>
+ <div class="form-check disabled">
+ <label class="form-check-label">
+ <input class="form-check-input" type="checkbox" value="" disabled>
+ Option two is disabled
+ </label>
+ </div>
+ </fieldset>
+ <button type="submit" class="btn btn-primary">Submit</button>
+ </fieldset>
+ </form>
+ </div>
+ </div>
+ <div class="col-sm-4 offset-lg-1">
+
+ <form class="bs-component">
+ <div class="form-group">
+ <fieldset disabled>
+ <label class="control-label" for="disabledInput">Disabled input</label>
+ <input class="form-control" id="disabledInput" type="text"
+ placeholder="Disabled input here..." disabled="">
+ </fieldset>
+ </div>
+
+ <div class="form-group">
+ <fieldset>
+ <label class="control-label" for="readOnlyInput">Readonly input</label>
+ <input class="form-control" id="readOnlyInput" type="text"
+ placeholder="Readonly input here…" readonly>
+ </fieldset>
+ </div>
+
+ <div class="form-group has-success">
+ <label class="form-control-label" for="inputSuccess1">Valid input</label>
+ <input type="text" value="correct value" class="form-control is-valid"
+ id="inputValid">
+ <div class="valid-feedback">Success! You've done it.</div>
+ </div>
+
+ <div class="form-group has-danger">
+ <label class="form-control-label" for="inputDanger1">Invalid input</label>
+ <input type="text" value="wrong value" class="form-control is-invalid"
+ id="inputInvalid">
+ <div class="invalid-feedback">Sorry, that username's taken. Try another?</div>
+ </div>
+
+ <div class="form-group">
+ <label class="col-form-label col-form-label-lg" for="inputLarge">Large input</label>
+ <input class="form-control form-control-lg" type="text"
+ placeholder=".form-control-lg"
+ id="inputLarge">
+ </div>
+
+ <div class="form-group">
+ <label class="col-form-label" for="inputDefault">Default input</label>
+ <input type="text" class="form-control" placeholder="Default input"
+ id="inputDefault">
+ </div>
+
+ <div class="form-group">
+ <label class="col-form-label col-form-label-sm" for="inputSmall">Small input</label>
+ <input class="form-control form-control-sm" type="text"
+ placeholder=".form-control-sm"
+ id="inputSmall">
+ </div>
+
+ <div class="form-group">
+ <label class="control-label">Input addons</label>
+ <div class="form-group">
+ <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>
+ </form>
+
+ <div class="bs-component">
+ <fieldset>
+ <legend>Custom forms</legend>
+ <div class="form-group">
+ <div class="custom-control custom-radio">
+ <input type="radio" id="customRadio1" name="customRadio"
+ class="custom-control-input" checked>
+ <label class="custom-control-label" for="customRadio1">Toggle this custom
+ radio</label>
+ </div>
+ <div class="custom-control custom-radio">
+ <input type="radio" id="customRadio2" name="customRadio"
+ class="custom-control-input">
+ <label class="custom-control-label" for="customRadio2">Or toggle this other
+ custom radio</label>
+ </div>
+ <div class="custom-control custom-radio">
+ <input type="radio" id="customRadio3" name="customRadio"
+ class="custom-control-input" disabled>
+ <label class="custom-control-label" for="customRadio3">Disabled custom
+ radio</label>
+ </div>
+ </div>
+ <div class="form-group">
+ <div class="custom-control custom-checkbox">
+ <input type="checkbox" class="custom-control-input" id="customCheck1"
+ checked>
+ <label class="custom-control-label" for="customCheck1">Check this custom
+ checkbox</label>
+ </div>
+ <div class="custom-control custom-checkbox">
+ <input type="checkbox" class="custom-control-input" id="customCheck2"
+ disabled>
+ <label class="custom-control-label" for="customCheck2">Disabled custom
+ checkbox</label>
+ </div>
+ </div>
+ <div class="form-group">
+ <div class="custom-control custom-switch">
+ <input type="checkbox" class="custom-control-input" id="customSwitch1"
+ checked>
+ <label class="custom-control-label" for="customSwitch1">Toggle this switch
+ element</label>
+ </div>
+ <div class="custom-control custom-switch">
+ <input type="checkbox" class="custom-control-input" disabled
+ id="customSwitch2">
+ <label class="custom-control-label" for="customSwitch2">Disabled switch
+ element</label>
+ </div>
+ </div>
+ <div class="form-group">
+ <select class="custom-select">
+ <option selected>Open this select menu</option>
+ <option value="1">One</option>
+ <option value="2">Two</option>
+ <option value="3">Three</option>
+ </select>
+ </div>
+ <div class="form-group">
+ <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>
+ </fieldset>
+ </div>
+
+ </div>
+ </div>
+ </div>
+
+ <!-- Navs
+ ================================================== -->
+ <div class="bs-docs-section">
+
+ <div class="row">
+ <div class="col-sm-12">
+ <div class="page-header">
+ <h2 id="navs">Navs</h2>
+ </div>
+ </div>
+ </div>
+
+ <div class="row" style="margin-bottom: 2rem;">
+ <div class="col-sm-6">
+ <h2 id="nav-tabs">Tabs</h2>
+ <div class="bs-component">
+ <ul class="nav nav-tabs">
+ <li class="nav-item">
+ <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" data-toggle="tab" href="#profile">Profile</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link disabled" href="#">Disabled</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>
+ </ul>
+ <div id="myTabContent" class="tab-content">
+ <div class="tab-pane fade show active" id="home">
+ <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt
+ tofu
+ stumptown aliqua, retro
+ synth master cleanse. Mustache cliche tempor, williamsburg carles vegan
+ helvetica. Reprehenderit
+ butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui
+ irure
+ terry richardson ex
+ squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan
+ american apparel, butcher
+ voluptate nisi qui.</p>
+ </div>
+ <div class="tab-pane fade" id="profile">
+ <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin
+ coffee
+ squid. Exercitation
+ +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan
+ four loko farm-to-table
+ craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk
+ aliquip jean shorts
+ ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore
+ aesthetic
+ magna delectus mollit.</p>
+ </div>
+ <div class="tab-pane fade" id="dropdown1">
+ <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out
+ mcsweeney's organic lomo retro
+ fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork
+ tattooed craft beer, iphone
+ skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth
+ PBR
+ banksy irony. Leggings
+ gentrify squid 8-bit cred pitchfork.</p>
+ </div>
+ <div class="tab-pane fade" id="dropdown2">
+ <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party
+ before
+ they sold out master
+ cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack
+ portland
+ seitan DIY, art party
+ locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY
+ salvia
+ PBR, banh mi before
+ they sold out farm-to-table VHS viral locavore cosby sweater.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="col-sm-6">
+ <h2 id="nav-pills">Pills</h2>
+ <div class="bs-component">
+ <ul class="nav nav-pills">
+ <li class="nav-item">
+ <a class="nav-link active" href="#">Active</a>
+ </li>
+ <li class="nav-item dropdown">
+ <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#"
+ role="button"
+ aria-haspopup="true"
+ aria-expanded="false">Dropdown</a>
+ <div class="dropdown-menu">
+ <a class="dropdown-item" href="#">Action</a>
+ <a class="dropdown-item" href="#">Another action</a>
+ <a class="dropdown-item" href="#">Something else here</a>
+ <div class="dropdown-divider"></div>
+ <a class="dropdown-item" href="#">Separated link</a>
+ </div>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">Link</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link disabled" href="#">Disabled</a>
+ </li>
+ </ul>
+ </div>
+ <br>
+ <div class="bs-component">
+ <ul class="nav nav-pills flex-column">
+ <li class="nav-item">
+ <a class="nav-link active" href="#">Active</a>
+ </li>
+ <li class="nav-item dropdown">
+ <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#"
+ role="button"
+ aria-haspopup="true"
+ aria-expanded="false">Dropdown</a>
+ <div class="dropdown-menu">
+ <a class="dropdown-item" href="#">Action</a>
+ <a class="dropdown-item" href="#">Another action</a>
+ <a class="dropdown-item" href="#">Something else here</a>
+ <div class="dropdown-divider"></div>
+ <a class="dropdown-item" href="#">Separated link</a>
+ </div>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="#">Link</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link disabled" href="#">Disabled</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="col-sm-6">
+ <h2 id="nav-breadcrumbs">Breadcrumbs</h2>
+ <div class="bs-component">
+ <ol class="breadcrumb">
+ <li class="breadcrumb-item active">Home</li>
+ </ol>
+ <ol class="breadcrumb">
+ <li class="breadcrumb-item"><a href="#">Home</a></li>
+ <li class="breadcrumb-item active">Library</li>
+ </ol>
+ <ol class="breadcrumb">
+ <li class="breadcrumb-item"><a href="#">Home</a></li>
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
+ <li class="breadcrumb-item active">Data</li>
+ </ol>
+ </div>
+ </div>
+
+ <div class="col-sm-6">
+ <h2 id="pagination">Pagination</h2>
+ <div class="bs-component">
+ <div>
+ <ul class="pagination">
+ <li class="page-item disabled">
+ <a class="page-link" href="#">«</a>
+ </li>
+ <li class="page-item active">
+ <a class="page-link" href="#">1</a>
+ </li>
+ <li class="page-item">
+ <a class="page-link" href="#">2</a>
+ </li>
+ <li class="page-item">
+ <a class="page-link" href="#">3</a>
+ </li>
+ <li class="page-item">
+ <a class="page-link" href="#">4</a>
+ </li>
+ <li class="page-item">
+ <a class="page-link" href="#">5</a>
+ </li>
+ <li class="page-item">
+ <a class="page-link" href="#">»</a>
+ </li>
+ </ul>
+ </div>
+
+ <div>
+ <ul class="pagination pagination-lg">
+ <li class="page-item disabled">
+ <a class="page-link" href="#">«</a>
+ </li>
+ <li class="page-item active">
+ <a class="page-link" href="#">1</a>
+ </li>
+ <li class="page-item">
+ <a class="page-link" href="#">2</a>
+ </li>
+ <li class="page-item">
+ <a class="page-link" href="#">3</a>
+ </li>
+ <li class="page-item">
+ <a class="page-link" href="#">4</a>
+ </li>
+ <li class="page-item">
+ <a class="page-link" href="#">5</a>
+ </li>
+ <li class="page-item">
+ <a class="page-link" href="#">»</a>
+ </li>
+ </ul>
+ </div>
+
+ <div>
+ <ul class="pagination pagination-sm">
+ <li class="page-item disabled">
+ <a class="page-link" href="#">«</a>
+ </li>
+ <li class="page-item active">
+ <a class="page-link" href="#">1</a>
+ </li>
+ <li class="page-item">
+ <a class="page-link" href="#">2</a>
+ </li>
+ <li class="page-item">
+ <a class="page-link" href="#">3</a>
+ </li>
+ <li class="page-item">
+ <a class="page-link" href="#">4</a>
+ </li>
+ <li class="page-item">
+ <a class="page-link" href="#">5</a>
+ </li>
+ <li class="page-item">
+ <a class="page-link" href="#">»</a>
+ </li>
+ </ul>
+ </div>
+
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Indicators
+ ================================================== -->
+ <div class="bs-docs-section">
+
+ <div class="row">
+ <div class="col-sm-12">
+ <div class="page-header">
+ <h2 id="indicators">Indicators</h2>
+ </div>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="col-sm-12">
+ <h2>Alerts</h2>
+ <div class="bs-component">
+ <div class="alert alert-dismissible alert-warning">
+ <button type="button" class="close" data-dismiss="alert">×</button>
+ <h4 class="alert-heading">Warning!</h4>
+ <p class="mb-0">Best check yo self, you're not looking too good. Nulla vitae elit
+ libero, a pharetra augue.
+ Praesent commodo cursus magna, <a href="#" class="alert-link">vel scelerisque
+ nisl
+ consectetur et</a>.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-sm-4">
+ <div class="bs-component">
+ <div class="alert alert-dismissible alert-danger">
+ <button type="button" class="close" data-dismiss="alert">×</button>
+ <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a>
+ and
+ try submitting
+ again.
+ </div>
+ </div>
+ </div>
+ <div class="col-sm-4">
+ <div class="bs-component">
+ <div class="alert alert-dismissible alert-success">
+ <button type="button" class="close" data-dismiss="alert">×</button>
+ <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this
+ important alert
+ message</a>.
+ </div>
+ </div>
+ </div>
+ <div class="col-sm-4">
+ <div class="bs-component">
+ <div class="alert alert-dismissible alert-info">
+ <button type="button" class="close" data-dismiss="alert">×</button>
+ <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your
+ attention</a>, but it's not
+ super important.
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-sm-4">
+ <div class="bs-component">
+ <div class="alert alert-dismissible alert-primary">
+ <button type="button" class="close" data-dismiss="alert">×</button>
+ <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a>
+ and
+ try submitting
+ again.
+ </div>
+ </div>
+ </div>
+ <div class="col-sm-4">
+ <div class="bs-component">
+ <div class="alert alert-dismissible alert-secondary">
+ <button type="button" class="close" data-dismiss="alert">×</button>
+ <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this
+ important alert
+ message</a>.
+ </div>
+ </div>
+ </div>
+ <div class="col-sm-4">
+ <div class="bs-component">
+ <div class="alert alert-dismissible alert-light">
+ <button type="button" class="close" data-dismiss="alert">×</button>
+ <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your
+ attention</a>, but it's not
+ super important.
+ </div>
+ </div>
+ </div>
+ </div>
+ <div>
+ <h2>Badges</h2>
+ <div class="bs-component" style="margin-bottom: 40px;">
+ <span class="badge badge-primary">Primary</span>
+ <span class="badge badge-secondary">Secondary</span>
+ <span class="badge badge-success">Success</span>
+ <span class="badge badge-danger">Danger</span>
+ <span class="badge badge-warning">Warning</span>
+ <span class="badge badge-info">Info</span>
+ <span class="badge badge-light">Light</span>
+ <span class="badge badge-dark">Dark</span>
+ </div>
+ <div class="bs-component">
+ <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>
+
+ <!-- Progress
+ ================================================== -->
+ <div class="bs-docs-section">
+
+ <div class="row">
+ <div class="col-sm-12">
+ <div class="page-header">
+ <h2 id="progress">Progress</h2>
+ </div>
+
+ <h3 id="progress-basic">Basic</h3>
+ <div class="bs-component">
+ <div class="progress">
+ <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25"
+ aria-valuemin="0"
+ aria-valuemax="100"></div>
+ </div>
+ </div>
+
+ <h3 id="progress-alternatives">Contextual alternatives</h3>
+ <div class="bs-component">
+ <div class="progress">
+ <div class="progress-bar bg-success" role="progressbar" style="width: 25%"
+ aria-valuenow="25" aria-valuemin="0"
+ aria-valuemax="100"></div>
+ </div>
+ <div class="progress">
+ <div class="progress-bar bg-info" role="progressbar" style="width: 50%"
+ aria-valuenow="50" aria-valuemin="0"
+ aria-valuemax="100"></div>
+ </div>
+ <div class="progress">
+ <div class="progress-bar bg-warning" role="progressbar" style="width: 75%"
+ aria-valuenow="75" aria-valuemin="0"
+ aria-valuemax="100"></div>
+ </div>
+ <div class="progress">
+ <div class="progress-bar bg-danger" role="progressbar" style="width: 100%"
+ aria-valuenow="100"
+ aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ </div>
+
+ <h3 id="progress-multiple">Multiple bars</h3>
+ <div class="bs-component">
+ <div class="progress">
+ <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15"
+ aria-valuemin="0"
+ aria-valuemax="100"></div>
+ <div class="progress-bar bg-success" role="progressbar" style="width: 30%"
+ aria-valuenow="30" aria-valuemin="0"
+ aria-valuemax="100"></div>
+ <div class="progress-bar bg-info" role="progressbar" style="width: 20%"
+ aria-valuenow="20" aria-valuemin="0"
+ aria-valuemax="100"></div>
+ </div>
+ </div>
+
+ <h3 id="progress-striped">Striped</h3>
+ <div class="bs-component">
+ <div class="progress">
+ <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%"
+ aria-valuenow="10"
+ aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ <div class="progress">
+ <div class="progress-bar progress-bar-striped bg-success" role="progressbar"
+ style="width: 25%"
+ aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ <div class="progress">
+ <div class="progress-bar progress-bar-striped bg-info" role="progressbar"
+ style="width: 50%" aria-valuenow="50"
+ aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ <div class="progress">
+ <div class="progress-bar progress-bar-striped bg-warning" role="progressbar"
+ style="width: 75%"
+ aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ <div class="progress">
+ <div class="progress-bar progress-bar-striped bg-danger" role="progressbar"
+ style="width: 100%"
+ aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ </div>
+
+ <h3 id="progress-animated">Animated</h3>
+ <div class="bs-component">
+ <div class="progress">
+ <div class="progress-bar progress-bar-striped progress-bar-animated"
+ role="progressbar"
+ aria-valuenow="75"
+ aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Containers
+ ================================================== -->
+ <div class="bs-docs-section">
+
+ <div class="row">
+ <div class="col-sm-12">
+ <div class="page-header">
+ <h2 id="containers">Containers</h2>
+ </div>
+ <div class="bs-component">
+ <div class="jumbotron">
+ <h1 class="display-3">Hello, world!</h1>
+ <p class="lead">This is a simple hero unit, a simple jumbotron-style component for
+ calling extra attention
+ to featured content or information.</p>
+ <hr class="my-4">
+ <p>It uses utility classes for typography and spacing to space content out within
+ the
+ larger container.</p>
+ <p class="lead">
+ <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+
+ <div class="row">
+ <div class="col-sm-12">
+ <h2>List groups</h2>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="col-sm-4">
+ <div class="bs-component">
+ <ul class="list-group">
+ <li class="list-group-item d-flex justify-content-between align-items-center">
+ Cras justo odio
+ <span class="badge badge-primary badge-pill">14</span>
+ </li>
+ <li class="list-group-item d-flex justify-content-between align-items-center">
+ Dapibus ac facilisis 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>
+ <div class="col-sm-4">
+ <div class="bs-component">
+ <div class="list-group">
+ <a href="#" class="list-group-item list-group-item-action active">
+ Cras justo odio
+ </a>
+ <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in
+ </a>
+ <a href="#" class="list-group-item list-group-item-action disabled">Morbi leo risus
+ </a>
+ </div>
+ </div>
+ </div>
+ <div class="col-sm-4">
+ <div class="bs-component">
+ <div class="list-group">
+ <a href="#"
+ class="list-group-item list-group-item-action flex-column align-items-start active">
+ <div class="d-flex w-100 justify-content-between">
+ <h5 class="mb-1">List group item heading</h5>
+ <small>3 days ago</small>
+ </div>
+ <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed
+ diam
+ eget risus varius
+ blandit.</p>
+ <small>Donec id elit non mi porta.</small>
+ </a>
+ <a href="#"
+ class="list-group-item list-group-item-action flex-column align-items-start">
+ <div class="d-flex w-100 justify-content-between">
+ <h5 class="mb-1">List group item heading</h5>
+ <small class="text-muted">3 days ago</small>
+ </div>
+ <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed
+ diam
+ eget risus varius
+ blandit.</p>
+ <small class="text-muted">Donec id elit non mi porta.</small>
+ </a>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="col-sm-12">
+ <h2>Cards</h2>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="col-sm-4">
+ <div class="bs-component">
+ <div class="card text-white bg-primary mb-3" style="max-width: 20rem;">
+ <div class="card-header">Header</div>
+ <div class="card-body">
+ <h4 class="card-title">Primary card title</h4>
+ <p class="card-text">Some quick example text to build on the card title and make
+ up
+ the bulk of the
+ card's content.</p>
+ </div>
+ </div>
+ <div class="card text-white bg-secondary mb-3" style="max-width: 20rem;">
+ <div class="card-header">Header</div>
+ <div class="card-body">
+ <h4 class="card-title">Secondary card title</h4>
+ <p class="card-text">Some quick example text to build on the card title and make
+ up
+ the bulk of the
+ card's content.</p>
+ </div>
+ </div>
+ <div class="card text-white bg-success mb-3" style="max-width: 20rem;">
+ <div class="card-header">Header</div>
+ <div class="card-body">
+ <h4 class="card-title">Success card title</h4>
+ <p class="card-text">Some quick example text to build on the card title and make
+ up
+ the bulk of the
+ card's content.</p>
+ </div>
+ </div>
+ <div class="card text-white bg-danger mb-3" style="max-width: 20rem;">
+ <div class="card-header">Header</div>
+ <div class="card-body">
+ <h4 class="card-title">Danger card title</h4>
+ <p class="card-text">Some quick example text to build on the card title and make
+ up
+ the bulk of the
+ card's content.</p>
+ </div>
+ </div>
+ <div class="card text-white bg-warning mb-3" style="max-width: 20rem;">
+ <div class="card-header">Header</div>
+ <div class="card-body">
+ <h4 class="card-title">Warning card title</h4>
+ <p class="card-text">Some quick example text to build on the card title and make
+ up
+ the bulk of the
+ card's content.</p>
+ </div>
+ </div>
+ <div class="card text-white bg-info mb-3" style="max-width: 20rem;">
+ <div class="card-header">Header</div>
+ <div class="card-body">
+ <h4 class="card-title">Info card title</h4>
+ <p class="card-text">Some quick example text to build on the card title and make
+ up
+ the bulk of the
+ card's content.</p>
+ </div>
+ </div>
+ <div class="card bg-light mb-3" style="max-width: 20rem;">
+ <div class="card-header">Header</div>
+ <div class="card-body">
+ <h4 class="card-title">Light card title</h4>
+ <p class="card-text">Some quick example text to build on the card title and make
+ up
+ the bulk of the
+ card's content.</p>
+ </div>
+ </div>
+ <div class="card text-white bg-dark mb-3" style="max-width: 20rem;">
+ <div class="card-header">Header</div>
+ <div class="card-body">
+ <h4 class="card-title">Dark card title</h4>
+ <p class="card-text">Some quick example text to build on the card title and make
+ up
+ the bulk of the
+ card's content.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="col-sm-4">
+ <div class="bs-component">
+ <div class="card border-primary mb-3" style="max-width: 20rem;">
+ <div class="card-header">Header</div>
+ <div class="card-body">
+ <h4 class="card-title">Primary card title</h4>
+ <p class="card-text">Some quick example text to build on the card title and make
+ up
+ the bulk of the
+ card's content.</p>
+ </div>
+ </div>
+ <div class="card border-secondary mb-3" style="max-width: 20rem;">
+ <div class="card-header">Header</div>
+ <div class="card-body">
+ <h4 class="card-title">Secondary card title</h4>
+ <p class="card-text">Some quick example text to build on the card title and make
+ up
+ the bulk of the
+ card's content.</p>
+ </div>
+ </div>
+ <div class="card border-success mb-3" style="max-width: 20rem;">
+ <div class="card-header">Header</div>
+ <div class="card-body">
+ <h4 class="card-title">Success card title</h4>
+ <p class="card-text">Some quick example text to build on the card title and make
+ up
+ the bulk of the
+ card's content.</p>
+ </div>
+ </div>
+ <div class="card border-danger mb-3" style="max-width: 20rem;">
+ <div class="card-header">Header</div>
+ <div class="card-body">
+ <h4 class="card-title">Danger card title</h4>
+ <p class="card-text">Some quick example text to build on the card title and make
+ up
+ the bulk of the
+ card's content.</p>
+ </div>
+ </div>
+ <div class="card border-warning mb-3" style="max-width: 20rem;">
+ <div class="card-header">Header</div>
+ <div class="card-body">
+ <h4 class="card-title">Warning card title</h4>
+ <p class="card-text">Some quick example text to build on the card title and make
+ up
+ the bulk of the
+ card's content.</p>
+ </div>
+ </div>
+ <div class="card border-info mb-3" style="max-width: 20rem;">
+ <div class="card-header">Header</div>
+ <div class="card-body">
+ <h4 class="card-title">Info card title</h4>
+ <p class="card-text">Some quick example text to build on the card title and make
+ up
+ the bulk of the
+ card's content.</p>
+ </div>
+ </div>
+ <div class="card border-light mb-3" style="max-width: 20rem;">
+ <div class="card-header">Header</div>
+ <div class="card-body">
+ <h4 class="card-title">Light card title</h4>
+ <p class="card-text">Some quick example text to build on the card title and make
+ up
+ the bulk of the
+ card's content.</p>
+ </div>
+ </div>
+ <div class="card border-dark mb-3" style="max-width: 20rem;">
+ <div class="card-header">Header</div>
+ <div class="card-body">
+ <h4 class="card-title">Dark card title</h4>
+ <p class="card-text">Some quick example text to build on the card title and make
+ up
+ the bulk of the
+ card's content.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="col-sm-4">
+ <div class="bs-component">
+ <div class="card mb-3">
+ <h3 class="card-header">Card header</h3>
+ <div class="card-body">
+ <h5 class="card-title">Special title treatment</h5>
+ <h6 class="card-subtitle text-muted">Support card subtitle</h6>
+ </div>
+ <img style="height: 200px; width: 100%; display: block;"
+ src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22318%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20318%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_158bd1d28ef%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_158bd1d28ef%22%3E%3Crect%20width%3D%22318%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22129.359375%22%20y%3D%2297.35%22%3EImage%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
+ alt="Card image">
+ <div class="card-body">
+ <p class="card-text">Some quick example text to build on the card title and make
+ up
+ the bulk of the
+ card's content.</p>
+ </div>
+ <ul class="list-group list-group-flush">
+ <li class="list-group-item">Cras justo odio</li>
+ <li class="list-group-item">Dapibus ac facilisis in</li>
+ <li class="list-group-item">Vestibulum at eros</li>
+ </ul>
+ <div class="card-body">
+ <a href="#" class="card-link">Card link</a>
+ <a href="#" class="card-link">Another link</a>
+ </div>
+ <div class="card-footer text-muted">
+ 2 days ago
+ </div>
+ </div>
+ <div class="card">
+ <div class="card-body">
+ <h4 class="card-title">Card title</h4>
+ <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
+ <p class="card-text">Some quick example text to build on the card title and make
+ up
+ the bulk of the
+ card's content.</p>
+ <a href="#" class="card-link">Card link</a>
+ <a href="#" class="card-link">Another link</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+ <!-- Dialogs
+ ================================================== -->
+ <div class="bs-docs-section">
+
+ <div class="row">
+ <div class="col-sm-12">
+ <div class="page-header">
+ <h2 id="dialogs">Dialogs</h2>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-sm-6">
+ <h2>Modals</h2>
+ <div class="bs-component">
+ <div class="modal">
+ <div class="modal-dialog" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title">Modal title</h5>
+ <button type="button" class="close" data-dismiss="modal"
+ aria-label="Close">
+ <span aria-hidden="true">×</span>
+ </button>
+ </div>
+ <div class="modal-body">
+ <p>Modal body text goes here.</p>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-primary">Save changes</button>
+ <button type="button" class="btn btn-secondary" data-dismiss="modal">
+ Close
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="col-sm-6">
+ <h2>Popovers</h2>
+ <div class="bs-component" style="margin-bottom: 3em;">
+ <button type="button" class="btn btn-secondary" title="Popover Title"
+ data-container="body"
+ data-toggle="popover"
+ data-placement="left"
+ data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Left
+ </button>
+
+ <button type="button" class="btn btn-secondary" title="Popover Title"
+ data-container="body"
+ data-toggle="popover"
+ data-placement="top"
+ data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Top
+ </button>
+
+ <button type="button" class="btn btn-secondary" title="Popover Title"
+ data-container="body"
+ data-toggle="popover"
+ data-placement="bottom" data-content="Vivamus
+ sagittis lacus vel augue laoreet rutrum faucibus.">Bottom
+ </button>
+
+ <button type="button" class="btn btn-secondary" title="Popover Title"
+ data-container="body"
+ data-toggle="popover"
+ data-placement="right"
+ data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Right
+ </button>
+ </div>
+ <h2>Tooltips</h2>
+ <div class="bs-component">
+ <button type="button" class="btn btn-secondary" data-toggle="tooltip"
+ data-placement="left"
+ title="Tooltip on left">Left
+ </button>
+
+ <button type="button" class="btn btn-secondary" data-toggle="tooltip"
+ data-placement="top"
+ title="Tooltip on top">Top
+ </button>
+
+ <button type="button" class="btn btn-secondary" data-toggle="tooltip"
+ data-placement="bottom" title="Tooltip on bottom">Bottom
+ </button>
+
+ <button type="button" class="btn btn-secondary" data-toggle="tooltip"
+ data-placement="right"
+ title="Tooltip on right">Right
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div id="source-modal" class="modal fade">
+ <div class="modal-dialog modal-lg">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h4 class="modal-title">Source Code</h4>
+ <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
+ </button>
+ </div>
+ <div class="modal-body">
+ <pre contenteditable></pre>
+ </div>
+ </div>
+ </div>
+ </div>
+ </main>
+ </BaseLayout>
+</template>
+
+<script>
+import {mapActions, mapState} from "vuex";
+import * as BIcons from "bootstrap-icons-vue";
+import BaseLayout from "@/components/BaseLayout.vue";
+
+export default {
+ name: "Swatch",
+ components: {
+ BaseLayout,
+ ...BIcons
+ },
+ computed: {
+ ...mapState(["tags", "properties", "categories", "availability_policies", "domains", "storage_locations"])
+ },
+ methods: {
+ ...mapActions(["fetchInfo", "fetchStorageLocations"])
+ },
+ async mounted() {
+ await this.fetchInfo();
+ await this.fetchStorageLocations();
+ }
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file