Skip to content

Instantly share code, notes, and snippets.

@ab007shetty

ab007shetty/dark-mode-switch.css

Last active July 3, 2021 18:11
Show Gist options
  • Save ab007shetty/be80f5dac2bf240dacf814db553285ac to your computer and use it in GitHub Desktop.
Save ab007shetty/be80f5dac2bf240dacf814db553285ac to your computer and use it in GitHub Desktop.
Download ZIP
Add a dark-mode theme switch with a Bootstrap Custom Switch
Raw
dark-mode-switch.css
[data-theme="dark"] {
background-color: #111 !important;
color: #eee;
}
[data-theme="dark"] .bg-black {
background-color: #fff !important;
}
[data-theme="dark"] .bg-dark {
background-color: #eee !important;
}
[data-theme="dark"] .bg-light {
background-color: #222 !important;
}
[data-theme="dark"] .bg-white {
background-color: #000 !important;
}
Raw
dark-mode-switch.html
<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Mode Switch</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="dark-mode-switch.css">
</head>
<body class="bg-white text-center d-flex h-100">
<div class="container d-flex p-3 mx-auto w-100 flex-column">
<header class="mb-auto">
<div class="float-md-start fw-bold fs-5">Dark Mode Switch</div>
<nav class="nav justify-content-center float-md-end">
<div class="nav-link">
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="darkSwitch">
<label class="custom-control-label" for="darkSwitch">Dark Mode</label>
</div>
<script src="dark-mode-switch.js"></script>
</div>
</nav>
</header>
<main role="main">
<h1>🌓 Dark Mode Switch</h1>
<p class="lead">Add a dark-mode theme switch with a Bootstrap Custom Switch</p>
</main>
<footer class="mt-auto">
<p>&copy; 2021</p>
</footer>
</div>
</body>
</html>
Raw
dark-mode-switch.js
var darkSwitch = document.getElementById("darkSwitch");
window.addEventListener("load", function () {
if (darkSwitch) {
initTheme();
darkSwitch.addEventListener("change", function () {
resetTheme();
});
}
});
/**
* Summary: function that adds or removes the attribute 'data-theme' depending if
* the switch is 'on' or 'off'.
*
* Description: initTheme is a function that uses localStorage from JavaScript DOM,
* to store the value of the HTML switch. If the switch was already switched to
* 'on' it will set an HTML attribute to the body named: 'data-theme' to a 'dark'
* value. If it is the first time opening the page, or if the switch was off the
* 'data-theme' attribute will not be set.
* @return {void}
*/
function initTheme() {
var darkThemeSelected =
localStorage.getItem("darkSwitch") !== null &&
localStorage.getItem("darkSwitch") === "dark";
darkSwitch.checked = darkThemeSelected;
darkThemeSelected
? document.body.setAttribute("data-theme", "dark")
: document.body.removeAttribute("data-theme");
}
/**
* Summary: resetTheme checks if the switch is 'on' or 'off' and if it is toggled
* on it will set the HTML attribute 'data-theme' to dark so the dark-theme CSS is
* applied.
* @return {void}
*/
function resetTheme() {
if (darkSwitch.checked) {
document.body.setAttribute("data-theme", "dark");
localStorage.setItem("darkSwitch", "dark");
} else {
document.body.removeAttribute("data-theme");
localStorage.removeItem("darkSwitch");
}
}
Raw
testpage.html
<!DOCTYPE html>
<html lang="en" id="top">
<head>
<meta charset="utf-8">
<title>Bootstrap 4 test page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-dark.min.css" id="hljs-theme">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
#typography {
margin-top: -3rem;
}
.modal {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
z-index: 1;
display: block;
}
</style>
<!-- BEGIN INSERTION -->
<link rel="stylesheet" href="dark-mode.css">
<!-- END INSERTION -->
</head>
<body data-spy="scroll" data-target="#my-navbar" data-offset="100">
<!-- BEGIN INSERTION -->
<script src="dist/theme.js"></script>
<script>
const themeConfig = new ThemeConfig();
themeConfig.initTheme();
</script>
<!-- END INSERTION -->
<header class="bg-dark text-light pt-5 pb-5">
<div class="container">
<h1 class="display-3">Bootstrap 4 test page</h1>
</div>
</header>
<nav class="navbar sticky-top navbar-expand-md navbar-dark bg-dark">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#my-navbar" aria-controls="my-navbar" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="my-navbar">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link" href="#typography"
data-toggle="tooltip" data-placement="bottom" title="Typography">
<span class="fa fa-paragraph mx-2"></span>
<span class="d-md-none">Typography</span>
</a>
<a class="nav-item nav-link" href="#images"
data-toggle="tooltip" data-placement="bottom" title="Images">
<span class="fa fa-picture-o mx-2"></span>
<span class="d-md-none">Images</span>
</a>
<a class="nav-item nav-link" href="#tables"
data-toggle="tooltip" data-placement="bottom" title="Tables">
<span class="fa fa-table mx-2"></span>
<span class="d-md-none">Tables</span>
</a>
<a class="nav-item nav-link" href="#list-groups"
data-toggle="tooltip" data-placement="bottom" title="List groups">
<span class="fa fa-list-ul mx-2"></span>
<span class="d-md-none">List groups</span>
</a>
<a class="nav-item nav-link" href="#buttons"
data-toggle="tooltip" data-placement="bottom" title="Buttons">
<span class="fa fa-square mx-2"></span>
<span class="d-md-none">Buttons</span>
</a>
<a class="nav-item nav-link" href="#jumbotrons"
data-toggle="tooltip" data-placement="bottom" title="Jumbotrons">
<span class="fa fa-bookmark mx-2"></span>
<span class="d-md-none">Jumbotrons</span>
</a>
<a class="nav-item nav-link" href="#cards"
data-toggle="tooltip" data-placement="bottom" title="Cards">
<span class="fa fa-square-o mx-2"></span>
<span class="d-md-none">Cards</span>
</a>
<a class="nav-item nav-link" href="#forms"
data-toggle="tooltip" data-placement="bottom" title="Forms">
<span class="fa fa-pencil mx-2"></span>
<span class="d-md-none">Forms</span>
</a>
<a class="nav-item nav-link" href="#navs"
data-toggle="tooltip" data-placement="bottom" title="Navs">
<span class="fa fa-bars mx-2"></span>
<span class="d-md-none">Navs</span>
</a>
<a class="nav-item nav-link" href="#badges"
data-toggle="tooltip" data-placement="bottom" title="Badges">
<span class="fa fa-tag mx-2"></span>
<span class="d-md-none">Badges</span>
</a>
<a class="nav-item nav-link" href="#alerts"
data-toggle="tooltip" data-placement="bottom" title="Alerts">
<span class="fa fa-exclamation-triangle mx-2"></span>
<span class="d-md-none">Alerts</span>
</a>
<a class="nav-item nav-link" href="#popovers"
data-toggle="tooltip" data-placement="bottom" title="Popovers">
<span class="fa fa-info-circle mx-2"></span>
<span class="d-md-none">Popovers</span>
</a>
<a class="nav-item nav-link" href="#progress-bars"
data-toggle="tooltip" data-placement="bottom" title="Progress bars">
<span class="fa fa-spinner mx-2"></span>
<span class="d-md-none">Progress bars</span>
</a>
<a class="nav-item nav-link" href="#modals"
data-toggle="tooltip" data-placement="bottom" title="Modals">
<span class="fa fa-window-restore mx-2"></span>
<span class="d-md-none">Modals</span>
</a>
<div class="nav-link">
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="darkSwitch">
<label class="custom-control-label" for="darkSwitch">Dark Mode</label>
</div>
<script src="dark-mode-switch.js"></script>
</div>
</div>
<div class="navbar-nav">
<a class="nav-item nav-link" href="https://getbootstrap.com/docs/4.1/" target="_blank"
data-toggle="tooltip" data-placement="bottom" title="Bootstrap documentation">
<span class="fa fa-book mx-2"></span>
<span class="d-md-none">Bootstrap documentation</span>
</a>
<a class="nav-item nav-link" href="https://github.com/juzraai/bootstrap4-test-page"
data-toggle="tooltip" data-placement="bottom" title="Source code">
<span class="fa fa-github mx-2"></span>
<span class="d-md-none">Source code</span>
</a>
</div>
</div>
</div>
</nav>
<main>
<section class="mb-5 pt-5" id="typography">
<div class="row bg-light py-4 mb-5">
<div class="container">
<div class="d-flex justify-content-between">
<h2>
<span class="fa fa-paragraph mr-1"></span>
Typography
</h2>
<h2>
<a href="https://getbootstrap.com/docs/4.1/content/typography/" target="_blank"
data-toggle="tooltip" data-placement="bottom" title="Typography docs"><span class="fa fa-book fw"></span></a>
<a href="https://getbootstrap.com/docs/4.1/content/code/" target="_blank"
data-toggle="tooltip" data-placement="bottom" title="Code docs"><span class="fa fa-book fw"></span></a>
<a href="https://getbootstrap.com/docs/4.1/utilities/colors/" target="_blank"
data-toggle="tooltip" data-placement="bottom" title="Color utility docs"><span class="fa fa-book fw"></span></a>
<a href="https://getbootstrap.com/docs/4.1/utilities/text/" target="_blank"
data-toggle="tooltip" data-placement="bottom" title="Text utility docs"><span class="fa fa-book fw"></span></a>
<a href="#top" class="ml-3"><span class="fa fa-chevron-up fw"></span></a>
</h2>
</div>
</div>
</div>
<div class="container">
<div class="row px-5">
<div class="col-md-6">
<h3 class="mt-5">Headings</h3>
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
<h3 class="mt-5">Horizontal Line</h3>
<hr/>
<h3 class="mt-5">Lead</h3>
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
<h3 class="mt-5">Styles</h3>
<p>You can use the mark tag to
<mark>highlight</mark> text.</p>
<p>
<del>This line of text is meant to be treated as deleted text.</del>
</p>
<p>
<s>This line of text is meant to be treated as no longer accurate.</s>
</p>
<p>
<ins>This line of text is meant to be treated as an addition to the document.</ins>
</p>
<p>
<u>This line of text will render as underlined</u>
</p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
<p class="text-muted">And this is a muted text.</p>
<p><abbr title="Abbreviation">abbr</abbr> <abbr title="Abbreviation with initialism" class="initialism">abbr+init</abbr></p>
<h3 class="mt-5">Colors</h3>
<p>
<span class="text-primary">.text-primary</span>
<span class="text-secondary">.text-secondary</span>
<span class="text-success">.text-success</span>
<span class="text-danger">.text-danger</span>
<span class="text-warning">.text-warning</span>
<span class="text-info">.text-info</span>
<span class="text-light">.text-light</span>
<span class="text-dark">.text-dark</span>
<span class="text-white">.text-white</span>
</p>
<p>
<span><a href="#" class="text-primary">Primary link</a></span>
<span><a href="#" class="text-secondary">Secondary link</a></span>
<span><a href="#" class="text-success">Success link</a></span>
<span><a href="#" class="text-danger">Danger link</a></span>
<span><a href="#" class="text-warning">Warning link</a></span>
<span><a href="#" class="text-info">Info link</a></span>
<span><a href="#" class="text-light">Light link</a></span>
<span><a href="#" class="text-dark">Dark link</a></span>
<span><a href="#" class="text-white">White link</a></span>
</p>
<h3 class="mt-5">Inline code</h3>
<p>For example, <code>&lt;section&gt;</code> should be wrapped as inline.</p>
<p><var>y</var> = <var>m</var><var>x</var> + <var>b</var></p>
<p>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>
</p>
<p><samp>This text is meant to be treated as sample output from a computer program.</samp></p>
</div>
<div class="col-md-6">
<h3 class="mt-5">Displays</h3>
<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>
<h3 class="mt-5">Sample body</h3>
<p class="text-justify">
Lórum ipse - mint senyért - nyált <a href="javascript:void(0)">ságos iség</a>, ahol beles metás, csaprozás, vermény, csaprát
és más meni zsorlóca kuncáskodik. Mosztag, férzet napé, fuvódás 11, törnyélés ; valamint szuvegés vitancs: a dozmus drikója,
jultsás kelés magyarul. A szuvegés és gyarány pasztákban buggyos mendernyékről, filingéjükről és pucájukról húzódik a
fabampa. Hűtő benne a legújabban belég mendernyék mártja is, részletesen sáskodik a kétenc fríg lepkonyaival. Csétletésről
cigál le egy kéző lengelész csapárába rimulnia, ahol három másik szivény együtt érleti spotráit. Ha a bénulás summája
kalkodik, úgy púdulhat, mintha az volna a sülső csoltása, hogy a szedhentes és egyes tengyelét lécetse ki a pávágyokból.
Ez vajon vertető ölyök vagy vegítő dosna? Szalalizál bunya a felegesben olyan szellőző kedő, amely farisban kevetteti
a nyagondos hizmusok „énemlő” lárias mizmusait?
</p>
<h3 class="mt-5">Code block</h3>
<button class="btn btn-sm btn-primary my-1" id="hljs-theme-toggler">Toggle HLJS theme</button>
<pre><code>/**
* @author John Smith &lt;john.smith@example.com&gt;
*/
package l2f.gameserver.model;
public abstract class L2Char extends L2Object {
public static final Short ERROR = 0x0001;
public void moveTo(int x, int y, int z) {
_ai = null;
log("Should not be called");
if (1 &gt; 5) { // wtf!?
return;
}
}
}</code></pre>
</div>
</div>
<div class="row px-5">
<div class="col-12">
<h3 class="mt-5">Blockquote</h3>
<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="row px-5">
<div class="col-12">
<h3 class="mt-5">...centered</h3>
<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="row px-5">
<div class="col-12">
<h3 class="mt-5">...on right</h3>
<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 class="row px-5">
<div class="col-4">
<h3 class="mt-5">List</h3>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
</div>
<div class="col-4">
<h3 class="mt-5">...unstyled</h3>
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
</div>
<div class="col-4">
<h3 class="mt-5">...inline</h3>
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
<li class="list-inline-item">Nulla volutpat</li>
</ul>
</div>
</div>
<div class="row px-5">
<div class="col-12">
<h3 class="mt-5">Definition list</h3>
</div>
</div>
<dl class="row px-5">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
<dt class="col-sm-3">Euismod</dt>
<dd class="col-sm-9">
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
<p>Donec id elit non mi porta gravida at eget metus.</p>
</dd>
<dt class="col-sm-3">Malesuada porta</dt>
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
</dl>
</dd>
</dl>
<div class="row px-5">
<div class="col-12">
<h3 class="mt-5">Background colors</h3>
</div>
<div class="col-md-4">
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
</div>
<div class="col-md-4">
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
</div>
</div>
</div>
</div>
</section>
<section class="mb-5 pt-5" id="images">
<div class="row bg-light py-4 mb-5">
<div class="container">
<div class="d-flex justify-content-between">
<h2>
<span class="fa fa-picture-o mr-1"></span>
Images
</h2>
<h2>
<a href="https://getbootstrap.com/docs/4.1/content/images/" target="_blank"
data-toggle="tooltip" data-placement="bottom" title="Image docs"><span class="fa fa-book fw"></span></a>
<a href="https://getbootstrap.com/docs/4.1/content/figures/" target="_blank"
data-toggle="tooltip" data-placement="bottom" title="Figure docs"><span class="fa fa-book fw"></span></a>
<a href="https://getbootstrap.com/docs/4.1/layout/media-object/" target="_blank"
data-toggle="tooltip" data-placement="bottom" title="Media object docs"><span class="fa fa-book fw"></span></a>
<a href="#top" class="ml-3"><span class="fa fa-chevron-up fw"></span></a>
</h2>
</div>
</div>
</div>
<div class="container">
<div class="row px-5">
<div class="col-12">
<h3 class="mt-5">Responsive image</h3>
<img data-src="holder.js/100px250" alt="responsive image" class="img-fluid">
</div>
<div class="col-md-6">
<h3 class="mt-5">Thumbnail</h3>
<img src="holder.js/200x200" alt="thumbnail image" class="img-thumbnail">
</div>
<div class="col-md-6">
<h3 class="mt-5">Figure</h3>
<figure class="figure">
<img data-src="holder.js/300x200" class="figure-img img-fluid rounded" alt="Figure">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
</div>
<div class="col-12">
<h3 class="mt-5">Media</h3>
<div class="media">
<img class="d-flex mr-3" src="holder.js/64x64" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in
faucibus.
<div class="media mt-3">
<a class="d-flex pr-3" href="#">
<img src="holder.js/64x64" alt="Generic placeholder image">
</a>
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis
in faucibus.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="mb-5 pt-5" id="tables">
<div class="row bg-light py-4 mb-5">
<div class="container">
<div class="d-flex justify-content-between">
<h2>
<span class="fa fa-table mr-1"></span>
Tables
</h2>
<h2>
<a href="https://getbootstrap.com/docs/4.1/content/tables/" target="_blank"
data-toggle="tooltip" data-placement="bottom" title="Table docs"><span class="fa fa-book fw"></span></a>
<a href="#top" class="ml-3"><span class="fa fa-chevron-up fw"></span></a>
</h2>
</div>
</div>
</div>
<div class="container">
<div class="row px-5">
<div class="col-md-6">
<h3 class="mt-5">Table</h3>
<table class="table table-bordered table-striped table-hover">
<thead class="">
<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>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-6">
<h3 class="mt-5">Inversed table</h3>
<table class="table table-bordered table-striped table-hover table-dark">
<thead class="">
<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>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row px-5">
<div class="col-md-6">
<h3 class="mt-5">Table with colors</h3>
<p><strong>Note: </strong> Use <code>table-*</code> classes.</p>
<table class="table table-hover">
<thead>
<tr>
<th>Type</th>
<th>Column heading</th>
<th>Column heading</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Default</th>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-active">
<th scope="row">Active</th>
<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>
</tr>
<tr class="table-secondary">
<th scope="row">Secondary</th>
<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>
</tr>
<tr class="table-danger">
<th scope="row">Danger</th>
<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>
</tr>
<tr class="table-info">
<th scope="row">Info</th>
<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>
</tr>
<tr class="table-dark">
<th scope="row">Dark</th>
<td>Column content</td>
<td>Column content</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-6">
<h3 class="mt-5">Inversed table with colors</h3>
<p><strong>Note: </strong> Use <code>bg-*</code> and <code>text-*</code> classes.</p>
<table class="table table-hover table-dark">
<thead>
<tr>
<th>Type</th>
<th>Column heading</th>
<th>Column heading</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Default</th>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="bg-primary ">
<th scope="row">Primary</th>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="bg-secondary ">
<th scope="row">Secondary</th>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="bg-success ">
<th scope="row">Success</th>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="bg-danger ">
<th scope="row">Danger</th>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="bg-warning text-dark">
<th scope="row">Warning</th>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="bg-info ">
<th scope="row">Info</th>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="bg-light text-dark">
<th scope="row">Light</th>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="bg-dark ">
<th scope="row">Dark</th>
<td>Column content</td>
<td>Column content</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row px-5">
<div class="col-md-6">
<h3 class="mt-5">Default header</h3>
<table class="table ">
<thead class="thead-light">
<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>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-6">
<h3 class="mt-5">Inversed header</h3>
<table class="table ">
<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>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row px-5">
<div class="col-md-6">
<h3 class="mt-5">Small table</h3>
<table class="table table-sm">
<thead class="">
<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>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<section class="mb-5 pt-5" id="list-groups">
<div class="row bg-light py-4 mb-5">
<div class="container">
<div class="d-flex justify-content-between">
<h2>
<span class="fa fa-list-ul mr-1"></span>
List groups
</h2>
<h2>
<a href="https://getbootstrap.com/docs/4.1/components/list-group/" target="_blank"
data-toggle="tooltip" data-placement="bottom" title="List group docs"><span class="fa fa-book fw"></span></a>
<a href="#top" class="ml-3"><span class="fa fa-chevron-up fw"></span></a>
</h2>
</div>
</div>
</div>
<div class="container">
<div class="row px-5">
<div class="col-12">
</div>
<div class="col-md-6">
<h3 class="mt-5">...with actions and colors</h3>
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action">This is a regular list group item</button>
<button type="button" class="list-group-item list-group-item-action list-group-item-active" >
This is a(n) active list group item
</button>
<button type="button" class="list-group-item list-group-item-action list-group-item-disabled" >
This is a(n) disabled list group item
</button>
<button type="button" class="list-group-item list-group-item-action list-group-item-primary" >
This is a(n) primary list group item
</button>
<button type="button" class="list-group-item list-group-item-action list-group-item-secondary" >
This is a(n) secondary list group item
</button>
<button type="button" class="list-group-item list-group-item-action list-group-item-success" >
This is a(n) success list group item
</button>
<button type="button" class="list-group-item list-group-item-action list-group-item-danger" >
This is a(n) danger list group item
</button>
<button type="button" class="list-group-item list-group-item-action list-group-item-warning" >
This is a(n) warning list group item
</button>
<button type="button" class="list-group-item list-group-item-action list-group-item-info" >
This is a(n) info list group item
</button>
<button type="button" class="list-group-item list-group-item-action list-group-item-light" >
This is a(n) light list group item
</button>
<button type="button" class="list-group-item list-group-item-action list-group-item-dark" >
This is a(n) dark list group item
</button>
</div>
</div>
<div class="col-md-6">
<h3 class="mt-5">...with custom content</h3>
<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>
<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>
</section>
<section class="mb-5 pt-5" id="buttons">
<div class="row bg-light py-4 mb-5">
<div class="container">
<div class="d-flex justify-content-between">
<h2>
<span class="fa fa-square mr-1"></span>
Buttons
</h2>
<h2>
<a href="https://getbootstrap.com/docs/4.1/components/buttons/" target="_blank"
data-toggle="tooltip" data-placement="bottom" title="Button docs"><span class="fa fa-book fw"></span></a>
<a href="https://getbootstrap.com/docs/4.1/components/button-group/" target="_blank"
data-toggle="tooltip" data-placement="bottom" title="Button group docs"><span class="fa fa-book fw"></span></a>
<a href="https://getbootstrap.com/docs/4.1/components/pagination/" target="_blank"
data-toggle="tooltip" data-placement="bottom" title="Pagination docs"><span class="fa fa-book fw"></span></a>
<a href="https://getbootstrap.com/docs/4.1/components/dropdowns/" target="_blank"
data-toggle="tooltip" data-placement="bottom" title="Dropdown docs"><span class="fa fa-book fw"></span></a>
<a href="#top" class="ml-3"><span class="fa fa-chevron-up fw"></span></a>
</h2>
</div>
</div>
</div>
<div class="container">
<div class="row px-5">
<div class="col-12">
<h3 class="mt-5">General buttons</h3>
<div class="my-1">
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>
<button class="btn btn-link">Link</button>
<button class="btn">Default</button>
</div>
<div class="my-1">
<button class="btn btn-primary active">Primary</button>
<button class="btn btn-secondary active">Secondary</button>
<button class="btn btn-success active">Success</button>
<button class="btn btn-danger active">Danger</button>
<button class="btn btn-warning active">Warning</button>
<button class="btn btn-info active">Info</button>
<button class="btn btn-light active">Light</button>
<button class="btn btn-dark active">Dark</button>
<button class="btn btn-link active">Link</button>
<button class="btn active">Default</button>
</div>
<div class="my-1">
<button class="btn btn-primary" disabled>Primary</button>
<button class="btn btn-secondary" disabled>Secondary</button>
<button class="btn btn-success" disabled>Success</button>
<button class="btn btn-danger" disabled>Danger</button>
<button class="btn btn-warning" disabled>Warning</button>
<button class="btn btn-info" disabled>Info</button>
<button class="btn btn-light" disabled>Light</button>
<button class="btn btn-dark" disabled>Dark</button>
<button class="btn btn-link" disabled>Link</button>
<button class="btn" disabled>Default</button>
</div>
<h3 class="mt-5">Outline buttons</h3>
<div class="my-1">
<button class="btn btn-outline-primary">Primary</button>
<button class="btn btn-outline-secondary">Secondary</button>
<button class="btn btn-outline-success">Success</button>
<button class="btn btn-outline-danger">Danger</button>
<button class="btn btn-outline-warning">Warning</button>
<button class="btn btn-outline-info">Info</button>
<button class="btn btn-outline-light">Light</button>
<button class="btn btn-outline-dark">Dark</button>
</div>
<div class="my-1">
<button class="btn btn-outline-primary active">Primary</button>
<button class="btn btn-outline-secondary active">Secondary</button>
<button class="btn btn-outline-success active">Success</button>
<button class="btn btn-outline-danger active">Danger</button>
<button class="btn btn-outline-warning active">Warning</button>
<button class="btn btn-outline-info active">Info</button>
<button class="btn btn-outline-light active">Light</button>
<button class="btn btn-outline-dark active">Dark</button>
</div>
<div class="my-1">
<button class="btn btn-outline-primary" disabled>Primary</button>
<button class="btn btn-outline-secondary" disabled>Secondary</button>
<button class="btn btn-outline-success" disabled>Success</button>
<button class="btn btn-outline-danger" disabled>Danger</button>
<button class="btn btn-outline-warning" disabled>Warning</button>
<button class="btn btn-outline-info" disabled>Info</button>
<button class="btn btn-outline-light" disabled>Light</button>
<button class="btn btn-outline-dark" disabled>Dark</button>
</div>
</div>
<div class="col-md-6">
<h3 class="mt-5">Sizes</h3>
<div class="my-1">
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary">Normal button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
</div>
</div>
<div class="col-md-6">
<h3 class="mt-5">Groups and dropdown</h3>
<div class="btn-toolbar my-1" 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>
</div>
<div class="btn-group mr-2" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-secondary">4</button>
<button type="button" class="btn btn-secondary">5</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary">Action</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu dropdown-menu-right">
<h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Disabled link</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-12">
<h3 class="mt-5">Pagination</h3>
<nav aria-label="Pagination example">
<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>
</section>
<section class="mb-5 pt-5" id="jumbotrons">
<div class="row bg-light py-4 mb-5">
<div class="container">
<div class="d-flex justify-content-between">
<h2>
<span class="fa fa-bookmark mr-1"></span>
Jumbotrons
</h2>
<h2>
<a href="https://getbootstrap.com/docs/4.1/components/jumbotron/" target="_blank"
data-toggle="tooltip" data-placement="bottom" title="Jumbotron docs"><span class="fa fa-book fw"></span></a>
<a href="#top" class="ml-3"><span class="fa fa-chevron-up fw"></span></a>
</h2>
</div>
</div>
</div>
<div class="container">
<div class="row px-5">
<div class="col-12">
<h3 class="mt-5">Default jumbotron</h3>
<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>
<h3 class="mt-5">Fluid jumbotron</h3>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-3">Fluid jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="mb-5 pt-5" id="cards">
<div class="row bg-light py-4 mb-5">
<div class="container">
<div class="d-flex justify-content-between">
<h2>
<span class="fa fa-square-o mr-1"></span>
Cards
</h2>
<h2>
<a href="https://getbootstrap.com/docs/4.1/components/card/" target="_blank"
data-toggle="tooltip" data-placement="bottom" title="Card docs"><span class="fa fa-book fw"></span></a>
<a href="#top" class="ml-3"><span class="fa fa-chevron-up fw"></span></a>
</h2>
</div>
</div>
</div>
<div class="container">
<div class="row px-5">
<div class="col-12">
<h3 class="mt-5">Various types of cards</h3>
<div class="card-columns">
<div class="card">
<div class="card-body">
This is some text within a card block.
</div>
</div>
<div class="card">
<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>
<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 class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<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>
<div class="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 class="card">
<img class="card-img" src="holder.js/100px120" alt="Card image">
</div>
<div class="card">
<img class="card-img-top" src="holder.js/100px120" alt="Card image cap">
<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>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little
bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<img class="card-img-bottom" src="holder.js/100px120" alt="Card image cap">
</div>
<div class="card">
<img class="card-img-top" src="holder.js/100px120" 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>
</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>
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<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 class="card text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<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>
</div>
<div class="row px-5">
<div class="col-12">
<h3 class="mt-5">Colored cards</h3>
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<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</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 class="col-sm-6 col-md-4 col-xl-3">
<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</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 class="col-sm-6 col-md-4 col-xl-3">
<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</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 class="col-sm-6 col-md-4 col-xl-3">
<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</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 class="col-sm-6 col-md-4 col-xl-3">
<div class="card bg-warning mb-3" style="max-width: 20rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Warning card</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 class="col-sm-6 col-md-4 col-xl-3">
<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</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 class="col-sm-6 col-md-4 col-xl-3">
<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</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 class="col-sm-6 col-md-4 col-xl-3">
<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</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="row px-5">
<div class="col-12">
<h3 class="mt-5">Cards with colored borders</h3>
</div>
<div class="col-sm-6 col-md-4 col-xl-3">
<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</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 class="col-sm-6 col-md-4 col-xl-3">
<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</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 class="col-sm-6 col-md-4 col-xl-3">
<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</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 class="col-sm-6 col-md-4 col-xl-3">
<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</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 class="col-sm-6 col-md-4 col-xl-3">
<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</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 class="col-sm-6 col-md-4 col-xl-3">
<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</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 class="col-sm-6 col-md-4 col-xl-3">
<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</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 class="col-sm-6 col-md-4 col-xl-3">
<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</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>
</section>
<section class="mb-5 pt-5" id="forms">
<div class="row bg-light py-4 mb-5">
<div class="container">
<div class="d-flex justify-content-between">
<h2>
<span class="fa fa-pencil mr-1"></span>
Forms
</h2>
<h2>
<a href="https://getbootstrap.com/docs/4.1/components/forms/" target="_blank"
data-toggle="tooltip" data-placement="bottom" title="Form docs"><span class="fa fa-book fw"></span></a>
<a href="https://getbootstrap.com/docs/4.1/components/input-group/" target="_blank"
data-toggle="tooltip" data-placement="bottom" title="Input group docs"><span class="fa fa-book fw"></span></a>
<a href="#top" class="ml-3"><span class="fa fa-chevron-up fw"></span></a>
</h2>
</div>
</div>
</div>
<div class="container">
<form>
<div class="row px-5">
<div class="col-md-6">
<h3 class="mt-5">Text fields</h3>
<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">
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<input class="form-control" type="text" placeholder="Readonly input" readonly>
</div>
<div class="form-group">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="Readonly input as plain text">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Disabled input" disabled>
</div>
<div class="form-group">
<label for="validText">Valid input</label>
<input type="text" class="form-control is-valid" id="validText" value="Valid input">
</div>
<div class="form-group">
<label for="invalidText">Invalid input</label>
<input type="text" class="form-control is-invalid" id="invalidText" value="Invalid input">
<div class="invalid-feedback">Please provide a valid value.</div>
</div>
<div class="form-group">
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
</div>
<div class="form-group">
<input class="form-control" type="text" placeholder="Default input">
</div>
<div class="form-group">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
</div>
<div class="form-group">
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-secondary" type="button">Hate it</button>
</div>
<input type="text" class="form-control" placeholder="Product name" aria-label="Product name">
<div class="input-group-append">
<button class="btn btn-secondary" type="button">Love it</button>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<h3 class="mt-5">Layouts</h3>
<div class="form-group">
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="Row / input 1">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Row / input 2">
</div>
</div>
</div>
<div class="form-group">
<div class="form-row">
<div class="col">
<input type="text" class="form-control" placeholder="Form row / input 1">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Form row / input 2">
</div>
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-4 col-form-label">Horizontal</label>
<div class="col-sm-8">
<input type="email" class="form-control" id="inputEmail3" placeholder="form layout">
</div>
</div>
<div class="form-group">
<div class="form-inline">
<input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" placeholder="Inline input 1">
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" placeholder="Inline input 2">
</div>
</div>
</div>
<div class="form-group">
<div class="form-inline">
<div class="form-group">
<label for="inputPassword6">Password</label>
<input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
<small id="passwordHelpInline" class="text-muted">Must be 8-20 characters long.</small>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<h3 class="mt-5">Selects</h3>
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlSelect2">Example multiple select</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<select class="form-control form-control-lg">
<option>Large select</option>
</select>
</div>
<div class="form-group">
<select class="form-control">
<option>Default select</option>
</select>
</div>
<div class="form-group">
<select class="form-control form-control-sm">
<option>Small select</option>
</select>
</div>
<div class="form-group">
<select class="custom-select">
<option selected>Custom select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<h3 class="mt-5">Checkboxes</h3>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="">
Option one is this and that&mdash;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>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Custom checkbox</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck2">
<label class="custom-control-label" for="customCheck2">Custom checkbox</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck3" disabled>
<label class="custom-control-label" for="customCheck3">Disabled custom checkbox</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input is-valid" id="customCheck4">
<label class="custom-control-label" for="customCheck4">Valid custom checkbox</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input is-invalid" id="customCheck5">
<label class="custom-control-label" for="customCheck5">Invalid custom checkbox</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> 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="option2"> 2
</label>
</div>
<div class="form-check form-check-inline disabled">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled> 3
</label>
</div>
<h3 class="mt-5">Radio buttons</h3>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
Option one is this and that&mdash;be sure to include why it's great
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">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">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 class="custom-control custom-radio">
<input type="radio" id="customRadio4" name="customRadio" class="custom-control-input is-valid">
<label class="custom-control-label" for="customRadio4">Valid radio</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio5" name="customRadio" class="custom-control-input is-invalid">
<label class="custom-control-label" for="customRadio5">Invalid radio</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="option1"> 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="option2"> 2
</label>
</div>
<div class="form-check form-check-inline disabled">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled> 3
</label>
</div>
<h3 class="mt-5">Files</h3>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
</div>
</div>
</form>
</div>
</section>
<section class="mb-5 pt-5" id="navs">
<div class="row bg-light py-4 mb-5">
<div class="container">
<div class="d-flex justify-content-between">
<h2>
<span class="fa fa-bars mr-1"></span>
Navs
</h2>
<h2>
<a href="https://getbootstrap.com/docs/4.1/components/navbar/" target="_blank"
data-toggle="tooltip" data-placement="bottom" title="Navbar docs"><span class="fa fa-book fw"></span></a>
<a href="https://getbootstrap.com/docs/4.1/components/navs/" target="_blank"
data-toggle="tooltip" data-placement="bottom" title="Navs' docs"><span class="fa fa-book fw"></span></a>
<a href="https://getbootstrap.com/docs/4.1/components/breadcrumb/" target="_blank"
data-toggle="tooltip" data-placement="bottom" title="Breadcrumb docs"><span class="fa fa-book fw"></span></a>
<a href="https://getbootstrap.com/docs/4.1/components/dropdowns/" target="_blank"
data-toggle="tooltip" data-placement="bottom" title="Dropdown docs"><span class="fa fa-book fw"></span></a>
<a href="https://getbootstrap.com/docs/4.1/components/scrollspy/" target="_blank"
data-toggle="tooltip" data-placement="bottom" title="Scrollspy docs"><span class="fa fa-book fw"></span></a>
<a href="https://getbootstrap.com/docs/4.1/utilities/position/" target="_blank"
data-toggle="tooltip" data-placement="bottom" title="Position docs"><span class="fa fa-book fw"></span></a>
<a href="#top" class="ml-3"><span class="fa fa-chevron-up fw"></span></a>
</h2>
</div>
</div>
</div>
<div class="container">
<div class="row px-5">
<div class="col-12">
<h3 class="mt-5">Navbars</h3>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary my-2">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-primary"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-primary">
<div class="nav navbar-nav">
<a class="nav-item nav-link active" href="#">Active</a>
<a class="nav-item nav-link" href="#">Link</a>
<div 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>
</div>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
<span class="navbar-text ml-2 mr-auto">Text</span>
<form class="form-inline">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-secondary my-2">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-secondary"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-secondary">
<div class="nav navbar-nav">
<a class="nav-item nav-link active" href="#">Active</a>
<a class="nav-item nav-link" href="#">Link</a>
<div 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>
</div>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
<span class="navbar-text ml-2 mr-auto">Text</span>
<form class="form-inline">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-success my-2">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-success"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-success">
<div class="nav navbar-nav">
<a class="nav-item nav-link active" href="#">Active</a>
<a class="nav-item nav-link" href="#">Link</a>
<div 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>
</div>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
<span class="navbar-text ml-2 mr-auto">Text</span>
<form class="form-inline">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-danger my-2">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-danger"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-danger">
<div class="nav navbar-nav">
<a class="nav-item nav-link active" href="#">Active</a>
<a class="nav-item nav-link" href="#">Link</a>
<div 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>
</div>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
<span class="navbar-text ml-2 mr-auto">Text</span>
<form class="form-inline">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-light bg-warning my-2">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-warning"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-warning">
<div class="nav navbar-nav">
<a class="nav-item nav-link active" href="#">Active</a>
<a class="nav-item nav-link" href="#">Link</a>
<div 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>
</div>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
<span class="navbar-text ml-2 mr-auto">Text</span>
<form class="form-inline">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-dark my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-info my-2">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-info"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-info">
<div class="nav navbar-nav">
<a class="nav-item nav-link active" href="#">Active</a>
<a class="nav-item nav-link" href="#">Link</a>
<div 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>
</div>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
<span class="navbar-text ml-2 mr-auto">Text</span>
<form class="form-inline">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-light bg-light my-2">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-light"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-light">
<div class="nav navbar-nav">
<a class="nav-item nav-link active" href="#">Active</a>
<a class="nav-item nav-link" href="#">Link</a>
<div 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>
</div>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
<span class="navbar-text ml-2 mr-auto">Text</span>
<form class="form-inline">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-dark my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark my-2">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-dark"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-dark">
<div class="nav navbar-nav">
<a class="nav-item nav-link active" href="#">Active</a>
<a class="nav-item nav-link" href="#">Link</a>
<div 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>
</div>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
<span class="navbar-text ml-2 mr-auto">Text</span>
<form class="form-inline">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
<div class="col-md-6">
<h3 class="mt-5">Tabs</h3>
<div class="nav nav-tabs">
<a class="nav-item nav-link active" href="#">Active</a>
<a class="nav-item nav-link" href="#">Link</a>
<div 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>
</div>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
<h3 class="mt-5">Pills</h3>
<div class="nav nav-pills">
<a class="nav-item nav-link active" href="#">Active</a>
<a class="nav-item nav-link" href="#">Link</a>
<div 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>
</div>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
<div class="col-md-6">
<h3 class="mt-5">Vertical pills</h3>
<div class="nav nav-pills flex-column">
<a class="nav-item nav-link active" href="#">Active</a>
<a class="nav-item nav-link" href="#">Link</a>
<div 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>
</div>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
<div class="col-12">
<h3 class="mt-5">Breadcrumbs</h3>
<nav class="breadcrumb">
<a class="breadcrumb-item" href="#">Home</a>
<a class="breadcrumb-item" href="#">Library</a>
<a class="breadcrumb-item" href="#">Data</a>
<span class="breadcrumb-item active">Bootstrap</span>
</nav>
</div>
</div>
</div>
</section>
<section class="mb-5 pt-5" id="badges">
<div class="row bg-light py-4 mb-5">
<div class="container">
<div class="d-flex justify-content-between">
<h2>
<span class="fa fa-tag mr-1"></span>
Badges
</h2>
<h2>
<a href="https://getbootstrap.com/docs/4.1/components/badge/" target="_blank"
data-toggle="tooltip" data-placement="bottom" title="Badge docs"><span class="fa fa-book fw"></span></a>
<a href="#top" class="ml-3"><span class="fa fa-chevron-up fw"></span></a>
</h2>
</div>
</div>
</div>
<div class="container">
<div class="row px-5">
<div class="col-md-6">
<h3 class="mt-5">Contextual badges</h3>
<p>
<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>
</p>
<h3 class="mt-5">Pill badges</h3>
<p>
<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>
</p>
<h3 class="mt-5">Links</h3>
<p>
<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>
</p>
</div>
<div class="col-md-6">
<h3 class="mt-5">Badges in headings</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>
</div>
</section>
<section class="mb-5 pt-5" id="alerts">
<div class="row bg-light py-4 mb-5">
<div class="container">
<div class="d-flex justify-content-between">
<h2>
<span class="fa fa-exclamation-triangle mr-1"></span>
Alerts
</h2>
<h2>
<a href="https://getbootstrap.com/docs/4.1/components/alerts/" target="_blank"
data-toggle="tooltip" data-placement="bottom" title="Alert docs"><span class="fa fa-book fw"></span></a>
<a href="#top" class="ml-3"><span class="fa fa-chevron-up fw"></span></a>
</h2>
</div>
</div>
</div>
<div class="container">
<div class="row px-5">
<div class="col-12">
<h3 class="mt-5">Simple alerts</h3>
</div>
<div class="col-md-4">
<div class="alert alert-primary" role="alert">
.alert-primary
</div>
</div>
<div class="col-md-4">
<div class="alert alert-secondary" role="alert">
.alert-secondary
</div>
</div>
<div class="col-md-4">
<div class="alert alert-success" role="alert">
.alert-success
</div>
</div>
<div class="col-md-4">
<div class="alert alert-danger" role="alert">
.alert-danger
</div>
</div>
<div class="col-md-4">
<div class="alert alert-warning" role="alert">
.alert-warning
</div>
</div>
<div class="col-md-4">
<div class="alert alert-info" role="alert">
.alert-info
</div>
</div>
<div class="col-md-4">
<div class="alert alert-light" role="alert">
.alert-light
</div>
</div>
<div class="col-md-4">
<div class="alert alert-dark" role="alert">
.alert-dark
</div>
</div>
</div>
<div class="row px-5">
<div class="col-12">
<h3 class="mt-5">Alerts with additional content</h3>
</div>
<div class="col-md-4">
<div class="alert alert-primary" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that
you can see how spacing within an alert works with this kind of content. Also here is an <a href="javascript:void(0)" class="alert-link">example alert link</a>.</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
</div>
<div class="col-md-4">
<div class="alert alert-secondary" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that
you can see how spacing within an alert works with this kind of content. Also here is an <a href="javascript:void(0)" class="alert-link">example alert link</a>.</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
</div>
<div class="col-md-4">
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that
you can see how spacing within an alert works with this kind of content. Also here is an <a href="javascript:void(0)" class="alert-link">example alert link</a>.</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
</div>
<div class="col-md-4">
<div class="alert alert-danger" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that
you can see how spacing within an alert works with this kind of content. Also here is an <a href="javascript:void(0)" class="alert-link">example alert link</a>.</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
</div>
<div class="col-md-4">
<div class="alert alert-warning" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that
you can see how spacing within an alert works with this kind of content. Also here is an <a href="javascript:void(0)" class="alert-link">example alert link</a>.</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
</div>
<div class="col-md-4">
<div class="alert alert-info" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that
you can see how spacing within an alert works with this kind of content. Also here is an <a href="javascript:void(0)" class="alert-link">example alert link</a>.</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
</div>
<div class="col-md-4">
<div class="alert alert-light" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that
you can see how spacing within an alert works with this kind of content. Also here is an <a href="javascript:void(0)" class="alert-link">example alert link</a>.</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
</div>
<div class="col-md-4">
<div class="alert alert-dark" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that
you can see how spacing within an alert works with this kind of content. Also here is an <a href="javascript:void(0)" class="alert-link">example alert link</a>.</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
</div>
</div>
</div>
</section>
<section class="mb-5 pt-5" id="popovers">
<div class="row bg-light py-4 mb-5">
<div class="container">
<div class="d-flex justify-content-between">
<h2>
<span class="fa fa-info-circle mr-1"></span>
Popovers
</h2>
<h2>
<a href="https://getbootstrap.com/docs/4.1/components/popovers/" target="_blank"
data-toggle="tooltip" data-placement="bottom" title="Popover docs"><span class="fa fa-book fw"></span></a>
<a href="https://getbootstrap.com/docs/4.1/components/tooltips/" target="_blank"
data-toggle="tooltip" data-placement="bottom" title="Tooltip docs"><span class="fa fa-book fw"></span></a>
<a href="#top" class="ml-3"><span class="fa fa-chevron-up fw"></span></a>
</h2>
</div>
</div>
</div>
<div class="container">
<div class="row px-5">
<div class="col-md-6">
<h3 class="mt-5">Popovers</h3>
<button type="button" class="btn btn-primary my-5" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?" id="popover-toggler">
Toggle popover
</button>
</div>
<div class="col-md-6">
<h3 class="mt-5">Tooltips</h3>
<button type="button" class="btn btn-primary my-5" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
</div>
</div>
</div>
</section>
<section class="mb-5 pt-5" id="progress-bars">
<div class="row bg-light py-4 mb-5">
<div class="container">
<div class="d-flex justify-content-between">
<h2>
<span class="fa fa-spinner mr-1"></span>
Progress bars
</h2>
<h2>
<a href="https://getbootstrap.com/docs/4.1/components/progress/" target="_blank"
data-toggle="tooltip" data-placement="bottom" title="Progress docs"><span class="fa fa-book fw"></span></a>
<a href="#top" class="ml-3"><span class="fa fa-chevron-up fw"></span></a>
</h2>
</div>
</div>
</div>
<div class="container">
<div class="row px-5">
<div class="col-md-6">
<h3 class="mt-5">Colored progress bars</h3>
<div class="progress my-1">
<div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">Label</div>
</div>
<div class="progress my-1">
<div class="progress-bar bg-success" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">Label</div>
</div>
<div class="progress my-1">
<div class="progress-bar bg-info" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">Label</div>
</div>
<div class="progress my-1">
<div class="progress-bar bg-warning" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">Label</div>
</div>
<div class="progress my-1">
<div class="progress-bar bg-danger" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">Label</div>
</div>
</div>
<div class="col-md-6">
<h3 class="mt-5">Striped progress bars</h3>
<div class="progress my-1">
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">Label</div>
</div>
<div class="progress my-1">
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">Label</div>
</div>
<div class="progress my-1">
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">Label</div>
</div>
<div class="progress my-1">
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">Label</div>
</div>
<div class="progress my-1">
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">Label</div>
</div>
</div>
</div>
</div>
</section>
<section class="mb-5 pt-5" id="modals">
<div class="row bg-light py-4 mb-5">
<div class="container">
<div class="d-flex justify-content-between">
<h2>
<span class="fa fa-window-restore mr-1"></span>
Modals
</h2>
<h2>
<a href="https://getbootstrap.com/docs/4.1/components/modal/" target="_blank"
data-toggle="tooltip" data-placement="bottom" title="Modal docs"><span class="fa fa-book fw"></span></a>
<a href="#top" class="ml-3"><span class="fa fa-chevron-up fw"></span></a>
</h2>
</div>
</div>
</div>
<div class="container">
<div class="row px-5">
<div class="col-12">
<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">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="bg-dark text-light mt-5 p-3">
<div class="container">
Bootstrap 4 test page by
<a href="https://juzraai.github.io/" class="text-info">juzraai</a>
&middot;
<a href="https://github.com/juzraai/bootstrap4-test-page" class="text-info">Source code</a>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.min.js"></script>
<script>
$(function () {
$('[data-toggle="popover"]').popover();
$('[data-toggle="tooltip"]').tooltip();
$('#hljs-theme-toggler').click(function () {
var m = $('#hljs-theme').attr('media');
m = ('none' == m) ? '' : 'none';
$('#hljs-theme').attr('media', m);
});
$('#popover-toggler').click();
});
hljs.initHighlightingOnLoad();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment