1908 lines
146 KiB
PHP
1908 lines
146 KiB
PHP
@extends('fo.layout')
|
|
|
|
@section('title', __('Accueil'))
|
|
@section('description', __('Description site'))
|
|
@section('breadcrumb',
|
|
request()->route()->getName())
|
|
|
|
@section('content')
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col">
|
|
<h1>{{ __('Hello world !') }}</h1>
|
|
|
|
</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>Cerulean</h1>
|
|
<p class="lead">A calm blue sky</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 bg-primary" data-bs-theme="dark">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="#">Navbar</a>
|
|
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarColor01" type="button"
|
|
aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="navbar-collapse 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" data-dashlane-rid="750597ffb87237a4" data-form-type="">
|
|
<input class="form-control me-sm-2" data-dashlane-rid="e140e12745dd78e0" data-form-type=""
|
|
type="search" placeholder="Search">
|
|
<button class="btn btn-secondary my-sm-0 my-2" data-dashlane-label="true"
|
|
data-dashlane-rid="293f85bf609ace64" data-form-type="" type="submit">Search</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i class="bi bi-code"></i></button>
|
|
</div>
|
|
|
|
<div class="bs-component">
|
|
<nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="#">Navbar</a>
|
|
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarColor02" type="button"
|
|
aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="navbar-collapse 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" data-dashlane-rid="3ebd51564b07a3c8" data-form-type="">
|
|
<input class="form-control me-sm-2" data-dashlane-rid="f0105d9a4d2d7371" data-form-type=""
|
|
type="search" placeholder="Search">
|
|
<button class="btn btn-secondary my-sm-0 my-2" data-dashlane-label="true"
|
|
data-dashlane-rid="82c730d25c07dda1" data-form-type="" type="submit">Search</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
|
|
<div class="bs-component">
|
|
<nav class="navbar navbar-expand-lg bg-light" data-bs-theme="light">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="#">Navbar</a>
|
|
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarColor03" type="button"
|
|
aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="navbar-collapse 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" data-dashlane-rid="7d6647648a2a73d1" data-form-type="">
|
|
<input class="form-control me-sm-2" data-dashlane-rid="a067c8c5f3ef92e3" data-form-type=""
|
|
type="search" placeholder="Search">
|
|
<button class="btn btn-secondary my-sm-0 my-2" data-dashlane-label="true"
|
|
data-dashlane-rid="102de837cbf7ffdd" data-form-type="" type="submit">Search</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
|
|
<div class="bs-component">
|
|
<nav class="navbar navbar-expand-lg bg-body-tertiary">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="#">Navbar</a>
|
|
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarColor04" type="button"
|
|
aria-controls="navbarColor04" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="navbar-collapse collapse" id="navbarColor04">
|
|
<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" data-dashlane-rid="fe7bd65fb645eca3" data-form-type="">
|
|
<input class="form-control me-sm-2" data-dashlane-rid="ceb84acee5c87d8c" data-form-type=""
|
|
type="search" placeholder="Search">
|
|
<button class="btn btn-secondary my-sm-0 my-2" data-dashlane-label="true"
|
|
data-dashlane-rid="acbb1f67aadafe20" data-form-type="" type="submit">Search</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</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 class="btn btn-primary" type="button">Primary</button>
|
|
<button class="btn btn-secondary" type="button">Secondary</button>
|
|
<button class="btn btn-success" type="button">Success</button>
|
|
<button class="btn btn-info" type="button">Info</button>
|
|
<button class="btn btn-warning" type="button">Warning</button>
|
|
<button class="btn btn-danger" type="button">Danger</button>
|
|
<button class="btn btn-light" type="button">Light</button>
|
|
<button class="btn btn-dark" type="button">Dark</button>
|
|
<button class="btn btn-link" type="button">Link</button>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</p>
|
|
|
|
<p class="bs-component">
|
|
<button class="btn btn-primary disabled" type="button">Primary</button>
|
|
<button class="btn btn-secondary disabled" type="button">Secondary</button>
|
|
<button class="btn btn-success disabled" type="button">Success</button>
|
|
<button class="btn btn-info disabled" type="button">Info</button>
|
|
<button class="btn btn-warning disabled" type="button">Warning</button>
|
|
<button class="btn btn-danger disabled" type="button">Danger</button>
|
|
<button class="btn btn-light disabled" type="button">Light</button>
|
|
<button class="btn btn-dark disabled" type="button">Dark</button>
|
|
<button class="btn btn-link disabled" type="button">Link</button>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</p>
|
|
|
|
<p class="bs-component">
|
|
<button class="btn btn-outline-primary" type="button">Primary</button>
|
|
<button class="btn btn-outline-secondary" type="button">Secondary</button>
|
|
<button class="btn btn-outline-success" type="button">Success</button>
|
|
<button class="btn btn-outline-info" type="button">Info</button>
|
|
<button class="btn btn-outline-warning" type="button">Warning</button>
|
|
<button class="btn btn-outline-danger" type="button">Danger</button>
|
|
<button class="btn btn-outline-light" type="button">Light</button>
|
|
<button class="btn btn-outline-dark" type="button">Dark</button>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</p>
|
|
|
|
<div class="bs-component">
|
|
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
|
|
<button class="btn btn-primary" type="button">Primary</button>
|
|
<div class="btn-group" role="group">
|
|
<button class="btn btn-primary dropdown-toggle" id="btnGroupDrop1" data-bs-toggle="dropdown" type="button"
|
|
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 class="btn btn-success" type="button">Success</button>
|
|
<div class="btn-group" role="group">
|
|
<button class="btn btn-success dropdown-toggle" id="btnGroupDrop2" data-bs-toggle="dropdown" type="button"
|
|
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 class="btn btn-info" type="button">Info</button>
|
|
<div class="btn-group" role="group">
|
|
<button class="btn btn-info dropdown-toggle" id="btnGroupDrop3" data-bs-toggle="dropdown" type="button"
|
|
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 class="btn btn-danger" type="button">Danger</button>
|
|
<div class="btn-group" role="group">
|
|
<button class="btn btn-danger dropdown-toggle" id="btnGroupDrop4" data-bs-toggle="dropdown" type="button"
|
|
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>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
|
|
<div class="bs-component">
|
|
<button class="btn btn-primary btn-lg" type="button">Large button</button>
|
|
<button class="btn btn-primary" type="button">Default button</button>
|
|
<button class="btn btn-primary btn-sm" type="button">Small button</button>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></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>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
|
|
<div class="bs-component mb-3">
|
|
<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
|
|
<input class="btn-check" id="btncheck1" type="checkbox" checked="" autocomplete="off">
|
|
<label class="btn btn-primary" for="btncheck1">Checkbox 1</label>
|
|
<input class="btn-check" id="btncheck2" type="checkbox" autocomplete="off">
|
|
<label class="btn btn-primary" for="btncheck2">Checkbox 2</label>
|
|
<input class="btn-check" id="btncheck3" type="checkbox" autocomplete="off">
|
|
<label class="btn btn-primary" for="btncheck3">Checkbox 3</label>
|
|
</div>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
|
|
<div class="bs-component mb-3">
|
|
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
|
|
<input class="btn-check" id="btnradio1" name="btnradio" type="radio" autocomplete="off" checked="">
|
|
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
|
|
<input class="btn-check" id="btnradio2" name="btnradio" type="radio" autocomplete="off" checked="">
|
|
<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
|
|
<input class="btn-check" id="btnradio3" name="btnradio" type="radio" autocomplete="off" checked="">
|
|
<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
|
|
</div>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
|
|
<div class="bs-component">
|
|
<div class="btn-group-vertical">
|
|
<button class="btn btn-primary" type="button">Button</button>
|
|
<button class="btn btn-primary" type="button">Button</button>
|
|
<button class="btn btn-primary" type="button">Button</button>
|
|
<button class="btn btn-primary" type="button">Button</button>
|
|
<button class="btn btn-primary" type="button">Button</button>
|
|
<button class="btn btn-primary" type="button">Button</button>
|
|
</div>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
|
|
<div class="bs-component mb-3">
|
|
<div class="btn-group" role="group" aria-label="Basic example">
|
|
<button class="btn btn-secondary" type="button">Left</button>
|
|
<button class="btn btn-secondary" type="button">Middle</button>
|
|
<button class="btn btn-secondary" type="button">Right</button>
|
|
</div>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</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 class="btn btn-secondary" type="button">1</button>
|
|
<button class="btn btn-secondary" type="button">2</button>
|
|
<button class="btn btn-secondary" type="button">3</button>
|
|
<button class="btn btn-secondary" type="button">4</button>
|
|
</div>
|
|
<div class="btn-group me-2" role="group" aria-label="Second group">
|
|
<button class="btn btn-secondary" type="button">5</button>
|
|
<button class="btn btn-secondary" type="button">6</button>
|
|
<button class="btn btn-secondary" type="button">7</button>
|
|
</div>
|
|
<div class="btn-group" role="group" aria-label="Third group">
|
|
<button class="btn btn-secondary" type="button">8</button>
|
|
</div>
|
|
</div>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</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-body-secondary">with faded secondary text</small>
|
|
</h3>
|
|
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</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>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<h2>Emphasis classes</h2>
|
|
<p class="text-primary">.text-primary</p>
|
|
<p class="text-primary-emphasis">.text-primary-emphasis</p>
|
|
<p class="text-secondary">.text-secondary</p>
|
|
<p class="text-secondary-emphasis">.text-secondary-emphasis</p>
|
|
<p class="text-success">.text-success</p>
|
|
<p class="text-success-emphasis">.text-success-emphasis</p>
|
|
<p class="text-danger">.text-danger</p>
|
|
<p class="text-danger-emphasis">.text-danger-emphasis</p>
|
|
<p class="text-warning">.text-warning</p>
|
|
<p class="text-warning-emphasis">.text-warning-emphasis</p>
|
|
<p class="text-info">.text-info</p>
|
|
<p class="text-info">.text-info-emphasis</p>
|
|
<p class="text-light">.text-light</p>
|
|
<p class="text-light">.text-light-emphasis</p>
|
|
<p class="text-dark">.text-dark</p>
|
|
<p class="text-dark">.text-dark-emphasis</p>
|
|
<p class="text-body">.text-body</p>
|
|
<p class="text-body">.text-body-emphasis</p>
|
|
<p class="text-body-secondary">.text-body-secondary</p>
|
|
<p class="text-body-tertiary">.text-body-tertiary</p>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</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>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</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>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</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>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</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-hover table">
|
|
<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>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</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 data-dashlane-rid="7088f1a6d04579e6" data-form-type="other">
|
|
<fieldset>
|
|
<legend>Legend control-plaintext</legend>
|
|
<div class="form-group row">
|
|
<label class="col-sm-2 col-form-label" for="staticEmail">Email</label>
|
|
<div class="col-sm-10">
|
|
<input class="form-control-plaintext" id="staticEmail" data-dashlane-rid="e8e4853f602b7d1c"
|
|
data-form-type="email" data-kwcachedvalue="email@example.com" data-kwimpalastatus="asleep"
|
|
data-kwimpalaid="1697790613688-0" type="text" value="email@example.com" readonly="">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label mt-4" for="exampleInputEmail1">Email address</label>
|
|
<input class="form-control" id="exampleInputEmail1" data-dashlane-rid="1d7ea9f81d789fde"
|
|
data-form-type="email" data-kwimpalastatus="alive" data-kwimpalaid="1697790613688-1" type="email"
|
|
aria-describedby="emailHelp" placeholder="Enter email">
|
|
<small class="form-text text-muted" id="emailHelp">We'll never share your email with anyone else.</small>
|
|
<span id="1697790613688-1" data-dashlanecreated="true"
|
|
style="border-block: initial; border-inline: initial; border-start-start-radius: initial; border-start-end-radius: initial; border-end-start-radius: initial; border-end-end-radius: initial; overflow-inline: initial; overflow-block: initial; overscroll-behavior-inline: initial; overscroll-behavior-block: initial; margin-block: initial; margin-inline: initial; scroll-margin-block: initial; scroll-margin-inline: initial; padding-block: initial; padding-inline: initial; scroll-padding-block: initial; scroll-padding-inline: initial; inset-block: initial; inset-inline: initial; block-size: initial; min-block-size: initial; max-block-size: initial; inline-size: initial; min-inline-size: initial; max-inline-size: initial; contain-intrinsic-block-size: initial; contain-intrinsic-inline-size: initial; background-color: initial; background-image: url("moz-extension://cd9992f4-7db3-4237-bc58-98abc44b634d/content/injected/logo-autofill-known.svg"); background-position: center center; background-repeat: no-repeat; background-attachment: initial; background-clip: initial; background-origin: initial; background-size: contain; background-blend-mode: initial; border: medium; border-radius: initial; box-decoration-break: initial; -moz-float-edge: initial; display: inline; position: absolute; float: initial; clear: initial; vertical-align: initial; baseline-source: initial; overflow: initial; overflow-anchor: initial; transform: initial; rotate: initial; scale: initial; translate: initial; offset: initial; scroll-behavior: initial; scroll-snap-align: initial; scroll-snap-type: initial; scroll-snap-stop: initial; overscroll-behavior: initial; isolation: initial; break-after: initial; break-before: initial; break-inside: initial; resize: initial; perspective: initial; perspective-origin: initial; backface-visibility: initial; transform-box: initial; transform-style: initial; transform-origin: initial; contain: initial; container: initial; appearance: initial; -moz-orient: initial; will-change: initial; shape-image-threshold: initial; shape-margin: initial; shape-outside: initial; touch-action: initial; -webkit-line-clamp: initial; scrollbar-gutter: initial; columns: initial; column-fill: initial; column-rule: initial; column-span: initial; content: initial; counter-increment: initial; counter-reset: initial; counter-set: initial; opacity: 1; box-shadow: initial; clip: initial; filter: initial; backdrop-filter: initial; mix-blend-mode: initial; font: initial; font-synthesis: initial; font-palette: initial; math-depth: initial; math-style: initial; visibility: visible; writing-mode: initial; text-orientation: initial; print-color-adjust: initial; image-rendering: initial; image-orientation: initial; dominant-baseline: initial; text-anchor: initial; color-interpolation: initial; color-interpolation-filters: initial; fill: initial; fill-opacity: initial; fill-rule: initial; shape-rendering: initial; stroke: initial; stroke-width: initial; stroke-linecap: initial; stroke-linejoin: initial; stroke-miterlimit: initial; stroke-opacity: initial; stroke-dasharray: initial; stroke-dashoffset: initial; clip-rule: initial; marker: initial; paint-order: initial; border-collapse: initial; empty-cells: initial; caption-side: initial; border-spacing: initial; color: initial; text-transform: initial; hyphens: initial; -moz-text-size-adjust: initial; text-indent: initial; overflow-wrap: initial; word-break: initial; text-justify: initial; text-align-last: initial; text-align: initial; letter-spacing: initial; word-spacing: initial; white-space: initial; text-shadow: initial; text-emphasis: initial; text-emphasis-position: initial; tab-size: initial; line-break: initial; -webkit-text-fill-color: initial; -webkit-text-stroke: initial; ruby-align: initial; ruby-position: initial; text-combine-upright: initial; text-rendering: initial; text-underline-offset: initial; text-underline-position: initial; text-decoration-skip-ink: initial; hyphenate-character: initial; forced-color-adjust: initial; -webkit-text-security: initial; cursor: pointer; pointer-events: initial; -moz-user-input: initial; -moz-user-modify: initial; -moz-user-focus: initial; caret-color: initial; accent-color: initial; color-scheme: initial; scrollbar-color: initial; list-style: initial; quotes: initial; margin: initial; overflow-clip-margin: initial; scroll-margin: initial; outline: initial; outline-offset: initial; page: initial; padding: initial; scroll-padding: initial; top: 149px; right: initial; bottom: initial; left: 617px; z-index: auto; flex-flow: initial; place-content: initial; place-items: initial; flex: initial; place-self: initial; order: initial; width: 16px; min-width: 16px; max-width: initial; height: 16px; min-height: initial; max-height: initial; box-sizing: initial; object-fit: initial; object-position: initial; grid-area: initial; grid: initial; gap: initial; aspect-ratio: initial; contain-intrinsic-size: initial; vector-effect: initial; stop-color: initial; stop-opacity: initial; flood-color: initial; flood-opacity: initial; lighting-color: initial; mask-type: initial; clip-path: initial; mask: initial; x: initial; y: initial; cx: initial; cy: initial; rx: initial; ry: initial; r: initial; d: initial; table-layout: initial; text-overflow: initial; text-decoration: initial; ime-mode: initial; scrollbar-width: initial; user-select: initial; -moz-window-dragging: initial; -moz-force-broken-image-icon: initial; transition: initial; animation: initial; animation-composition: initial; -moz-box-align: initial; -moz-box-direction: initial; -moz-box-flex: initial; -moz-box-orient: initial; -moz-box-pack: initial; -moz-box-ordinal-group: initial;"></span>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label mt-4" for="exampleInputPassword1">Password</label>
|
|
<input class="form-control" id="exampleInputPassword1" data-dashlane-rid="0a11d209f97a793a"
|
|
data-form-type="password" data-kwimpalastatus="alive" data-kwimpalaid="1697790613688-2"
|
|
type="password" placeholder="Password" autocomplete="off">
|
|
<span id="1697790613688-2" data-dashlanecreated="true"
|
|
style="border-block: initial; border-inline: initial; border-start-start-radius: initial; border-start-end-radius: initial; border-end-start-radius: initial; border-end-end-radius: initial; overflow-inline: initial; overflow-block: initial; overscroll-behavior-inline: initial; overscroll-behavior-block: initial; margin-block: initial; margin-inline: initial; scroll-margin-block: initial; scroll-margin-inline: initial; padding-block: initial; padding-inline: initial; scroll-padding-block: initial; scroll-padding-inline: initial; inset-block: initial; inset-inline: initial; block-size: initial; min-block-size: initial; max-block-size: initial; inline-size: initial; min-inline-size: initial; max-inline-size: initial; contain-intrinsic-block-size: initial; contain-intrinsic-inline-size: initial; background-color: initial; background-image: url("moz-extension://cd9992f4-7db3-4237-bc58-98abc44b634d/content/injected/logo-autofill-known.svg"); background-position: center center; background-repeat: no-repeat; background-attachment: initial; background-clip: initial; background-origin: initial; background-size: contain; background-blend-mode: initial; border: medium; border-radius: initial; box-decoration-break: initial; -moz-float-edge: initial; display: inline; position: absolute; float: initial; clear: initial; vertical-align: initial; baseline-source: initial; overflow: initial; overflow-anchor: initial; transform: initial; rotate: initial; scale: initial; translate: initial; offset: initial; scroll-behavior: initial; scroll-snap-align: initial; scroll-snap-type: initial; scroll-snap-stop: initial; overscroll-behavior: initial; isolation: initial; break-after: initial; break-before: initial; break-inside: initial; resize: initial; perspective: initial; perspective-origin: initial; backface-visibility: initial; transform-box: initial; transform-style: initial; transform-origin: initial; contain: initial; container: initial; appearance: initial; -moz-orient: initial; will-change: initial; shape-image-threshold: initial; shape-margin: initial; shape-outside: initial; touch-action: initial; -webkit-line-clamp: initial; scrollbar-gutter: initial; columns: initial; column-fill: initial; column-rule: initial; column-span: initial; content: initial; counter-increment: initial; counter-reset: initial; counter-set: initial; opacity: 1; box-shadow: initial; clip: initial; filter: initial; backdrop-filter: initial; mix-blend-mode: initial; font: initial; font-synthesis: initial; font-palette: initial; math-depth: initial; math-style: initial; visibility: visible; writing-mode: initial; text-orientation: initial; print-color-adjust: initial; image-rendering: initial; image-orientation: initial; dominant-baseline: initial; text-anchor: initial; color-interpolation: initial; color-interpolation-filters: initial; fill: initial; fill-opacity: initial; fill-rule: initial; shape-rendering: initial; stroke: initial; stroke-width: initial; stroke-linecap: initial; stroke-linejoin: initial; stroke-miterlimit: initial; stroke-opacity: initial; stroke-dasharray: initial; stroke-dashoffset: initial; clip-rule: initial; marker: initial; paint-order: initial; border-collapse: initial; empty-cells: initial; caption-side: initial; border-spacing: initial; color: initial; text-transform: initial; hyphens: initial; -moz-text-size-adjust: initial; text-indent: initial; overflow-wrap: initial; word-break: initial; text-justify: initial; text-align-last: initial; text-align: initial; letter-spacing: initial; word-spacing: initial; white-space: initial; text-shadow: initial; text-emphasis: initial; text-emphasis-position: initial; tab-size: initial; line-break: initial; -webkit-text-fill-color: initial; -webkit-text-stroke: initial; ruby-align: initial; ruby-position: initial; text-combine-upright: initial; text-rendering: initial; text-underline-offset: initial; text-underline-position: initial; text-decoration-skip-ink: initial; hyphenate-character: initial; forced-color-adjust: initial; -webkit-text-security: initial; cursor: pointer; pointer-events: initial; -moz-user-input: initial; -moz-user-modify: initial; -moz-user-focus: initial; caret-color: initial; accent-color: initial; color-scheme: initial; scrollbar-color: initial; list-style: initial; quotes: initial; margin: initial; overflow-clip-margin: initial; scroll-margin: initial; outline: initial; outline-offset: initial; page: initial; padding: initial; scroll-padding: initial; top: 267px; right: initial; bottom: initial; left: 617px; z-index: auto; flex-flow: initial; place-content: initial; place-items: initial; flex: initial; place-self: initial; order: initial; width: 16px; min-width: 16px; max-width: initial; height: 16px; min-height: initial; max-height: initial; box-sizing: initial; object-fit: initial; object-position: initial; grid-area: initial; grid: initial; gap: initial; aspect-ratio: initial; contain-intrinsic-size: initial; vector-effect: initial; stop-color: initial; stop-opacity: initial; flood-color: initial; flood-opacity: initial; lighting-color: initial; mask-type: initial; clip-path: initial; mask: initial; x: initial; y: initial; cx: initial; cy: initial; rx: initial; ry: initial; r: initial; d: initial; table-layout: initial; text-overflow: initial; text-decoration: initial; ime-mode: initial; scrollbar-width: initial; user-select: initial; -moz-window-dragging: initial; -moz-force-broken-image-icon: initial; transition: initial; animation: initial; animation-composition: initial; -moz-box-align: initial; -moz-box-direction: initial; -moz-box-flex: initial; -moz-box-orient: initial; -moz-box-pack: initial; -moz-box-ordinal-group: initial;"></span>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label mt-4" for="exampleSelect1">Example select</label>
|
|
<select class="form-select" id="exampleSelect1" data-dashlane-rid="d999170bdc1f3f33"
|
|
data-form-type="other">
|
|
<option>1</option>
|
|
<option>2</option>
|
|
<option>3</option>
|
|
<option>4</option>
|
|
<option>5</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label mt-4" for="exampleSelect1">Example disabled select</label>
|
|
<select class="form-select" id="exampleDisabledSelect1" data-dashlane-rid="b08cf2f4925e11ed"
|
|
data-form-type="other" disabled="">
|
|
<option>1</option>
|
|
<option>2</option>
|
|
<option>3</option>
|
|
<option>4</option>
|
|
<option>5</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label mt-4" for="exampleSelect2">Example multiple select</label>
|
|
<select class="form-select" id="exampleSelect2" data-dashlane-rid="0bae1248fa4ec0ba"
|
|
data-form-type="other" multiple="">
|
|
<option>1</option>
|
|
<option>2</option>
|
|
<option>3</option>
|
|
<option>4</option>
|
|
<option>5</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label mt-4" for="exampleTextarea">Example textarea</label>
|
|
<textarea class="form-control" id="exampleTextarea" data-dashlane-rid="a09f05889880e6fa" data-form-type="other" rows="3"></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label mt-4" for="formFile">Default file input example</label>
|
|
<input class="form-control" id="formFile" data-dashlane-rid="0424c2552bb9c29c" data-form-type="other"
|
|
type="file">
|
|
</div>
|
|
<fieldset class="form-group">
|
|
<legend class="mt-4">Radio buttons</legend>
|
|
<div class="form-check">
|
|
<input class="form-check-input" id="optionsRadios1" name="optionsRadios"
|
|
data-dashlane-rid="1aa68bbc123088b2" data-form-type="other" type="radio" value="option1"
|
|
checked="">
|
|
<label class="form-check-label" for="optionsRadios1">
|
|
Option one is this and that—be sure to include why it's great
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" id="optionsRadios2" name="optionsRadios"
|
|
data-dashlane-rid="0803b0b7152acccc" data-form-type="other" type="radio" value="option2">
|
|
<label class="form-check-label" for="optionsRadios2">
|
|
Option two can be something else and selecting it will deselect option one
|
|
</label>
|
|
</div>
|
|
<div class="form-check disabled">
|
|
<input class="form-check-input" id="optionsRadios3" name="optionsRadios"
|
|
data-dashlane-rid="8334fdaabab02984" data-form-type="other" type="radio" value="option3"
|
|
disabled="">
|
|
<label class="form-check-label" for="optionsRadios3">
|
|
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" id="flexCheckDefault" data-dashlane-rid="697c211f022b6d6b"
|
|
data-form-type="other" type="checkbox" value="">
|
|
<label class="form-check-label" for="flexCheckDefault">
|
|
Default checkbox
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" id="flexCheckChecked" data-dashlane-rid="a6b6f2e60a75112d"
|
|
data-form-type="other" type="checkbox" value="" checked="">
|
|
<label class="form-check-label" for="flexCheckChecked">
|
|
Checked checkbox
|
|
</label>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset class="form-group">
|
|
<legend class="mt-4">Switches</legend>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" id="flexSwitchCheckDefault" data-dashlane-rid="e142fcf52339424a"
|
|
data-form-type="other" type="checkbox">
|
|
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
|
|
</div>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" id="flexSwitchCheckChecked" data-dashlane-rid="73fbe94513c0ccf4"
|
|
data-form-type="other" type="checkbox" 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 class="form-label" for="customRange1">Example range</label>
|
|
<input class="form-range" id="customRange1" data-dashlane-rid="fa4608656e33d0d0" data-form-type="other"
|
|
type="range">
|
|
<label class="form-label" for="disabledRange">Disabled range</label>
|
|
<input class="form-range" id="disabledRange" data-dashlane-rid="cb133f1dc7f895b6" data-form-type="other"
|
|
type="range" disabled="">
|
|
<label class="form-label" for="customRange3">Example range</label>
|
|
<input class="form-range" id="customRange3" data-dashlane-rid="18afb03e8c4ef5ea" data-form-type="other"
|
|
type="range" min="0" max="5" step="0.5">
|
|
</fieldset>
|
|
<button class="btn btn-primary" data-dashlane-label="true" data-dashlane-rid="8e116d34e3174c02"
|
|
data-form-type="action" type="submit">Submit</button>
|
|
</fieldset>
|
|
</form>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 offset-lg-1">
|
|
<form class="bs-component" data-dashlane-rid="d6b434c3fc6a2c85" data-form-type="login">
|
|
<div class="form-group">
|
|
<fieldset disabled="">
|
|
<label class="form-label" for="disabledInput">Disabled input</label>
|
|
<input class="form-control" id="disabledInput" data-dashlane-rid="bfd369ccf06dfff1" data-form-type="other"
|
|
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" data-dashlane-rid="807154e6f8c0b4b2" data-form-type="other"
|
|
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 class="form-control is-valid" id="inputValid" data-dashlane-rid="7d460ea69db2ee6c" data-form-type="other"
|
|
type="text" value="correct value">
|
|
<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 class="form-control is-invalid" id="inputInvalid" data-dashlane-rid="c876e7da0032fbb4"
|
|
data-form-type="other" type="text" value="wrong value">
|
|
<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" id="inputLarge" data-dashlane-rid="e4f00fd71553ba4b"
|
|
data-form-type="other" type="text" placeholder=".form-control-lg">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="col-form-label mt-4" for="inputDefault">Default input</label>
|
|
<input class="form-control" id="inputDefault" data-dashlane-rid="e221dd12534c6b41" data-form-type="other"
|
|
type="text" placeholder="Default input">
|
|
</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" id="inputSmall" data-dashlane-rid="8f48cf97bbecfb17"
|
|
data-form-type="other" type="text" placeholder=".form-control-sm">
|
|
</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 class="form-control" data-dashlane-rid="9d6533f02d7d7a71" data-form-type="other" type="text"
|
|
aria-label="Amount (to the nearest dollar)">
|
|
<span class="input-group-text">.00</span>
|
|
</div>
|
|
<div class="input-group mb-3">
|
|
<input class="form-control" data-dashlane-rid="e08cf7e3873a8e37" data-form-type="username"
|
|
data-kwimpalastatus="alive" data-kwimpalaid="1697790613688-3" type="text"
|
|
aria-label="Recipient's username" aria-describedby="button-addon2"
|
|
placeholder="Recipient's username">
|
|
<button class="btn btn-primary" id="button-addon2" data-dashlane-label="true"
|
|
data-dashlane-rid="ff0051357b8c6d9d" data-form-type="action,login" data-kwimpalastatus="dead"
|
|
type="button">Button</button>
|
|
<span id="1697790613688-3" data-dashlanecreated="true"
|
|
style="border-block: initial; border-inline: initial; border-start-start-radius: initial; border-start-end-radius: initial; border-end-start-radius: initial; border-end-end-radius: initial; overflow-inline: initial; overflow-block: initial; overscroll-behavior-inline: initial; overscroll-behavior-block: initial; margin-block: initial; margin-inline: initial; scroll-margin-block: initial; scroll-margin-inline: initial; padding-block: initial; padding-inline: initial; scroll-padding-block: initial; scroll-padding-inline: initial; inset-block: initial; inset-inline: initial; block-size: initial; min-block-size: initial; max-block-size: initial; inline-size: initial; min-inline-size: initial; max-inline-size: initial; contain-intrinsic-block-size: initial; contain-intrinsic-inline-size: initial; background-color: initial; background-image: url("moz-extension://cd9992f4-7db3-4237-bc58-98abc44b634d/content/injected/logo-autofill-unknown.svg"); background-position: center center; background-repeat: no-repeat; background-attachment: initial; background-clip: initial; background-origin: initial; background-size: contain; background-blend-mode: initial; border: medium; border-radius: initial; box-decoration-break: initial; -moz-float-edge: initial; display: inline; position: absolute; float: initial; clear: initial; vertical-align: initial; baseline-source: initial; overflow: initial; overflow-anchor: initial; transform: initial; rotate: initial; scale: initial; translate: initial; offset: initial; scroll-behavior: initial; scroll-snap-align: initial; scroll-snap-type: initial; scroll-snap-stop: initial; overscroll-behavior: initial; isolation: initial; break-after: initial; break-before: initial; break-inside: initial; resize: initial; perspective: initial; perspective-origin: initial; backface-visibility: initial; transform-box: initial; transform-style: initial; transform-origin: initial; contain: initial; container: initial; appearance: initial; -moz-orient: initial; will-change: initial; shape-image-threshold: initial; shape-margin: initial; shape-outside: initial; touch-action: initial; -webkit-line-clamp: initial; scrollbar-gutter: initial; columns: initial; column-fill: initial; column-rule: initial; column-span: initial; content: initial; counter-increment: initial; counter-reset: initial; counter-set: initial; opacity: 1; box-shadow: initial; clip: initial; filter: initial; backdrop-filter: initial; mix-blend-mode: initial; font: initial; font-synthesis: initial; font-palette: initial; math-depth: initial; math-style: initial; visibility: visible; writing-mode: initial; text-orientation: initial; print-color-adjust: initial; image-rendering: initial; image-orientation: initial; dominant-baseline: initial; text-anchor: initial; color-interpolation: initial; color-interpolation-filters: initial; fill: initial; fill-opacity: initial; fill-rule: initial; shape-rendering: initial; stroke: initial; stroke-width: initial; stroke-linecap: initial; stroke-linejoin: initial; stroke-miterlimit: initial; stroke-opacity: initial; stroke-dasharray: initial; stroke-dashoffset: initial; clip-rule: initial; marker: initial; paint-order: initial; border-collapse: initial; empty-cells: initial; caption-side: initial; border-spacing: initial; color: initial; text-transform: initial; hyphens: initial; -moz-text-size-adjust: initial; text-indent: initial; overflow-wrap: initial; word-break: initial; text-justify: initial; text-align-last: initial; text-align: initial; letter-spacing: initial; word-spacing: initial; white-space: initial; text-shadow: initial; text-emphasis: initial; text-emphasis-position: initial; tab-size: initial; line-break: initial; -webkit-text-fill-color: initial; -webkit-text-stroke: initial; ruby-align: initial; ruby-position: initial; text-combine-upright: initial; text-rendering: initial; text-underline-offset: initial; text-underline-position: initial; text-decoration-skip-ink: initial; hyphenate-character: initial; forced-color-adjust: initial; -webkit-text-security: initial; cursor: pointer; pointer-events: initial; -moz-user-input: initial; -moz-user-modify: initial; -moz-user-focus: initial; caret-color: initial; accent-color: initial; color-scheme: initial; scrollbar-color: initial; list-style: initial; quotes: initial; margin: initial; overflow-clip-margin: initial; scroll-margin: initial; outline: initial; outline-offset: initial; page: initial; padding: initial; scroll-padding: initial; top: 11px; right: initial; bottom: initial; left: 325px; z-index: auto; flex-flow: initial; place-content: initial; place-items: initial; flex: initial; place-self: initial; order: initial; width: 16px; min-width: 16px; max-width: initial; height: 16px; min-height: initial; max-height: initial; box-sizing: initial; object-fit: initial; object-position: initial; grid-area: initial; grid: initial; gap: initial; aspect-ratio: initial; contain-intrinsic-size: initial; vector-effect: initial; stop-color: initial; stop-opacity: initial; flood-color: initial; flood-opacity: initial; lighting-color: initial; mask-type: initial; clip-path: initial; mask: initial; x: initial; y: initial; cx: initial; cy: initial; rx: initial; ry: initial; r: initial; d: initial; table-layout: initial; text-overflow: initial; text-decoration: initial; ime-mode: initial; scrollbar-width: initial; user-select: initial; -moz-window-dragging: initial; -moz-force-broken-image-icon: initial; transition: initial; animation: initial; animation-composition: initial; -moz-box-align: initial; -moz-box-direction: initial; -moz-box-flex: initial; -moz-box-orient: initial; -moz-box-pack: initial; -moz-box-ordinal-group: initial;"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label mt-4">Floating labels</label>
|
|
<div class="form-floating mb-3">
|
|
<input class="form-control" id="floatingInput" data-dashlane-rid="ee5bb4e47cddbc05"
|
|
data-form-type="email" data-kwimpalastatus="alive" data-kwimpalaid="1697790613688-5" type="email"
|
|
placeholder="name@example.com">
|
|
<label for="floatingInput">Email address</label>
|
|
<span id="1697790613688-5" data-dashlanecreated="true"
|
|
style="border-block: initial; border-inline: initial; border-start-start-radius: initial; border-start-end-radius: initial; border-end-start-radius: initial; border-end-end-radius: initial; overflow-inline: initial; overflow-block: initial; overscroll-behavior-inline: initial; overscroll-behavior-block: initial; margin-block: initial; margin-inline: initial; scroll-margin-block: initial; scroll-margin-inline: initial; padding-block: initial; padding-inline: initial; scroll-padding-block: initial; scroll-padding-inline: initial; inset-block: initial; inset-inline: initial; block-size: initial; min-block-size: initial; max-block-size: initial; inline-size: initial; min-inline-size: initial; max-inline-size: initial; contain-intrinsic-block-size: initial; contain-intrinsic-inline-size: initial; background-color: initial; background-image: url("moz-extension://cd9992f4-7db3-4237-bc58-98abc44b634d/content/injected/logo-autofill-known.svg"); background-position: center center; background-repeat: no-repeat; background-attachment: initial; background-clip: initial; background-origin: initial; background-size: contain; background-blend-mode: initial; border: medium; border-radius: initial; box-decoration-break: initial; -moz-float-edge: initial; display: inline; position: absolute; float: initial; clear: initial; vertical-align: initial; baseline-source: initial; overflow: initial; overflow-anchor: initial; transform: initial; rotate: initial; scale: initial; translate: initial; offset: initial; scroll-behavior: initial; scroll-snap-align: initial; scroll-snap-type: initial; scroll-snap-stop: initial; overscroll-behavior: initial; isolation: initial; break-after: initial; break-before: initial; break-inside: initial; resize: initial; perspective: initial; perspective-origin: initial; backface-visibility: initial; transform-box: initial; transform-style: initial; transform-origin: initial; contain: initial; container: initial; appearance: initial; -moz-orient: initial; will-change: initial; shape-image-threshold: initial; shape-margin: initial; shape-outside: initial; touch-action: initial; -webkit-line-clamp: initial; scrollbar-gutter: initial; columns: initial; column-fill: initial; column-rule: initial; column-span: initial; content: initial; counter-increment: initial; counter-reset: initial; counter-set: initial; opacity: 1; box-shadow: initial; clip: initial; filter: initial; backdrop-filter: initial; mix-blend-mode: initial; font: initial; font-synthesis: initial; font-palette: initial; math-depth: initial; math-style: initial; visibility: visible; writing-mode: initial; text-orientation: initial; print-color-adjust: initial; image-rendering: initial; image-orientation: initial; dominant-baseline: initial; text-anchor: initial; color-interpolation: initial; color-interpolation-filters: initial; fill: initial; fill-opacity: initial; fill-rule: initial; shape-rendering: initial; stroke: initial; stroke-width: initial; stroke-linecap: initial; stroke-linejoin: initial; stroke-miterlimit: initial; stroke-opacity: initial; stroke-dasharray: initial; stroke-dashoffset: initial; clip-rule: initial; marker: initial; paint-order: initial; border-collapse: initial; empty-cells: initial; caption-side: initial; border-spacing: initial; color: initial; text-transform: initial; hyphens: initial; -moz-text-size-adjust: initial; text-indent: initial; overflow-wrap: initial; word-break: initial; text-justify: initial; text-align-last: initial; text-align: initial; letter-spacing: initial; word-spacing: initial; white-space: initial; text-shadow: initial; text-emphasis: initial; text-emphasis-position: initial; tab-size: initial; line-break: initial; -webkit-text-fill-color: initial; -webkit-text-stroke: initial; ruby-align: initial; ruby-position: initial; text-combine-upright: initial; text-rendering: initial; text-underline-offset: initial; text-underline-position: initial; text-decoration-skip-ink: initial; hyphenate-character: initial; forced-color-adjust: initial; -webkit-text-security: initial; cursor: pointer; pointer-events: initial; -moz-user-input: initial; -moz-user-modify: initial; -moz-user-focus: initial; caret-color: initial; accent-color: initial; color-scheme: initial; scrollbar-color: initial; list-style: initial; quotes: initial; margin: initial; overflow-clip-margin: initial; scroll-margin: initial; outline: initial; outline-offset: initial; page: initial; padding: initial; scroll-padding: initial; top: 21px; right: initial; bottom: initial; left: 397px; z-index: auto; flex-flow: initial; place-content: initial; place-items: initial; flex: initial; place-self: initial; order: initial; width: 16px; min-width: 16px; max-width: initial; height: 16px; min-height: initial; max-height: initial; box-sizing: initial; object-fit: initial; object-position: initial; grid-area: initial; grid: initial; gap: initial; aspect-ratio: initial; contain-intrinsic-size: initial; vector-effect: initial; stop-color: initial; stop-opacity: initial; flood-color: initial; flood-opacity: initial; lighting-color: initial; mask-type: initial; clip-path: initial; mask: initial; x: initial; y: initial; cx: initial; cy: initial; rx: initial; ry: initial; r: initial; d: initial; table-layout: initial; text-overflow: initial; text-decoration: initial; ime-mode: initial; scrollbar-width: initial; user-select: initial; -moz-window-dragging: initial; -moz-force-broken-image-icon: initial; transition: initial; animation: initial; animation-composition: initial; -moz-box-align: initial; -moz-box-direction: initial; -moz-box-flex: initial; -moz-box-orient: initial; -moz-box-pack: initial; -moz-box-ordinal-group: initial;"></span>
|
|
</div>
|
|
<div class="form-floating">
|
|
<input class="form-control" id="floatingPassword" data-dashlane-rid="0bfe4f79ba48d786"
|
|
data-form-type="password" data-kwimpalastatus="alive" data-kwimpalaid="1697790613688-6"
|
|
type="password" placeholder="Password" autocomplete="off">
|
|
<label for="floatingPassword">Password</label>
|
|
<span id="1697790613688-6" data-dashlanecreated="true"
|
|
style="border-block: initial; border-inline: initial; border-start-start-radius: initial; border-start-end-radius: initial; border-end-start-radius: initial; border-end-end-radius: initial; overflow-inline: initial; overflow-block: initial; overscroll-behavior-inline: initial; overscroll-behavior-block: initial; margin-block: initial; margin-inline: initial; scroll-margin-block: initial; scroll-margin-inline: initial; padding-block: initial; padding-inline: initial; scroll-padding-block: initial; scroll-padding-inline: initial; inset-block: initial; inset-inline: initial; block-size: initial; min-block-size: initial; max-block-size: initial; inline-size: initial; min-inline-size: initial; max-inline-size: initial; contain-intrinsic-block-size: initial; contain-intrinsic-inline-size: initial; background-color: initial; background-image: url("moz-extension://cd9992f4-7db3-4237-bc58-98abc44b634d/content/injected/logo-autofill-unknown.svg"); background-position: center center; background-repeat: no-repeat; background-attachment: initial; background-clip: initial; background-origin: initial; background-size: contain; background-blend-mode: initial; border: medium; border-radius: initial; box-decoration-break: initial; -moz-float-edge: initial; display: inline; position: absolute; float: initial; clear: initial; vertical-align: initial; baseline-source: initial; overflow: initial; overflow-anchor: initial; transform: initial; rotate: initial; scale: initial; translate: initial; offset: initial; scroll-behavior: initial; scroll-snap-align: initial; scroll-snap-type: initial; scroll-snap-stop: initial; overscroll-behavior: initial; isolation: initial; break-after: initial; break-before: initial; break-inside: initial; resize: initial; perspective: initial; perspective-origin: initial; backface-visibility: initial; transform-box: initial; transform-style: initial; transform-origin: initial; contain: initial; container: initial; appearance: initial; -moz-orient: initial; will-change: initial; shape-image-threshold: initial; shape-margin: initial; shape-outside: initial; touch-action: initial; -webkit-line-clamp: initial; scrollbar-gutter: initial; columns: initial; column-fill: initial; column-rule: initial; column-span: initial; content: initial; counter-increment: initial; counter-reset: initial; counter-set: initial; opacity: 1; box-shadow: initial; clip: initial; filter: initial; backdrop-filter: initial; mix-blend-mode: initial; font: initial; font-synthesis: initial; font-palette: initial; math-depth: initial; math-style: initial; visibility: visible; writing-mode: initial; text-orientation: initial; print-color-adjust: initial; image-rendering: initial; image-orientation: initial; dominant-baseline: initial; text-anchor: initial; color-interpolation: initial; color-interpolation-filters: initial; fill: initial; fill-opacity: initial; fill-rule: initial; shape-rendering: initial; stroke: initial; stroke-width: initial; stroke-linecap: initial; stroke-linejoin: initial; stroke-miterlimit: initial; stroke-opacity: initial; stroke-dasharray: initial; stroke-dashoffset: initial; clip-rule: initial; marker: initial; paint-order: initial; border-collapse: initial; empty-cells: initial; caption-side: initial; border-spacing: initial; color: initial; text-transform: initial; hyphens: initial; -moz-text-size-adjust: initial; text-indent: initial; overflow-wrap: initial; word-break: initial; text-justify: initial; text-align-last: initial; text-align: initial; letter-spacing: initial; word-spacing: initial; white-space: initial; text-shadow: initial; text-emphasis: initial; text-emphasis-position: initial; tab-size: initial; line-break: initial; -webkit-text-fill-color: initial; -webkit-text-stroke: initial; ruby-align: initial; ruby-position: initial; text-combine-upright: initial; text-rendering: initial; text-underline-offset: initial; text-underline-position: initial; text-decoration-skip-ink: initial; hyphenate-character: initial; forced-color-adjust: initial; -webkit-text-security: initial; cursor: pointer; pointer-events: initial; -moz-user-input: initial; -moz-user-modify: initial; -moz-user-focus: initial; caret-color: initial; accent-color: initial; color-scheme: initial; scrollbar-color: initial; list-style: initial; quotes: initial; margin: initial; overflow-clip-margin: initial; scroll-margin: initial; outline: initial; outline-offset: initial; page: initial; padding: initial; scroll-padding: initial; top: 21px; right: initial; bottom: initial; left: 397px; z-index: auto; flex-flow: initial; place-content: initial; place-items: initial; flex: initial; place-self: initial; order: initial; width: 16px; min-width: 16px; max-width: initial; height: 16px; min-height: initial; max-height: initial; box-sizing: initial; object-fit: initial; object-position: initial; grid-area: initial; grid: initial; gap: initial; aspect-ratio: initial; contain-intrinsic-size: initial; vector-effect: initial; stop-color: initial; stop-opacity: initial; flood-color: initial; flood-opacity: initial; lighting-color: initial; mask-type: initial; clip-path: initial; mask: initial; x: initial; y: initial; cx: initial; cy: initial; rx: initial; ry: initial; r: initial; d: initial; table-layout: initial; text-overflow: initial; text-decoration: initial; ime-mode: initial; scrollbar-width: initial; user-select: initial; -moz-window-dragging: initial; -moz-force-broken-image-icon: initial; transition: initial; animation: initial; animation-composition: initial; -moz-box-align: initial; -moz-box-direction: initial; -moz-box-flex: initial; -moz-box-orient: initial; -moz-box-pack: initial; -moz-box-ordinal-group: initial;"></span>
|
|
</div>
|
|
</div>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navs
|
|
================================================== -->
|
|
<div class="bs-docs-section">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="page-header">
|
|
<h1 id="navs">Navs</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-5">
|
|
<div class="col-lg-6">
|
|
<h2 id="nav-tabs">Tabs</h2>
|
|
<div class="bs-component">
|
|
<ul class="nav nav-tabs" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link active" data-bs-toggle="tab" href="#home" role="tab"
|
|
aria-selected="true">Home</a>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link" data-bs-toggle="tab" href="#profile" role="tab" aria-selected="false"
|
|
tabindex="-1">Profile</a>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link disabled" href="#" role="tab" aria-selected="false"
|
|
tabindex="-1">Disabled</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">
|
|
<h6 class="dropdown-header">Dropdown header</h6>
|
|
<a class="dropdown-item" href="#">Action</a>
|
|
<a class="dropdown-item" href="#">Another action</a>
|
|
<a class="dropdown-item" href="#">Something else here</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="#">Separated link</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content" id="myTabContent">
|
|
<div class="tab-pane fade show active" id="home" role="tabpanel">
|
|
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
|
|
master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro
|
|
keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat
|
|
salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
|
|
</div>
|
|
<div class="tab-pane fade" id="profile" role="tabpanel">
|
|
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1
|
|
labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer
|
|
twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl
|
|
cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.</p>
|
|
</div>
|
|
<div class="tab-pane fade" id="dropdown1">
|
|
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny
|
|
pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard
|
|
locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid
|
|
8-bit cred pitchfork.</p>
|
|
</div>
|
|
<div class="tab-pane fade" id="dropdown2">
|
|
<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse
|
|
gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf
|
|
cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out
|
|
farm-to-table VHS viral locavore cosby sweater.</p>
|
|
</div>
|
|
</div>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<h2 id="nav-pills">Pills</h2>
|
|
<div class="bs-component">
|
|
<ul class="nav nav-pills">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="#">Active</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button"
|
|
aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
|
<div class="dropdown-menu">
|
|
<h6 class="dropdown-header">Dropdown header</h6>
|
|
<a class="dropdown-item" href="#">Action</a>
|
|
<a class="dropdown-item" href="#">Another action</a>
|
|
<a class="dropdown-item" href="#">Something else here</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="#">Separated link</a>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Link</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link disabled" href="#">Disabled</a>
|
|
</li>
|
|
</ul>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
<br>
|
|
<div class="bs-component">
|
|
<ul class="nav nav-pills flex-column">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="#">Active</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button"
|
|
aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
|
<div class="dropdown-menu">
|
|
<h6 class="dropdown-header">Dropdown header</h6>
|
|
<a class="dropdown-item" href="#">Action</a>
|
|
<a class="dropdown-item" href="#">Another action</a>
|
|
<a class="dropdown-item" href="#">Something else here</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="#">Separated link</a>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Link</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link disabled" href="#">Disabled</a>
|
|
</li>
|
|
</ul>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<h2 id="nav-breadcrumbs">Breadcrumbs</h2>
|
|
<div class="bs-component">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item active">Home</li>
|
|
</ol>
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
|
<li class="breadcrumb-item active">Library</li>
|
|
</ol>
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
|
<li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
<li class="breadcrumb-item active">Data</li>
|
|
</ol>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<h2 id="pagination">Pagination</h2>
|
|
<div class="bs-component">
|
|
<div>
|
|
<ul class="pagination">
|
|
<li class="page-item disabled">
|
|
<a class="page-link" href="#">«</a>
|
|
</li>
|
|
<li class="page-item active">
|
|
<a class="page-link" href="#">1</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">2</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">3</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">4</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">5</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">»</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<ul class="pagination pagination-lg">
|
|
<li class="page-item disabled">
|
|
<a class="page-link" href="#">«</a>
|
|
</li>
|
|
<li class="page-item active">
|
|
<a class="page-link" href="#">1</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">2</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">3</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">4</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">5</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">»</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<ul class="pagination pagination-sm">
|
|
<li class="page-item disabled">
|
|
<a class="page-link" href="#">«</a>
|
|
</li>
|
|
<li class="page-item active">
|
|
<a class="page-link" href="#">1</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">2</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">3</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">4</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">5</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">»</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Indicators
|
|
================================================== -->
|
|
<div class="bs-docs-section">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="page-header">
|
|
<h1 id="indicators">Indicators</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h2>Alerts</h2>
|
|
<div class="bs-component">
|
|
<div class="alert alert-dismissible alert-warning">
|
|
<button class="btn-close" data-bs-dismiss="alert" type="button"></button>
|
|
<h4 class="alert-heading">Warning!</h4>
|
|
<p class="mb-0">Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue.
|
|
Praesent commodo cursus magna, <a class="alert-link" href="#">vel scelerisque nisl consectetur et</a>.
|
|
</p>
|
|
</div>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<div class="alert alert-dismissible alert-danger">
|
|
<button class="btn-close" data-bs-dismiss="alert" type="button"></button>
|
|
<strong>Oh snap!</strong> <a class="alert-link" href="#">Change a few things up</a> and try submitting
|
|
again.
|
|
</div>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<div class="alert alert-dismissible alert-success">
|
|
<button class="btn-close" data-bs-dismiss="alert" type="button"></button>
|
|
<strong>Well done!</strong> You successfully read <a class="alert-link" href="#">this important alert
|
|
message</a>.
|
|
</div>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<div class="alert alert-dismissible alert-info">
|
|
<button class="btn-close" data-bs-dismiss="alert" type="button"></button>
|
|
<strong>Heads up!</strong> This <a class="alert-link" href="#">alert needs your attention</a>, but it's
|
|
not super important.
|
|
</div>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<div class="alert alert-dismissible alert-primary">
|
|
<button class="btn-close" data-bs-dismiss="alert" type="button"></button>
|
|
<strong>Oh snap!</strong> <a class="alert-link" href="#">Change a few things up</a> and try submitting
|
|
again.
|
|
</div>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<div class="alert alert-dismissible alert-secondary">
|
|
<button class="btn-close" data-bs-dismiss="alert" type="button"></button>
|
|
<strong>Well done!</strong> You successfully read <a class="alert-link" href="#">this important alert
|
|
message</a>.
|
|
</div>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<div class="alert alert-dismissible alert-light">
|
|
<button class="btn-close" data-bs-dismiss="alert" type="button"></button>
|
|
<strong>Heads up!</strong> This <a class="alert-link" href="#">alert needs your attention</a>, but it's
|
|
not super important.
|
|
</div>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h2>Badges</h2>
|
|
<div class="bs-component mb-4">
|
|
<span class="badge bg-primary">Primary</span>
|
|
<span class="badge bg-secondary">Secondary</span>
|
|
<span class="badge bg-success">Success</span>
|
|
<span class="badge bg-danger">Danger</span>
|
|
<span class="badge bg-warning">Warning</span>
|
|
<span class="badge bg-info">Info</span>
|
|
<span class="badge bg-light">Light</span>
|
|
<span class="badge bg-dark">Dark</span>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
<div class="bs-component">
|
|
<span class="badge rounded-pill bg-primary">Primary</span>
|
|
<span class="badge rounded-pill bg-secondary">Secondary</span>
|
|
<span class="badge rounded-pill bg-success">Success</span>
|
|
<span class="badge rounded-pill bg-danger">Danger</span>
|
|
<span class="badge rounded-pill bg-warning">Warning</span>
|
|
<span class="badge rounded-pill bg-info">Info</span>
|
|
<span class="badge rounded-pill bg-light">Light</span>
|
|
<span class="badge rounded-pill bg-dark">Dark</span>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Progress
|
|
================================================== -->
|
|
<div class="bs-docs-section">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="page-header">
|
|
<h1 id="progress">Progress</h1>
|
|
</div>
|
|
|
|
<h3 id="progress-basic">Basic</h3>
|
|
<div class="bs-component">
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"
|
|
style="width: 25%;"></div>
|
|
</div>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
|
|
<h3 id="progress-alternatives">Contextual alternatives</h3>
|
|
<div class="bs-component">
|
|
<div class="progress">
|
|
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="25" aria-valuemin="0"
|
|
aria-valuemax="100" style="width: 25%;"></div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar bg-info" role="progressbar" aria-valuenow="50" aria-valuemin="0"
|
|
aria-valuemax="100" style="width: 50%;"></div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="75" aria-valuemin="0"
|
|
aria-valuemax="100" style="width: 75%;"></div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="100" aria-valuemin="0"
|
|
aria-valuemax="100" style="width: 100%;"></div>
|
|
</div>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
|
|
<h3 id="progress-multiple">Multiple bars</h3>
|
|
<div class="bs-component">
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"
|
|
style="width: 15%;"></div>
|
|
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="30" aria-valuemin="0"
|
|
aria-valuemax="100" style="width: 30%;"></div>
|
|
<div class="progress-bar bg-info" role="progressbar" aria-valuenow="20" aria-valuemin="0"
|
|
aria-valuemax="100" style="width: 20%;"></div>
|
|
</div>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
|
|
<h3 id="progress-striped">Striped</h3>
|
|
<div class="bs-component">
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="10" aria-valuemin="0"
|
|
aria-valuemax="100" style="width: 10%;"></div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" aria-valuenow="25"
|
|
aria-valuemin="0" aria-valuemax="100" style="width: 25%;"></div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" aria-valuenow="50"
|
|
aria-valuemin="0" aria-valuemax="100" style="width: 50%;"></div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" aria-valuenow="75"
|
|
aria-valuemin="0" aria-valuemax="100" style="width: 75%;"></div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" aria-valuenow="100"
|
|
aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
|
|
</div>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
|
|
<h3 id="progress-animated">Animated</h3>
|
|
<div class="bs-component">
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75"
|
|
aria-valuemin="0" aria-valuemax="100" style="width: 75%;"></div>
|
|
</div>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Containers
|
|
================================================== -->
|
|
<div class="bs-docs-section">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="page-header">
|
|
<h1 id="containers">Containers</h1>
|
|
</div>
|
|
<div class="bs-component">
|
|
<div class="jumbotron">
|
|
<h1 class="display-3">Hello, world!</h1>
|
|
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to
|
|
featured content or information.</p>
|
|
<hr class="my-4">
|
|
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
|
|
<p class="lead">
|
|
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
|
|
</p>
|
|
</div>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h2>List groups</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<ul class="list-group">
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
Cras justo odio
|
|
<span class="badge bg-primary badge-pill">14</span>
|
|
</li>
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
Dapibus ac facilisis in
|
|
<span class="badge bg-primary badge-pill">2</span>
|
|
</li>
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
Morbi leo risus
|
|
<span class="badge bg-primary badge-pill">1</span>
|
|
</li>
|
|
</ul>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<div class="list-group">
|
|
<a class="list-group-item list-group-item-action active" href="#">Cras justo odio</a>
|
|
<a class="list-group-item list-group-item-action" href="#">Dapibus ac facilisis in</a>
|
|
<a class="list-group-item list-group-item-action disabled" href="#">Morbi leo risus</a>
|
|
</div>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<div class="list-group">
|
|
<a class="list-group-item list-group-item-action flex-column align-items-start active" href="#">
|
|
<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 class="list-group-item list-group-item-action flex-column align-items-start" href="#">
|
|
<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>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h2>Cards</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<div class="card bg-primary mb-3 text-white" style="max-width: 20rem;">
|
|
<div class="card-header">Header</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Primary card title</h4>
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
|
|
content.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card bg-secondary mb-3" style="max-width: 20rem;">
|
|
<div class="card-header">Header</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Secondary card title</h4>
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
|
|
content.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card bg-success mb-3 text-white" style="max-width: 20rem;">
|
|
<div class="card-header">Header</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Success card title</h4>
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
|
|
content.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card bg-danger mb-3 text-white" style="max-width: 20rem;">
|
|
<div class="card-header">Header</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Danger card title</h4>
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
|
|
content.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card bg-warning mb-3 text-white" style="max-width: 20rem;">
|
|
<div class="card-header">Header</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Warning card title</h4>
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
|
|
content.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card bg-info mb-3 text-white" style="max-width: 20rem;">
|
|
<div class="card-header">Header</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Info card title</h4>
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
|
|
content.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card bg-light mb-3" style="max-width: 20rem;">
|
|
<div class="card-header">Header</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Light card title</h4>
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
|
|
content.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card bg-dark mb-3 text-white" style="max-width: 20rem;">
|
|
<div class="card-header">Header</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Dark card title</h4>
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
|
|
content.</p>
|
|
</div>
|
|
</div>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<div class="card border-primary mb-3" style="max-width: 20rem;">
|
|
<div class="card-header">Header</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Primary card title</h4>
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
|
|
content.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card border-secondary mb-3" style="max-width: 20rem;">
|
|
<div class="card-header">Header</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Secondary card title</h4>
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
|
|
content.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card border-success mb-3" style="max-width: 20rem;">
|
|
<div class="card-header">Header</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Success card title</h4>
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
|
|
content.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card border-danger mb-3" style="max-width: 20rem;">
|
|
<div class="card-header">Header</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Danger card title</h4>
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
|
|
content.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card border-warning mb-3" style="max-width: 20rem;">
|
|
<div class="card-header">Header</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Warning card title</h4>
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
|
|
content.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card border-info mb-3" style="max-width: 20rem;">
|
|
<div class="card-header">Header</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Info card title</h4>
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
|
|
content.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card border-light mb-3" style="max-width: 20rem;">
|
|
<div class="card-header">Header</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Light card title</h4>
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
|
|
content.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card border-dark mb-3" style="max-width: 20rem;">
|
|
<div class="card-header">Header</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Dark card title</h4>
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
|
|
content.</p>
|
|
</div>
|
|
</div>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<div class="card mb-3">
|
|
<h3 class="card-header">Card header</h3>
|
|
<div class="card-body">
|
|
<h5 class="card-title">Special title treatment</h5>
|
|
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
|
|
</div>
|
|
<svg class="d-block user-select-none" role="img" aria-label="Placeholder: Image cap"
|
|
style="font-size:1.125rem;text-anchor:middle" xmlns="http://www.w3.org/2000/svg" width="100%"
|
|
height="200" focusable="false" preserveAspectRatio="xMidYMid slice" viewBox="0 0 318 180">
|
|
<rect width="100%" height="100%" fill="#868e96"></rect>
|
|
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
|
|
</svg>
|
|
<div class="card-body">
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
|
|
content.</p>
|
|
</div>
|
|
<ul class="list-group list-group-flush">
|
|
<li class="list-group-item">Cras justo odio</li>
|
|
<li class="list-group-item">Dapibus ac facilisis in</li>
|
|
<li class="list-group-item">Vestibulum at eros</li>
|
|
</ul>
|
|
<div class="card-body">
|
|
<a class="card-link" href="#">Card link</a>
|
|
<a class="card-link" href="#">Another link</a>
|
|
</div>
|
|
<div class="card-footer text-muted">
|
|
2 days ago
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Card title</h4>
|
|
<h6 class="card-subtitle text-muted mb-2">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 class="card-link" href="#">Card link</a>
|
|
<a class="card-link" href="#">Another link</a>
|
|
</div>
|
|
</div>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-5">
|
|
<div class="col-lg-12">
|
|
<h2>Accordions</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<div class="accordion" id="accordionExample">
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header" id="headingOne">
|
|
<button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
|
|
type="button" aria-expanded="true" aria-controls="collapseOne">
|
|
Accordion Item #1
|
|
</button>
|
|
</h2>
|
|
<div class="accordion-collapse show collapse" id="collapseOne" data-bs-parent="#accordionExample"
|
|
aria-labelledby="headingOne">
|
|
<div class="accordion-body">
|
|
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse
|
|
plugin adds the appropriate classes that we use to style each element. These classes control the overall
|
|
appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with
|
|
custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go
|
|
within the <code>.accordion-body</code>, though the transition does limit overflow.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header" id="headingTwo">
|
|
<button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo"
|
|
type="button" aria-expanded="false" aria-controls="collapseTwo">
|
|
Accordion Item #2
|
|
</button>
|
|
</h2>
|
|
<div class="accordion-collapse collapse" id="collapseTwo" data-bs-parent="#accordionExample"
|
|
aria-labelledby="headingTwo">
|
|
<div class="accordion-body">
|
|
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse
|
|
plugin adds the appropriate classes that we use to style each element. These classes control the overall
|
|
appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with
|
|
custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go
|
|
within the <code>.accordion-body</code>, though the transition does limit overflow.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header" id="headingThree">
|
|
<button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree"
|
|
type="button" aria-expanded="false" aria-controls="collapseThree">
|
|
Accordion Item #3
|
|
</button>
|
|
</h2>
|
|
<div class="accordion-collapse collapse" id="collapseThree" data-bs-parent="#accordionExample"
|
|
aria-labelledby="headingThree">
|
|
<div class="accordion-body">
|
|
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse
|
|
plugin adds the appropriate classes that we use to style each element. These classes control the overall
|
|
appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with
|
|
custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go
|
|
within the <code>.accordion-body</code>, though the transition does limit overflow.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Dialogs
|
|
================================================== -->
|
|
<div class="bs-docs-section">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="page-header">
|
|
<h1 id="dialogs">Dialogs</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<h2>Modals</h2>
|
|
<div class="bs-component">
|
|
<div class="modal">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Modal title</h5>
|
|
<button class="btn-close" data-bs-dismiss="modal" type="button" aria-label="Close">
|
|
<span aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Modal body text goes here.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-primary" type="button">Save changes</button>
|
|
<button class="btn btn-secondary" data-bs-dismiss="modal" type="button">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
<h2>Offcanvas</h2>
|
|
<div class="bs-component">
|
|
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button"
|
|
aria-controls="offcanvasExample">
|
|
Link with href
|
|
</a>
|
|
<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" type="button"
|
|
aria-controls="offcanvasExample">
|
|
Button with data-bs-target
|
|
</button>
|
|
|
|
<div class="offcanvas offcanvas-start" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel"
|
|
tabindex="-1">
|
|
<div class="offcanvas-header">
|
|
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
|
|
<button class="btn-close text-reset" data-bs-dismiss="offcanvas" type="button"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
<div class="offcanvas-body">
|
|
<div>
|
|
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists,
|
|
etc.
|
|
</div>
|
|
<div class="dropdown mt-3">
|
|
<button class="btn btn-secondary dropdown-toggle" id="dropdownMenuButton" data-bs-toggle="dropdown"
|
|
type="button">
|
|
Dropdown button
|
|
</button>
|
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<h2>Popovers</h2>
|
|
<div class="bs-component mb-5">
|
|
<button class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left"
|
|
data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
|
|
data-bs-original-title="Popover Title" type="button">Left</button>
|
|
|
|
<button class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top"
|
|
data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
|
|
data-bs-original-title="Popover Title" type="button">Top</button>
|
|
|
|
<button class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom"
|
|
data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
|
|
data-bs-original-title="Popover Title" type="button">Bottom</button>
|
|
|
|
<button class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right"
|
|
data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
|
|
data-bs-original-title="Popover Title" type="button">Right</button>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
<h2>Tooltips</h2>
|
|
<div class="bs-component mb-5">
|
|
<button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left"
|
|
data-bs-original-title="Tooltip on left" type="button">Left</button>
|
|
|
|
<button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top"
|
|
data-bs-original-title="Tooltip on top" type="button">Top</button>
|
|
|
|
<button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom"
|
|
data-bs-original-title="Tooltip on bottom" type="button">Bottom</button>
|
|
|
|
<button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right"
|
|
data-bs-original-title="Tooltip on right" type="button">Right</button>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
<h2>Toasts</h2>
|
|
<div class="bs-component">
|
|
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="toast-header">
|
|
<strong class="me-auto">Bootstrap</strong>
|
|
<small>11 mins ago</small>
|
|
<button class="btn-close mb-1 ms-2" data-bs-dismiss="toast" type="button" aria-label="Close">
|
|
<span aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
<div class="toast-body">
|
|
Hello, world! This is a toast message.
|
|
</div>
|
|
</div>
|
|
<button class="source-button btn btn-primary btn-xs" type="button" tabindex="0"><i
|
|
class="bi bi-code"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="source-modal" tabindex="-1">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">Source Code</h4>
|
|
<button class="btn btn-primary btn-copy" type="button"><i class="bi bi-clipboard"></i> Copy Code</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<pre class="language-html"><code></code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer id="footer">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<ul class="list-unstyled">
|
|
<li class="float-end"><a href="#top">Back to top</a></li>
|
|
<li><a href="https://blog.bootswatch.com/">Blog</a></li>
|
|
<li><a href="https://blog.bootswatch.com/rss/">RSS</a></li>
|
|
<li><a href="https://twitter.com/bootswatch">Twitter</a></li>
|
|
<li><a href="https://github.com/thomaspark/bootswatch">GitHub</a></li>
|
|
<li><a href="../help/#api">API</a></li>
|
|
<li><a href="../help/#donate">Donate</a></li>
|
|
</ul>
|
|
<p>Made by <a href="https://thomaspark.co/">Thomas Park</a>.</p>
|
|
<p>Code released under the <a href="https://github.com/thomaspark/bootswatch/blob/master/LICENSE">MIT License</a>.</p>
|
|
<p>Based on <a href="https://getbootstrap.com/" rel="nofollow">Bootstrap</a>. Icons from <a
|
|
href="https://icons.getbootstrap.com/" rel="nofollow">Bootstrap Icons</a>. Web fonts from <a
|
|
href="https://fonts.google.com/" rel="nofollow">Google</a>.</p>
|
|
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
@endsection
|