@matttelliott/tokyonight.scss
Version:
Bootstrapa theme based on tokyonight
1,292 lines (1,252 loc) • 101 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Tokyo Night</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="./tokyonight.css" />
<link
rel="stylesheet"
href="https://bootswatch.com/_vendor/font-awesome/css/font-awesome.min.css"
/>
<link
rel="stylesheet"
href="https://bootswatch.com/_vendor/prismjs/themes/prism-okaidia.css"
/>
<link
rel="stylesheet"
href="https://bootswatch.com/_assets/css/custom.min.css"
/>
<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=UA-23019901-1"
></script>
<script>
window.dataLayer = window.dataLayer || []
function gtag() {
dataLayer.push(arguments)
}
gtag('js', new Date())
gtag('config', 'UA-23019901-1')
</script>
</head>
<body>
<div class="navbar navbar-expand-lg fixed-top navbar-dark bg-primary">
<div class="container">
<a href="#" class="navbar-brand">Tokyo Night</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarResponsive"
aria-controls="navbarResponsive"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
href="#"
id="themes"
>Themes <span class="caret"></span
></a>
<div class="dropdown-menu" aria-labelledby="themes">
<a class="dropdown-item" href="../default/">Default</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="../cerulean/">Cerulean</a>
<a class="dropdown-item" href="../cosmo/">Cosmo</a>
<a class="dropdown-item" href="../cyborg/">Cyborg</a>
<a class="dropdown-item" href="../darkly/">Darkly</a>
<a class="dropdown-item" href="../flatly/">Flatly</a>
<a class="dropdown-item" href="../journal/">Journal</a>
<a class="dropdown-item" href="../litera/">Litera</a>
<a class="dropdown-item" href="../lumen/">Lumen</a>
<a class="dropdown-item" href="../lux/">Lux</a>
<a class="dropdown-item" href="../materia/">Materia</a>
<a class="dropdown-item" href="../minty/">Minty</a>
<a class="dropdown-item" href="../morph/">Morph</a>
<a class="dropdown-item" href="../pulse/">Pulse</a>
<a class="dropdown-item" href="../quartz/">Quartz</a>
<a class="dropdown-item" href="../sandstone/">Sandstone</a>
<a class="dropdown-item" href="../simplex/">Simplex</a>
<a class="dropdown-item" href="../sketchy/">Sketchy</a>
<a class="dropdown-item" href="../slate/">Slate</a>
<a class="dropdown-item" href="../solar/">Solar</a>
<a class="dropdown-item" href="../spacelab/">Spacelab</a>
<a class="dropdown-item" href="../superhero/">Superhero</a>
<a class="dropdown-item" href="../united/">United</a>
<a class="dropdown-item" href="../vapor/">Vapor</a>
<a class="dropdown-item" href="../yeti/">Yeti</a>
<a class="dropdown-item" href="../zephyr/">Zephyr</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="../help/">Help</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://blog.bootswatch.com/">Blog</a>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
href="#"
id="download"
>Darkly <span class="caret"></span
></a>
<div class="dropdown-menu" aria-labelledby="download">
<a
class="dropdown-item"
rel="noopener"
target="_blank"
href="https://jsfiddle.net/bootswatch/zgm74cjw/"
>Open in JSFiddle</a
>
<div class="dropdown-divider"></div>
<a
class="dropdown-item"
href="../5/darkly/bootstrap.min.css"
download
>bootstrap.min.css</a
>
<a class="dropdown-item" href="./bootstrap.css" download
>bootstrap.css</a
>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="./_variables.scss" download
>_variables.scss</a
>
<a
class="dropdown-item"
href="../5/darkly/_bootswatch.scss"
download
>_bootswatch.scss</a
>
</div>
</li>
</ul>
<ul class="navbar-nav ms-md-auto">
<li class="nav-item">
<a
target="_blank"
rel="noopener"
class="nav-link"
href="https://github.com/thomaspark/bootswatch/"
><i class="fa fa-github"></i> GitHub</a
>
</li>
<li class="nav-item">
<a
target="_blank"
rel="noopener"
class="nav-link"
href="https://twitter.com/bootswatch"
><i class="fa fa-twitter"></i> Twitter</a
>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="page-header" id="banner">
<div class="row">
<div class="col-lg-8 col-md-7 col-sm-6">
<h1>Tokyo Night</h1>
<p class="lead">Terminal based bootstrap theme</p>
</div>
<div class="col-lg-4 col-md-5 col-sm-6">
<div class="sponsor">
<script
async
src="https://cdn.carbonads.com/carbon.js?serve=CKYIE23N&placement=bootswatchcom"
id="_carbonads_js"
></script>
</div>
</div>
</div>
</div>
<!-- Navbar
================================================== -->
<div class="bs-docs-section clearfix">
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h1 id="navbars">Navbars</h1>
</div>
<div class="bs-component">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-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 me-auto">
<li class="nav-item">
<a class="nav-link active" href="#"
>Home
<span class="visually-hidden">(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>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
data-bs-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>
<form class="d-flex">
<input
class="form-control me-sm-2"
type="text"
placeholder="Search"
/>
<button
class="btn btn-secondary my-2 my-sm-0"
type="submit"
>
Search
</button>
</form>
</div>
</div>
</nav>
</div>
<div class="bs-component">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-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 me-auto">
<li class="nav-item">
<a class="nav-link active" href="#"
>Home
<span class="visually-hidden">(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>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
data-bs-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>
<form class="d-flex">
<input
class="form-control me-sm-2"
type="text"
placeholder="Search"
/>
<button
class="btn btn-secondary my-2 my-sm-0"
type="submit"
>
Search
</button>
</form>
</div>
</div>
</nav>
</div>
<div class="bs-component">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-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 me-auto">
<li class="nav-item">
<a class="nav-link active" href="#"
>Home
<span class="visually-hidden">(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>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
data-bs-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>
<form class="d-flex">
<input
class="form-control me-sm-2"
type="text"
placeholder="Search"
/>
<button
class="btn btn-secondary my-2 my-sm-0"
type="submit"
>
Search
</button>
</form>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
<!-- Buttons
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<div class="row">
<div class="col-lg-12">
<h1 id="buttons">Buttons</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<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-light">Light</button>
<button type="button" class="btn btn-dark">Dark</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-light disabled">
Light
</button>
<button type="button" class="btn btn-dark disabled">Dark</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>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</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-bs-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-bs-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-bs-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-bs-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-lg-5">
<div class="bs-component">
<div class="d-grid gap-2">
<button class="btn btn-lg btn-primary" type="button">
Block button
</button>
<button class="btn btn-lg btn-primary" type="button">
Block button
</button>
</div>
</div>
<div class="bs-component mb-3">
<div
class="btn-group"
role="group"
aria-label="Basic checkbox toggle button group"
>
<input
type="checkbox"
class="btn-check"
id="btncheck1"
checked
autocomplete="off"
/>
<label class="btn btn-primary" for="btncheck1"
>Checkbox 1</label
>
<input
type="checkbox"
class="btn-check"
id="btncheck2"
autocomplete="off"
/>
<label class="btn btn-primary" for="btncheck2"
>Checkbox 2</label
>
<input
type="checkbox"
class="btn-check"
id="btncheck3"
autocomplete="off"
/>
<label class="btn btn-primary" for="btncheck3"
>Checkbox 3</label
>
</div>
</div>
<div class="bs-component mb-3">
<div
class="btn-group"
role="group"
aria-label="Basic radio toggle button group"
>
<input
type="radio"
class="btn-check"
name="btnradio"
id="btnradio1"
autocomplete="off"
checked
/>
<label class="btn btn-outline-primary" for="btnradio1"
>Radio 1</label
>
<input
type="radio"
class="btn-check"
name="btnradio"
id="btnradio2"
autocomplete="off"
checked
/>
<label class="btn btn-outline-primary" for="btnradio2"
>Radio 2</label
>
<input
type="radio"
class="btn-check"
name="btnradio"
id="btnradio3"
autocomplete="off"
checked
/>
<label class="btn btn-outline-primary" for="btnradio3"
>Radio 3</label
>
</div>
</div>
<div class="bs-component">
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
</div>
</div>
<div class="bs-component mb-3">
<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 mb-3">
<div
class="btn-toolbar"
role="toolbar"
aria-label="Toolbar with button groups"
>
<div
class="btn-group me-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 me-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>
<button type="button" class="btn btn-secondary">7</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-secondary">8</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Typography
================================================== -->
<div class="bs-docs-section">
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h1 id="typography">Typography</h1>
</div>
</div>
</div>
<!-- Headings -->
<div class="row">
<div class="col-lg-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-lg-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-lg-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-lg-12">
<h2 id="type-blockquotes">Blockquotes</h2>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="bs-component">
<figure>
<blockquote class="blockquote">
<p class="mb-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer posuere erat a ante.
</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in
<cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
</div>
</div>
<div class="col-lg-4">
<div class="bs-component">
<figure class="text-center">
<blockquote class="blockquote">
<p class="mb-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer posuere erat a ante.
</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in
<cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
</div>
</div>
<div class="col-lg-4">
<div class="bs-component">
<figure class="text-end">
<blockquote class="blockquote">
<p class="mb-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer posuere erat a ante.
</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in
<cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
</div>
</div>
</div>
</div>
<!-- Tables
================================================== -->
<div class="bs-docs-section">
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h1 id="tables">Tables</h1>
</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-lg-12">
<div class="page-header">
<h1 id="forms">Forms</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-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" class="form-label mt-4"
>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" class="form-label mt-4"
>Password</label
>
<input
type="password"
class="form-control"
id="exampleInputPassword1"
placeholder="Password"
/>
</div>
<div class="form-group">
<label for="exampleSelect1" class="form-label mt-4"
>Example select</label
>
<select class="form-select" 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" class="form-label mt-4"
>Example multiple select</label
>
<select multiple class="form-select" 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" class="form-label mt-4"
>Example textarea</label
>
<textarea
class="form-control"
id="exampleTextarea"
rows="3"
></textarea>
</div>
<div class="form-group">
<label for="formFile" class="form-label mt-4"
>Default file input example</label
>
<input class="form-control" type="file" id="formFile" />
</div>
<fieldset class="form-group">
<legend class="mt-4">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 class="mt-4">Checkboxes</legend>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="flexCheckDefault"
/>
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="flexCheckChecked"
checked
/>
<label class="form-check-label" for="flexCheckChecked">
Checked checkbox
</label>
</div>
</fieldset>
<fieldset>
<legend class="mt-4">Switches</legend>
<div class="form-check form-switch">
<input
class="form-check-input"
type="checkbox"
id="flexSwitchCheckDefault"
/>
<label
class="form-check-label"
for="flexSwitchCheckDefault"
>Default switch checkbox input</label
>
</div>
<div class="form-check form-switch">
<input
class="form-check-input"
type="checkbox"
id="flexSwitchCheckChecked"
checked
/>
<label
class="form-check-label"
for="flexSwitchCheckChecked"
>Checked switch checkbox input</label
>
</div>
</fieldset>
<fieldset class="form-group">
<legend class="mt-4">Ranges</legend>
<label for="customRange1" class="form-label"
>Example range</label
>
<input type="range" class="form-range" id="customRange1" />
<label for="disabledRange" class="form-label"
>Disabled range</label
>
<input
type="range"
class="form-range"
id="disabledRange"
disabled
/>
<label for="customRange3" class="form-label"
>Example range</label
>
<input
type="range"
class="form-range"
min="0"
max="5"
step="0.5"
id="customRange3"
/>
</fieldset>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
</div>
</div>
<div class="col-lg-4 offset-lg-1">
<form class="bs-component">
<div class="form-group">
<fieldset disabled>
<label class="form-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="form-label mt-4" 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-label mt-4" for="inputValid"
>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-label mt-4" for="inputInvalid"
>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 mt-4"
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 mt-4" 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 mt-4"
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="form-label mt-4">Input addons</label>
<div class="form-group">
<div class="input-group mb-3">
<span class="input-group-text">$</span>
<input
type="text"
class="form-control"
aria-label="Amount (to the nearest dollar)"
/>
<span class="input-group-text">.00</span>
</div>
<div class="input-group mb-3">
<input