mitsuo_makuda/bootstrap-fluent-design_template
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
b58df90d60
bootstrap-fluent-design_tem.../free/forms/form-input-group.html

1249 lines
47 KiB
HTML
Raw Normal View History

New Fluent Design
2021-04-15 13:11:19 +01:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<link rel="icon" href="../../img/mdb-favicon.ico" type="image/x-icon" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
<!-- Google Fonts Roboto -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<!-- MDB -->
<link rel="stylesheet" href="../../css/mdb.min.css" />
<!-- PRISM -->
<link rel="stylesheet" href="../../dev/css/new-prism.css" />
<!-- Custom styles -->
<style></style>
</head>
<body>
<div class="container my-5">
<!-- Navs -->
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<!-- Overview tab -->
<li class="nav-item" role="presentation">
<a
class="nav-link active"
id="pills-overview-tab"
data-mdb-toggle="pill"
href="#pills-overview"
role="tab"
aria-controls="pills-overview"
aria-selected="true"
>Overview</a
>
</li>
<!-- Overview tab -->
<!-- Api tab -->
<li class="nav-item" role="presentation">
<a
class="nav-link"
id="pills-api-tab"
data-mdb-toggle="pill"
href="#pills-api"
role="tab"
aria-controls="pills-api"
aria-selected="false"
>API</a
>
</li>
<!-- Api tab -->
</ul>
<!-- Navs -->
<!-- Panels -->
<div class="tab-content mt-4" id="pills-tabContent">
<!-- Overview panel -->
<div
class="tab-pane fade show active"
id="pills-overview"
role="tabpanel"
aria-labelledby="pills-overview-tab"
>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-10 mb-4">
<!--Section: Docs content-->
<section>
<!--Section: Introduction-->
<section id="section-introduction">
<!-- Main title -->
<h2 class="h1 fw-bold">Title</h2>
<!-- Seo title -->
<h1 class="h5">Subtitle</h1>
<!-- Description -->
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere mollitia qui
aut. Molestias explicabo autem veniam doloribus doloremque numquam odit rem
sapiente natus ipsam temporibus voluptates, ab mollitia repellat! Itaque.
</p>
</section>
<!--Section: Introduction-->
<hr class="my-5" />
<!--Section: Basic example-->
<section id="section-basic-example">
<!-- Section title -->
<h2 class="mb-4">Basic example</h2>
<!--Section: Demo-->
<section class="border p-4 mb-4">
<div class="input-group form-outline mb-3">
<span class="input-group-text" id="basic-addon1">@</span>
<input
type="text"
class="form-control"
id="input1"
placeholder="Username"
aria-label="Username"
aria-describedby="basic-addon1"
/>
<label class="form-label" for="input1">Username</label>
</div>
<div class="input-group form-outline mb-3">
<input
type="text"
class="form-control"
id="input2"
placeholder="Recipient's username"
aria-label="Recipient's username"
aria-describedby="basic-addon2"
/>
<span class="input-group-text" id="basic-addon2">@example.com</span>
<label class="form-label" for="input2">Recipient's username</label>
</div>
<div class="input-group form-outline mb-3">
<span class="input-group-text" id="basic-addon3"
>https://example.com/users/</span
>
<input
type="text"
class="form-control"
id="basic-url"
aria-describedby="basic-addon3"
/>
<label class="form-label" for="basic-url">Your vanity URL</label>
</div>
<div class="input-group form-outline mb-3">
<span class="input-group-text">$</span>
<input
type="text"
class="form-control"
id="input3"
aria-label="Amount (to the nearest dollar)"
/>
<span class="input-group-text">.00</span>
<label class="form-label" for="input3">Your vanity URL</label>
</div>
<div class="input-group form-outline">
<span class="input-group-text">With textarea</span>
<textarea
class="form-control"
aria-label="With textarea"
id="textarea1"
></textarea>
<label class="form-label" for="textarea1">Textarea form</label>
</div>
</section>
<!--Section: Demo-->
<!--Section: Code-->
<section>
<mdbsnippet>
<code data-lang="html" data-name="HTML">
<div class="input-group form-outline mb-3">
<span class="input-group-text" id="basic-addon1">@</span>
<input
type="text"
class="form-control"
id="input1"
placeholder="Username"
aria-label="Username"
aria-describedby="basic-addon1"
/>
<label class="form-label" for="input1">Username</label>
</div>
<div class="input-group form-outline mb-3">
<input
type="text"
class="form-control"
id="input2"
placeholder="Recipient's username"
aria-label="Recipient's username"
aria-describedby="basic-addon2"
/>
<span class="input-group-text" id="basic-addon2">@example.com</span>
<label class="form-label" for="input2">Recipient's username</label>
</div>
<div class="input-group form-outline mb-3">
<span class="input-group-text" id="basic-addon3"
>https://example.com/users/</span
>
<input
type="text"
class="form-control"
id="basic-url"
aria-describedby="basic-addon3"
/>
<label class="form-label" for="basic-url">Your vanity URL</label>
</div>
<div class="input-group form-outline mb-3">
<span class="input-group-text">$</span>
<input
type="text"
class="form-control"
id="input3"
aria-label="Amount (to the nearest dollar)"
/>
<span class="input-group-text">.00</span>
<label class="form-label" for="input3">Your vanity URL</label>
</div>
<div class="input-group form-outline">
<span class="input-group-text">With textarea</span>
<textarea
class="form-control"
aria-label="With textarea"
id="textarea1"
></textarea>
<label class="form-label" for="textarea1">Textarea form</label>
</div>
</code>
<code data-lang="css" data-name="CSS"> .p { color: blue; } </code>
<code data-lang="js" data-name="JavaScript">
var myModal = new bootstrap.Modal(document.getElementById('myModal'),
options)
</code>
</mdbsnippet>
</section>
<!--Section: Code-->
<!-- Section title -->
<h2 class="my-4">Wrapping</h2>
<!--Section: Demo-->
<section class="border p-4 mb-4">
<div class="input-group form-outline flex-nowrap">
<span class="input-group-text" id="addon-wrapping">@</span>
<input
type="text"
class="form-control"
id="input4"
placeholder="Username"
aria-label="Username"
aria-describedby="addon-wrapping"
/>
<label class="form-label" for="input4">Username</label>
</div>
</section>
<!--Section: Demo-->
<!--Section: Code-->
<section>
<mdbsnippet>
<code data-lang="html" data-name="HTML">
<div class="input-group form-outline flex-nowrap">
<span class="input-group-text" id="addon-wrapping">@</span>
<input
type="text"
class="form-control"
id="input4"
placeholder="Username"
aria-label="Username"
aria-describedby="addon-wrapping"
/>
<label class="form-label" for="input4">Username</label>
</div>
</code>
<code data-lang="css" data-name="CSS"> .p { color: blue; } </code>
<code data-lang="js" data-name="JavaScript">
var myModal = new bootstrap.Modal(document.getElementById('myModal'),
options)
</code>
</mdbsnippet>
</section>
<!--Section: Code-->
</section>
<!--Section: Basic example-->
</section>
<!--Section: Docs content-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-2 mb-4">
<!-- Table of content -->
<nav id="table-of-content">
<ul>
<li><a href="#section-introduction">Introduction</a></li>
<li><a href="#section-basic-example">Basic example</a></li>
</ul>
</nav>
<!-- Table of content -->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!-- Overview panel -->
<!-- API panel -->
<div class="tab-pane fade" id="pills-api" role="tabpanel" aria-labelledby="pills-api-tab">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-10 mb-4">
<!--Section: API content-->
<section>
<!--Section: Introduction-->
<section id="section-introduction">
<!-- Main title -->
<h2 class="h1 fw-bold">Title - API</h2>
</section>
<!--Section: Introduction-->
<hr class="my-5" />
<!--Section: Usage-->
<section id="section-usage">
<!-- Section title -->
<h2 class="mb-4">Usage</h2>
<h4 class="mb-4">Via data attributes</h4>
<mdbsnippet>
<code data-lang="html" data-name="HTML">
<button type="button" data-mdb-toggle="modal" data-mdb-target="#myModal">
Launch modal
</button>
</code>
</mdbsnippet>
<h4 class="my-4">Via JavaScript</h4>
<mdbsnippet>
<code data-lang="js" data-name="JavaScript">
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
</code>
</mdbsnippet>
</section>
<!--Section: Usage-->
<hr class="my-5" />
<!--Section: Options-->
<section id="section-options">
<!-- Section title -->
<h2 class="mb-4">Options</h2>
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th class="th-sm">Name</th>
<th class="th-sm">Type</th>
<th class="th-sm">Default</th>
<th class="th-sm">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-nowrap"><code class="highlighter-rouge">tag</code></td>
<td><i>String</i></td>
<td><code>'button'</code></td>
<td>Changes button tag</td>
</tr>
</tbody>
</table>
</div>
</section>
<!--Section: Options-->
<hr class="my-5" />
<!--Section: Methods-->
<section id="section-methods">
<!-- Section title -->
<h2 class="mb-4">Methods</h2>
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th class="th-sm">Name</th>
<th class="th-sm">Description</th>
<th class="th-sm">Example</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-nowrap"><code class="highlighter-rouge">toggle</code></td>
<td>Manually toggles a modal</td>
<td><code class="language-markup text-nowrap">myModal.toggle()</code></td>
</tr>
</tbody>
</table>
</div>
</section>
<!--Section: Methods-->
<hr class="my-5" />
<!--Section: Events-->
<section id="section-events">
<!-- Section title -->
<h2 class="mb-4">Events</h2>
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th class="th-sm">Name</th>
<th class="th-sm">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-nowrap">
<code class="highlighter-rouge">show.bs.modal</code>
</td>
<td>
This event fires immediately when the show instance method is called. If
caused by a click, the clicked element is available as the relatedTarget
property of the event.
</td>
</tr>
</tbody>
</table>
</div>
</section>
<!--Section: Events-->
</section>
<!--Section: API content-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-2 mb-4">
<!-- Table of content -->
<nav id="table-of-content">
<ul>
<li><a href="#section-usage">Usage</a></li>
<li><a href="#section-options">Options</a></li>
<li><a href="#section-methods">Methods</a></li>
<li><a href="#section-events">Events</a></li>
</ul>
</nav>
<!-- Table of content -->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!-- API panel -->
</div>
<!-- Panels -->
</div>
<br />
<hr />
<br />
<div class="container my-5">
<section>
<div class="row">
<div class="col-md-12 mb-5">
<h4 class="mb-4">Custom file input</h4>
<div class="input-group mb-3">
<span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
<div class="form-file">
<input
type="file"
class="form-file-input"
id="inputGroupFile01"
aria-describedby="inputGroupFileAddon01"
/>
<label class="form-file-label" for="inputGroupFile01">
<span class="form-file-text">Choose file...</span>
<span class="form-file-button">Browse</span>
</label>
</div>
</div>
<div class="input-group mb-3">
<div class="form-file">
<input type="file" class="form-file-input" id="inputGroupFile02" />
<label
class="form-file-label"
for="inputGroupFile02"
aria-describedby="inputGroupFileAddon02"
>
<span class="form-file-text">Choose file...</span>
<span class="form-file-button">Browse</span>
</label>
</div>
<span class="input-group-text" id="inputGroupFileAddon02">Upload</span>
</div>
<div class="input-group mb-3">
<button class="btn btn-primary" type="button" id="inputGroupFileAddon03">
Button
</button>
<div class="form-file">
<input
type="file"
class="form-file-input"
id="inputGroupFile03"
aria-describedby="inputGroupFileAddon03"
/>
<label class="form-file-label" for="inputGroupFile03">
<span class="form-file-text">Choose file...</span>
<span class="form-file-button">Browse</span>
</label>
</div>
</div>
<div class="input-group">
<div class="form-file">
<input
type="file"
class="form-file-input"
id="inputGroupFile04"
aria-describedby="inputGroupFileAddon04"
/>
<label class="form-file-label" for="inputGroupFile04">
<span class="form-file-text">Choose file...</span>
<span class="form-file-button">Browse</span>
</label>
</div>
<button class="btn btn-outline-primary" type="button" id="inputGroupFileAddon04">
Button
</button>
</div>
</div>
<div class="col-md-12 mb-5">
<h4 class="mb-4">Custom select</h4>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">Options</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="input-group mb-3">
<select class="form-select" id="inputGroupSelect02">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label class="input-group-text" for="inputGroupSelect02">Options</label>
</div>
<div class="input-group mb-3">
<button class="btn btn-outline-primary" type="button">Button</button>
<select
class="form-select"
id="inputGroupSelect03"
aria-label="Example select with button addon"
>
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="input-group">
<select
class="form-select"
id="inputGroupSelect04"
aria-label="Example select with button addon"
>
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<button class="btn btn-primary" type="button">Button</button>
</div>
</div>
<div class="col-md-12 mb-5">
<h4 class="mb-4">Segmented buttons</h4>
<div class="input-group mb-3">
<button type="button" class="btn btn-outline-primary">Action</button>
<button
type="button"
class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<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>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
<input
type="text"
class="form-control"
aria-label="Text input with segmented dropdown button"
/>
</div>
<div class="input-group">
<input
type="text"
class="form-control"
aria-label="Text input with segmented dropdown button"
/>
<button type="button" class="btn btn-primary">Action</button>
<button
type="button"
class="btn btn-primary dropdown-toggle dropdown-toggle-split"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<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>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
<div class="col-md-12 mb-5">
<h4 class="mb-4">Buttons with dropdowns</h4>
<div class="input-group mb-3">
<button
class="btn btn-primary dropdown-toggle"
type="button"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</button>
<ul class="dropdown-menu">
<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>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
<input
type="text"
class="form-control"
aria-label="Text input with dropdown button"
/>
</div>
<div class="input-group mb-3">
<input
type="text"
class="form-control"
aria-label="Text input with dropdown button"
/>
<button
class="btn btn-outline-primary dropdown-toggle"
type="button"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</button>
<ul class="dropdown-menu dropdown-menu-end">
<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>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<div class="input-group">
<button
class="btn btn-outline-primary dropdown-toggle"
type="button"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action before</a></li>
<li><a class="dropdown-item" href="#">Another action before</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
<input
type="text"
class="form-control"
aria-label="Text input with 2 dropdown buttons"
/>
<button
class="btn btn-outline-primary dropdown-toggle"
type="button"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</button>
<ul class="dropdown-menu dropdown-menu-end">
<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>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
<div class="col-md-12 mb-5">
<h4 class="mb-4">Buttons addons</h4>
<div class="input-group mb-3">
<button class="btn btn-outline-primary" type="button" id="button-addon1">
Button
</button>
<input
type="text"
class="form-control"
placeholder=""
aria-label="Example text with button addon"
aria-describedby="button-addon1"
/>
</div>
<div class="input-group mb-3">
<input
type="text"
class="form-control"
placeholder="Recipient's username"
aria-label="Recipient's username"
aria-describedby="button-addon2"
/>
<button class="btn btn-primary" type="button" id="button-addon2">Button</button>
</div>
<div class="input-group mb-3">
<button class="btn btn-outline-primary" type="button">Button</button>
<button class="btn btn-outline-primary" type="button">Button</button>
<input
type="text"
class="form-control"
placeholder=""
aria-label="Example text with two button addons"
/>
</div>
<div class="input-group">
<input
type="text"
class="form-control"
placeholder="Recipient's username"
aria-label="Recipient's username with two button addons"
/>
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
</div>
<div class="col-md-12 mb-5">
<h4 class="mb-4">Multiple addons</h4>
<div class="input-group mb-3">
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
<input
type="text"
class="form-control"
aria-label="Dollar amount (with dot and two decimal places)"
/>
</div>
<div class="input-group">
<input
type="text"
class="form-control"
aria-label="Dollar amount (with dot and two decimal places)"
/>
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
</div>
</div>
<div class="col-md-12 mb-5">
<h4 class="mb-4">Multiple inputs</h4>
<div class="input-group">
<span class="input-group-text">First and last name</span>
<input type="text" aria-label="First name" class="form-control" />
<input type="text" aria-label="Last name" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 mb-5">
<h4 class="mb-4">Checkboxes and radios</h4>
<div class="input-group mb-3">
<div class="input-group-text">
<input
class="form-check-input"
type="checkbox"
value=""
aria-label="Checkbox for following text input"
/>
</div>
<input type="text" class="form-control" aria-label="Text input with checkbox" />
</div>
<div class="input-group">
<div class="input-group-text">
<input
class="form-check-input"
type="radio"
value=""
aria-label="Radio button for following text input"
/>
</div>
<input type="text" class="form-control" aria-label="Text input with radio button" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 mb-5">
<h4 class="mb-4">Wrapping</h4>
<div class="input-group flex-nowrap">
<span class="input-group-text" id="addon-wrapping">@</span>
<input
type="text"
class="form-control"
placeholder="Username"
aria-label="Username"
aria-describedby="addon-wrapping"
/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 mb-5">
<h4 class="mb-4">Sizing - input group</h4>
<div class="input-group input-group-sm mb-3">
<span class="input-group-text" id="inputGroup-sizing-sm111">Small</span>
<input
type="text"
class="form-control"
aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-sm"
/>
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="inputGroup-sizing-default11">Default</span>
<input
type="text"
class="form-control"
aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-default"
/>
</div>
<div class="input-group input-group-lg">
<span class="input-group-text" id="inputGroup-sizing-lg1">Large</span>
<input
type="text"
class="form-control"
aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-lg"
/>
</div>
</div>
<div class="col-md-4 mb-5">
<h4 class="mb-4">Sizing - form file</h4>
<div class="form-file form-file-sm mb-3">
<input type="file" class="form-file-input" id="customFileLg111" />
<label class="form-file-label" for="customFileLg">
<span class="form-file-text">Choose file...</span>
<span class="form-file-button">Browse</span>
</label>
</div>
<div class="form-file mb-3">
<input type="file" class="form-file-input" id="customFileSm11" />
<label class="form-file-label" for="customFileSm">
<span class="form-file-text">Choose file...</span>
<span class="form-file-button">Browse</span>
</label>
</div>
<div class="form-file form-file-lg">
<input type="file" class="form-file-input" id="customFileSm1" />
<label class="form-file-label" for="customFileSm">
<span class="form-file-text">Choose file...</span>
<span class="form-file-button">Browse</span>
</label>
</div>
</div>
<div class="col-md-4 mb-5">
<h4 class="mb-4">Sizing - form control</h4>
<div class="form-outline mb-3">
<input type="text" id="form1111" class="form-control form-control-sm" />
<label class="form-label" for="form1111">Example label</label>
</div>
<div class="form-outline mb-3">
<input type="text" id="form111" class="form-control" />
<label class="form-label" for="form111">Example label</label>
</div>
<div class="form-outline">
<input type="text" id="form11" class="form-control form-control-lg" />
<label class="form-label" for="form11">Example label</label>
</div>
</div>
</div>
<div class="row">
<h2>Z borderem</h2>
<div class="col-md-6 mb-5">
<h4 class="mb-4">Input group</h4>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">@</span>
<input
type="text"
class="form-control"
placeholder="Username"
aria-label="Username"
aria-describedby="basic-addon1"
/>
</div>
<div class="input-group mb-3">
<input
type="text"
class="form-control"
placeholder="Recipient's username"
aria-label="Recipient's username"
aria-describedby="basic-addon2"
/>
<span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
<label for="basic-url" class="form-label">Your vanity URL</label>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
<input
type="text"
class="form-control"
id="basic-url"
aria-describedby="basic-addon3"
/>
</div>
<div class="input-group mb-3">
<span class="input-group-text">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)" />
<span class="input-group-text">.00</span>
</div>
<div class="input-group">
<span class="input-group-text">With textarea</span>
<textarea class="form-control" aria-label="With textarea"></textarea>
</div>
</div>
<div class="col-md-6 mb-5">
<h4 class="mb-4">File input</h4>
<div class="form-file mb-3">
<input type="file" class="form-file-input" id="customFile" />
<label class="form-file-label" for="customFile">
<span class="form-file-text">Choose file...</span>
<span class="form-file-button">Browse</span>
</label>
</div>
<div class="form-file mb-3">
<input type="file" class="form-file-input" id="customFileDisabled" disabled />
<label class="form-file-label" for="customFileDisabled">
<span class="form-file-text">Choose file...</span>
<span class="form-file-button">Browse</span>
</label>
</div>
<div class="form-file mb-3">
<input type="file" class="form-file-input" id="customFileLong" />
<label class="form-file-label" for="customFileLong">
<span class="form-file-text"
>Lorem ipsum posuere consectetur est at lobortis nulla vitae elit libero a
pharetra augue fusce dapibus tellus ac cursus commodo tortor mauris condimentum
nibh ut fermentum massa justo sit amet risus cras mattis consectetur purus sit
amet fermentum</span
>
<span class="form-file-button">Browse</span>
</label>
</div>
<div class="form-file form-file-lg mb-3">
<input type="file" class="form-file-input" id="customFileLg" />
<label class="form-file-label" for="customFileLg">
<span class="form-file-text">Choose file...</span>
<span class="form-file-button">Browse</span>
</label>
</div>
<div class="form-file form-file-sm">
<input type="file" class="form-file-input" id="customFileSm" />
<label class="form-file-label" for="customFileSm">
<span class="form-file-text">Choose file...</span>
<span class="form-file-button">Browse</span>
</label>
</div>
</div>
</div>
<div class="row">
<h2>Bez bordera</h2>
<div class="col-md-6 mb-5">
<h4 class="mb-4">Input group</h4>
<div class="input-group mb-3">
<span class="input-group-text border-0" id="basic-addon1">@</span>
<input
type="text"
class="form-control rounded"
placeholder="Username"
aria-label="Username"
aria-describedby="basic-addon1"
/>
</div>
<div class="input-group mb-3">
<input
type="text"
class="form-control rounded"
placeholder="Recipient's username"
aria-label="Recipient's username"
aria-describedby="basic-addon2"
/>
<span class="input-group-text border-0" id="basic-addon2">@example.com</span>
</div>
<label for="basic-url2" class="form-label">Your vanity URL</label>
<div class="input-group mb-3">
<span class="input-group-text border-0" id="basic-addon3"
>https://example.com/users/</span
>
<input
type="text"
class="form-control rounded"
id="basic-url2"
aria-describedby="basic-addon3"
/>
</div>
<div class="input-group mb-3">
<span class="input-group-text border-0">$</span>
<input
type="text"
class="form-control rounded"
aria-label="Amount (to the nearest dollar)"
/>
<span class="input-group-text border-0">.00</span>
</div>
<div class="input-group">
<span class="input-group-text border-0">With textarea</span>
<textarea class="form-control rounded" aria-label="With textarea"></textarea>
</div>
</div>
<div class="col-md-6 mb-5">
<h4 class="mb-4">File input</h4>
<div class="form-file test mb-3">
<input type="file" class="form-file-input" id="customFile" />
<label class="form-file-label" for="customFile">
<span class="form-file-text rounded">Choose file...</span>
<span class="form-file-button border-0 ms-0">Browse</span>
</label>
</div>
<div class="form-file test mb-3">
<input type="file" class="form-file-input" id="customFileDisabled" disabled />
<label class="form-file-label" for="customFileDisabled">
<span class="form-file-text rounded">Choose file...</span>
<span class="form-file-button border-0 ms-0 bg-transparent">Browse</span>
</label>
</div>
<div class="form-file test mb-3">
<input type="file" class="form-file-input" id="customFileLong" />
<label class="form-file-label" for="customFileLong">
<span class="form-file-text rounded"
>Lorem ipsum posuere consectetur est at lobortis nulla vitae elit libero a
pharetra augue fusce dapibus tellus ac cursus commodo tortor mauris condimentum
nibh ut fermentum massa justo sit amet risus cras mattis consectetur purus sit
amet fermentum</span
>
<span class="form-file-button border-0 ms-0">Browse</span>
</label>
</div>
<div class="form-file test form-file-lg mb-3">
<input type="file" class="form-file-input" id="customFileLg" />
<label class="form-file-label" for="customFileLg">
<span class="form-file-text rounded">Choose file...</span>
<span class="form-file-button border-0 ms-0">Browse</span>
</label>
</div>
<div class="form-file test form-file-sm">
<input type="file" class="form-file-input" id="customFileSm" />
<label class="form-file-label" for="customFileSm">
<span class="form-file-text rounded">Choose file...</span>
<span class="form-file-button border-0 ms-0">Browse</span>
</label>
</div>
</div>
</div>
</section>
<section>
<h2>Label</h2>
<h4 class="mb-4">Input group</h4>
<div class="input-group form-outline mb-3">
<span class="input-group-text" id="basic-addon11">@</span>
<input
type="text"
class="form-control"
placeholder="Username"
aria-label="Username"
aria-describedby="basic-addon11"
id="form15"
/>
<label class="form-label" for="form15">Example label</label>
</div>
<div class="input-group form-outline mb-3">
<input
type="text"
class="form-control"
placeholder="Recipient's username"
aria-label="Recipient's username"
aria-describedby="basic-addon12"
id="form-16"
/>
<span class="input-group-text" id="basic-addon12">@example.com</span>
<label class="form-label" for="form16">Example label</label>
</div>
<label for="basic-url3" class="form-label">Your vanity URL</label>
<div class="input-group form-outline mb-3">
<span class="input-group-text" id="basic-addon13">https://example.com/users/</span>
<input
type="text"
class="form-control"
id="basic-url3"
aria-describedby="basic-addon13"
id="form16"
/>
<label class="form-label" for="form16">Example label</label>
</div>
<div class="input-group form-outline mb-3">
<span class="input-group-text">$</span>
<input
type="text"
class="form-control"
aria-label="Amount (to the nearest dollar)"
id="form17"
/>
<span class="input-group-text">.00</span>
<label class="form-label" for="form17">Example label</label>
</div>
<div class="input-group form-outline">
<span class="input-group-text">With textarea</span>
<textarea class="form-control" aria-label="With textarea" id="form18"></textarea>
<label class="form-label" for="form18">Example label</label>
</div>
</section>
</div>
<!-- MDB -->
<script type="text/javascript" src="../../js/mdb.min.js"></script>
<!-- PRISM -->
<script type="text/javascript" src="../../dev/js/new-prism.js"></script>
<!-- MDB SNIPPET -->
<script type="text/javascript" src="../../dev/js/dist/mdbsnippet.min.js"></script>
<!-- Custom scripts -->
<script type="text/javascript"></script>
</body>
</html>
Reference in New Issue Copy Permalink