900 lines
49 KiB
PHP
Executable File
900 lines
49 KiB
PHP
Executable File
@extends('layouts.vertical', ["page_title"=> "Form Components"])
|
||
|
||
@section('content')
|
||
<!-- Start Content-->
|
||
<div class="container-fluid">
|
||
|
||
<!-- start page title -->
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="page-title-box">
|
||
<div class="page-title-right">
|
||
<ol class="breadcrumb m-0">
|
||
<li class="breadcrumb-item"><a href="javascript: void(0);">UBold</a></li>
|
||
<li class="breadcrumb-item"><a href="javascript: void(0);">Forms</a></li>
|
||
<li class="breadcrumb-item active">Elements</li>
|
||
</ol>
|
||
</div>
|
||
<h4 class="page-title">Basic Elements</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end page title -->
|
||
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="header-title">Input Types</h4>
|
||
<p class="sub-header">
|
||
Most common form control, text-based input fields. Includes support for all HTML5 types: <code>text</code>, <code>password</code>, <code>datetime</code>, <code>datetime-local</code>, <code>date</code>, <code>month</code>, <code>time</code>, <code>week</code>, <code>number</code>, <code>email</code>, <code>url</code>, <code>search</code>, <code>tel</code>, and <code>color</code>.
|
||
</p>
|
||
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<form>
|
||
|
||
<div class="mb-3">
|
||
<label for="simpleinput" class="form-label">Text</label>
|
||
<input type="text" id="simpleinput" class="form-control">
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="example-email" class="form-label">Email</label>
|
||
<input type="email" id="example-email" name="example-email" class="form-control" placeholder="Email">
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="example-password" class="form-label">Password</label>
|
||
<input type="password" id="example-password" class="form-control" value="password">
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="password" class="form-label">Show/Hide Password</label>
|
||
<div class="input-group input-group-merge">
|
||
<input type="password" id="password" class="form-control" placeholder="Enter your password">
|
||
<div class="input-group-text" data-password="false">
|
||
<span class="password-eye"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="example-palaceholder" class="form-label">Placeholder</label>
|
||
<input type="text" id="example-palaceholder" class="form-control" placeholder="placeholder">
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="example-textarea" class="form-label">Text area</label>
|
||
<textarea class="form-control" id="example-textarea" rows="5"></textarea>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="example-readonly" class="form-label">Readonly</label>
|
||
<input type="text" id="example-readonly" class="form-control" readonly="" value="Readonly value">
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="example-disable" class="form-label">Disabled</label>
|
||
<input type="text" class="form-control" id="example-disable" disabled="" value="Disabled value">
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="example-static" class="form-label">Static control</label>
|
||
<input type="text" readonly class="form-control-plaintext" id="example-static" value="email@example.com">
|
||
</div>
|
||
|
||
<div>
|
||
<label for="example-helping" class="form-label">Helping text</label>
|
||
<input type="text" id="example-helping" class="form-control" placeholder="Helping text">
|
||
<span class="help-block"><small>A block of help text that breaks onto a new line and may extend beyond one line.</small></span>
|
||
</div>
|
||
|
||
</form>
|
||
</div> <!-- end col -->
|
||
|
||
<div class="col-lg-6">
|
||
<form>
|
||
|
||
<div class="mb-3">
|
||
<label for="example-select" class="form-label">Input Select</label>
|
||
<select class="form-select" id="example-select">
|
||
<option>1</option>
|
||
<option>2</option>
|
||
<option>3</option>
|
||
<option>4</option>
|
||
<option>5</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="example-multiselect" class="form-label">Multiple Select</label>
|
||
<select id="example-multiselect" multiple class="form-select">
|
||
<option>1</option>
|
||
<option>2</option>
|
||
<option>3</option>
|
||
<option>4</option>
|
||
<option>5</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="example-fileinput" class="form-label">Default file input</label>
|
||
<input type="file" id="example-fileinput" class="form-control">
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="example-date" class="form-label">Date</label>
|
||
<input class="form-control" id="example-date" type="date" name="date">
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="example-month" class="form-label">Month</label>
|
||
<input class="form-control" id="example-month" type="month" name="month">
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="example-time" class="form-label">Time</label>
|
||
<input class="form-control" id="example-time" type="time" name="time">
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="example-week" class="form-label">Week</label>
|
||
<input class="form-control" id="example-week" type="week" name="week">
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="example-number" class="form-label">Number</label>
|
||
<input class="form-control" id="example-number" type="number" name="number">
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="example-color" class="form-label">Color</label>
|
||
<input class="form-control" id="example-color" type="color" name="color" value="#727cf5">
|
||
</div>
|
||
|
||
<div>
|
||
<label for="example-range" class="form-label">Range</label>
|
||
<input class="form-range" id="example-range" type="range" name="range" min="0" max="100">
|
||
</div>
|
||
|
||
</form>
|
||
</div> <!-- end col -->
|
||
</div>
|
||
<!-- end row-->
|
||
|
||
</div> <!-- end card-body -->
|
||
</div> <!-- end card -->
|
||
</div><!-- end col -->
|
||
</div>
|
||
<!-- end row -->
|
||
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<h4 class="header-title">Select menu</h4>
|
||
<p class="sub-header">
|
||
Custom <code><select></code> menus need only a custom class, <code>.form-select</code> to trigger the custom styles.
|
||
</p>
|
||
|
||
<select class="form-select">
|
||
<option selected>Open this select menu</option>
|
||
<option value="1">One</option>
|
||
<option value="2">Two</option>
|
||
<option value="3">Three</option>
|
||
</select>
|
||
|
||
<h4 class="header-title mt-4">Switches</h4>
|
||
<p class="sub-header">
|
||
A switch has the markup of a custom checkbox but uses the <code>.form-switch</code> class to render a toggle switch. Switches also support the <code>disabled</code> attribute.
|
||
</p>
|
||
|
||
<div class="form-check form-switch">
|
||
<input type="checkbox" class="form-check-input" id="customSwitch1">
|
||
<label class="form-check-label" for="customSwitch1">Toggle this switch element</label>
|
||
</div>
|
||
<div class="form-check form-switch mt-1">
|
||
<input type="checkbox" class="form-check-input" disabled id="customSwitch2">
|
||
<label class="form-check-label" for="customSwitch2">Disabled switch element</label>
|
||
</div>
|
||
|
||
</div> <!-- end col -->
|
||
|
||
<div class="col-md-6">
|
||
<h4 class="header-title mt-5 mt-sm-0">Checkboxes and radios</h4>
|
||
<div class="mt-3">
|
||
<div class="form-check">
|
||
<input type="checkbox" class="form-check-input" id="customCheck1">
|
||
<label class="form-check-label" for="customCheck1">Check this custom checkbox</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<input type="checkbox" class="form-check-input" id="customCheck2">
|
||
<label class="form-check-label" for="customCheck2">Check this custom checkbox</label>
|
||
</div>
|
||
</div>
|
||
<div class="mt-3">
|
||
<div class="form-check">
|
||
<input type="radio" id="customRadio1" name="customRadio" class="form-check-input">
|
||
<label class="form-check-label" for="customRadio1">Toggle this custom radio</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<input type="radio" id="customRadio2" name="customRadio" class="form-check-input">
|
||
<label class="form-check-label" for="customRadio2">Or toggle this other custom radio</label>
|
||
</div>
|
||
</div>
|
||
</div> <!-- end col -->
|
||
</div> <!-- end row -->
|
||
|
||
</div> <!-- end card-body-->
|
||
</div> <!-- end card -->
|
||
</div> <!-- end col -->
|
||
</div>
|
||
<!-- end row -->
|
||
|
||
<div class="row">
|
||
<div class="col-lg-12">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="header-title">Floating labels</h4>
|
||
<p class="sub-header">
|
||
Wrap a pair of <code><input class="form-control"></code> and <code><label></code> elements in <code>.form-floating</code> to enable floating labels with Bootstrap’s textual form fields. A <code>placeholder</code> is required on each <code><input></code> as our method of CSS-only floating labels uses the <code>:placeholder-shown</code> pseudo-element. Also note that the <code><input></code> must come first so we can utilize a sibling selector (e.g., <code>~</code>).
|
||
</p>
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<h4 class="header-title mb-3">Floating Example</h4>
|
||
|
||
<div class="form-floating mb-3">
|
||
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
|
||
<label for="floatingInput">Email address</label>
|
||
</div>
|
||
<div class="form-floating mb-3">
|
||
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
|
||
<label for="floatingPassword">Password</label>
|
||
</div>
|
||
<div class="form-floating">
|
||
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
|
||
<label for="floatingTextarea2">Comments</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-6">
|
||
<h4 class="header-title mt-lg-0 my-3">Selects</h4>
|
||
|
||
<div class="form-floating mb-3">
|
||
<select class="form-select" id="floatingSelect" aria-label="Floating label select example">
|
||
<option selected>Open this select menu</option>
|
||
<option value="1">One</option>
|
||
<option value="2">Two</option>
|
||
<option value="3">Three</option>
|
||
</select>
|
||
<label for="floatingSelect">Works with selects</label>
|
||
</div>
|
||
|
||
<div class="row g-2">
|
||
<div class="col-md">
|
||
<div class="form-floating">
|
||
<input type="email" class="form-control" id="floatingInputGrid" placeholder="name@example.com" value="mdo@example.com">
|
||
<label for="floatingInputGrid">Email address</label>
|
||
</div>
|
||
</div>
|
||
<div class="col-md">
|
||
<div class="form-floating">
|
||
<select class="form-select" id="floatingSelectGrid" aria-label="Floating label select example">
|
||
<option selected>Open this select menu</option>
|
||
<option value="1">One</option>
|
||
<option value="2">Two</option>
|
||
<option value="3">Three</option>
|
||
</select>
|
||
<label for="floatingSelectGrid">Works with selects</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
|
||
<h4 class="header-title">Input Sizes</h4>
|
||
<p class="sub-header">
|
||
Set heights using classes like <code>.input-lg</code>, and set widths using grid column classes like <code>.col-lg-*</code>.
|
||
</p>
|
||
|
||
<form>
|
||
<div class="mb-3">
|
||
<label for="example-input-small" class="form-label">Small</label>
|
||
<input type="text" id="example-input-small" name="example-input-small" class="form-control form-control-sm" placeholder=".input-sm">
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="example-input-normal" class="form-label">Normal</label>
|
||
<input type="text" id="example-input-normal" name="example-input-normal" class="form-control" placeholder="Normal">
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="example-input-large" class="form-label">Large</label>
|
||
<input type="text" id="example-input-large" name="example-input-large" class="form-control form-control-lg" placeholder=".input-lg">
|
||
</div>
|
||
|
||
<div class="mb-2">
|
||
<label for="example-gridsize" class="form-label">Grid Sizes</label>
|
||
<div class="row">
|
||
<div class="col-sm-4">
|
||
<input type="text" id="example-gridsize" class="form-control" placeholder=".col-sm-4">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
|
||
</div> <!-- end card-body -->
|
||
</div> <!-- end card -->
|
||
</div> <!-- end col -->
|
||
|
||
<div class="col-lg-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
|
||
<h4 class="header-title">Input Group</h4>
|
||
<p class="sub-header">
|
||
Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs
|
||
</p>
|
||
|
||
<form>
|
||
|
||
<div class="mb-3">
|
||
<label class="form-label">Static</label>
|
||
<div class="input-group">
|
||
<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>
|
||
|
||
<div class="mb-3">
|
||
<label class="form-label">Dropdowns</label>
|
||
<div class="input-group">
|
||
<button class="btn input-group-text btn-primary waves-effect waves-light dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
</div>
|
||
<input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label class="form-label">Buttons</label>
|
||
<div class="input-group">
|
||
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username">
|
||
<button class="btn input-group-text btn-dark waves-effect waves-light" type="button">Button</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-0">
|
||
<div class="row">
|
||
<div class="col-xl-6">
|
||
<div class="mb-3 mb-xl-0">
|
||
<label for="inputGroupFile04" class="form-label">Default file input</label>
|
||
<input class="form-control" type="file" id="inputGroupFile04">
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-6">
|
||
<div class="">
|
||
<label for="formFileMultiple" class="form-label">Multiple files input</label>
|
||
<input class="form-control" type="file" id="formFileMultiple" multiple>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
|
||
</div> <!-- end card-body -->
|
||
</div> <!-- end card -->
|
||
</div> <!-- end col -->
|
||
</div>
|
||
<!-- end row -->
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="mb-3 header-title">Basic Example</h4>
|
||
|
||
<form>
|
||
<div class="mb-3">
|
||
<label for="exampleInputEmail1" class="form-label">Email address</label>
|
||
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
|
||
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="exampleInputPassword1" class="form-label">Password</label>
|
||
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
|
||
</div>
|
||
<div class="mb-3">
|
||
<div class="form-check">
|
||
<input type="checkbox" class="form-check-input" id="checkmeout0">
|
||
<label class="form-check-label" for="checkmeout0">Check me out !</label>
|
||
</div>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary waves-effect waves-light">Submit</button>
|
||
</form>
|
||
|
||
</div> <!-- end card-body-->
|
||
</div> <!-- end card-->
|
||
</div>
|
||
<!-- end col -->
|
||
|
||
<div class="col-lg-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
|
||
<h4 class="mb-3 header-title">Horizontal form</h4>
|
||
|
||
<form class="form-horizontal">
|
||
<div class="row mb-3">
|
||
<label for="inputEmail3" class="col-4 col-xl-3 col-form-label">Email</label>
|
||
<div class="col-8 col-xl-9">
|
||
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
|
||
</div>
|
||
</div>
|
||
<div class="row mb-3">
|
||
<label for="inputPassword3" class="col-4 col-xl-3 col-form-label">Password</label>
|
||
<div class="col-8 col-xl-9">
|
||
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
|
||
</div>
|
||
</div>
|
||
<div class="row mb-3">
|
||
<label for="inputPassword5" class="col-4 col-xl-3 col-form-label">Re Password</label>
|
||
<div class="col-8 col-xl-9">
|
||
<input type="password" class="form-control" id="inputPassword5" placeholder="Retype Password">
|
||
</div>
|
||
</div>
|
||
<div class="row mb-3 justify-content-end">
|
||
<div class="col-8 col-xl-9">
|
||
<div class="form-check">
|
||
<input type="checkbox" class="form-check-input" id="checkmeout">
|
||
<label class="form-check-label" for="checkmeout">Check me out !</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="justify-content-end row">
|
||
<div class="col-8 col-xl-9">
|
||
<button type="submit" class="btn btn-info waves-effect waves-light">Sign in</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
|
||
</div> <!-- end card-body -->
|
||
</div> <!-- end card -->
|
||
</div> <!-- end col -->
|
||
|
||
</div>
|
||
<!-- end row -->
|
||
|
||
|
||
<!-- Inline Form -->
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
|
||
<h4 class="header-title">Column sizing</h4>
|
||
|
||
<p class="sub-header">
|
||
As shown in the previous examples, our grid system allows you to place any number of <code>.col</code>s within a <code>.row</code>.
|
||
</p>
|
||
|
||
<form class="row g-3">
|
||
<div class="col-xl-2 col-md-3">
|
||
<label for="staticEmail2" class="visually-hidden">Email</label>
|
||
<input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
|
||
</div>
|
||
<div class="col-xl-2 col-md-3">
|
||
<label for="inputPassword2" class="visually-hidden">Password</label>
|
||
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
|
||
</div>
|
||
<div class="col-xl-2 col-md-3">
|
||
<button type="submit" class="btn btn-primary waves-effect waves-light">Confirm identity</button>
|
||
</div>
|
||
</form>
|
||
|
||
<h6 class="font-13 mt-3">Auto-sizing</h6>
|
||
|
||
<form>
|
||
<div class="row align-items-center">
|
||
<div class="col-auto">
|
||
<label class="visually-hidden" for="inlineFormInput">Name</label>
|
||
<input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
|
||
</div>
|
||
<div class="col-auto">
|
||
<label class="visually-hidden" for="inlineFormInputGroup">Username</label>
|
||
<div class="input-group mb-2">
|
||
<div class="input-group-text">@</div>
|
||
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
|
||
</div>
|
||
</div>
|
||
<div class="col-auto">
|
||
<div class="form-check mb-2">
|
||
<input type="checkbox" class="form-check-input" id="autoSizingCheck">
|
||
<label class="form-check-label" for="autoSizingCheck">Remember me</label>
|
||
</div>
|
||
</div>
|
||
<div class="col-auto">
|
||
<button type="submit" class="btn btn-primary waves-effect waves-light mb-2">Submit</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
|
||
</div> <!-- end card-body -->
|
||
</div> <!-- end card -->
|
||
</div> <!-- end col -->
|
||
</div>
|
||
<!-- end row -->
|
||
|
||
|
||
|
||
<!-- Form row -->
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="header-title">Gutters</h4>
|
||
<p class="text-muted font-13">More complex layouts can also be created with the grid system.</p>
|
||
|
||
<form>
|
||
<div class="row">
|
||
<div class="col-md-6 mb-3">
|
||
<label for="inputEmail4" class="form-label">Email</label>
|
||
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
|
||
</div>
|
||
<div class="col-md-6 mb-3">
|
||
<label for="inputPassword4" class="form-label">Password</label>
|
||
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="inputAddress" class="form-label">Address</label>
|
||
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label for="inputAddress2" class="form-label">Address 2</label>
|
||
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="mb-3 col-md-6">
|
||
<label for="inputCity" class="form-label">City</label>
|
||
<input type="text" class="form-control" id="inputCity">
|
||
</div>
|
||
<div class="mb-3 col-md-4">
|
||
<label for="inputState" class="form-label">State</label>
|
||
<select id="inputState" class="form-select">
|
||
<option>Choose</option>
|
||
<option>Option 1</option>
|
||
<option>Option 2</option>
|
||
<option>Option 3</option>
|
||
</select>
|
||
</div>
|
||
<div class="mb-3 col-md-2">
|
||
<label for="inputZip" class="form-label">Zip</label>
|
||
<input type="text" class="form-control" id="inputZip">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<div class="form-check">
|
||
<input type="checkbox" class="form-check-input" id="customCheck11">
|
||
<label class="form-check-label" for="customCheck11">Check this custom checkbox</label>
|
||
</div>
|
||
</div>
|
||
|
||
<button type="submit" class="btn btn-primary waves-effect waves-light">Sign in</button>
|
||
|
||
</form>
|
||
|
||
</div> <!-- end card-body -->
|
||
</div> <!-- end card-->
|
||
</div> <!-- end col -->
|
||
</div>
|
||
<!-- end row -->
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="row">
|
||
<div class="col-md-4">
|
||
<h4 class="header-title">Custom checkbox - Basic</h4>
|
||
|
||
<p class="sub-header">
|
||
Supports bootstrap brand colors: <code>.form-check</code>,
|
||
<code>.form-check-*</code> etc.
|
||
</p>
|
||
|
||
<div class="form-check mb-2 form-check-primary">
|
||
<input class="form-check-input" type="checkbox" value="" id="customckeck1" checked>
|
||
<label class="form-check-label" for="customckeck1">Primary</label>
|
||
</div>
|
||
|
||
<div class="form-check mb-2 form-check-success">
|
||
<input class="form-check-input" type="checkbox" value="" id="customckeck2">
|
||
<label class="form-check-label" for="customckeck2">Success</label>
|
||
</div>
|
||
|
||
<div class="form-check mb-2 form-check-danger">
|
||
<input class="form-check-input" type="checkbox" value="" id="customckeck3" checked>
|
||
<label class="form-check-label" for="customckeck3">Danger</label>
|
||
</div>
|
||
|
||
<div class="form-check mb-2 form-check-warning">
|
||
<input class="form-check-input" type="checkbox" value="" id="customckeck4" checked>
|
||
<label class="form-check-label" for="customckeck4">Warning</label>
|
||
</div>
|
||
|
||
<div class="form-check mb-2 form-check-pink">
|
||
<input class="form-check-input" type="checkbox" value="" id="customckeck5">
|
||
<label class="form-check-label" for="customckeck5">Pink</label>
|
||
</div>
|
||
|
||
<div class="form-check mb-2 form-check-blue">
|
||
<input class="form-check-input" type="checkbox" value="" id="customckeck7" checked>
|
||
<label class="form-check-label" for="customckeck7">Blue</label>
|
||
</div>
|
||
|
||
<div class="form-check mb-2 form-check-info">
|
||
<input class="form-check-input" type="checkbox" value="" id="customckeck8">
|
||
<label class="form-check-label" for="customckeck8">Info</label>
|
||
</div>
|
||
|
||
<div class="form-check mb-2 form-check-dark">
|
||
<input class="form-check-input" type="checkbox" value="" id="customckeck9" checked>
|
||
<label class="form-check-label" for="customckeck9">Dark</label>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="col-md-4">
|
||
<h4 class="header-title mt-3 mt-md-0">Custom checkbox - Circled</h4>
|
||
|
||
<p class="sub-header">
|
||
<code>.rounded-circle</code> for roundness.
|
||
</p>
|
||
<div class="form-check mb-2 form-check-primary">
|
||
<input class="form-check-input rounded-circle" type="checkbox" value="" id="customckeck10" checked>
|
||
<label class="form-check-label" for="customckeck10">Primary</label>
|
||
</div>
|
||
|
||
<div class="form-check mb-2 form-check-success">
|
||
<input class="form-check-input rounded-circle" type="checkbox" value="" id="customckeck11" checked>
|
||
<label class="form-check-label" for="customckeck11">Success</label>
|
||
</div>
|
||
|
||
<div class="form-check mb-2 form-check-danger">
|
||
<input class="form-check-input rounded-circle" type="checkbox" value="" id="customckeck12">
|
||
<label class="form-check-label" for="customckeck12">Danger</label>
|
||
</div>
|
||
|
||
<div class="form-check mb-2 form-check-warning">
|
||
<input class="form-check-input rounded-circle" type="checkbox" value="" id="customckeck13">
|
||
<label class="form-check-label" for="customckeck13">Warning</label>
|
||
</div>
|
||
|
||
<div class="form-check mb-2 form-check-pink">
|
||
<input class="form-check-input rounded-circle" type="checkbox" value="" id="customckeck14" checked>
|
||
<label class="form-check-label" for="customckeck14">Pink</label>
|
||
</div>
|
||
|
||
<div class="form-check mb-2 form-check-blue">
|
||
<input class="form-check-input rounded-circle" type="checkbox" value="" id="customckeck15" checked>
|
||
<label class="form-check-label" for="customckeck15">Blue</label>
|
||
</div>
|
||
|
||
<div class="form-check mb-2 form-check-info">
|
||
<input class="form-check-input rounded-circle" type="checkbox" value="" id="customckeck16">
|
||
<label class="form-check-label" for="customckeck16">Info</label>
|
||
</div>
|
||
|
||
<div class="form-check mb-2 form-check-dark">
|
||
<input class="form-check-input rounded-circle" type="checkbox" value="" id="customckeck17" checked>
|
||
<label class="form-check-label" for="customckeck17">Dark</label>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="col-md-4">
|
||
<h4 class="header-title mt-3 mt-md-0">Custom checkbox - Disabled</h4>
|
||
|
||
<p class="sub-header">
|
||
Disabled state also supported.
|
||
</p>
|
||
|
||
<div class="form-check mb-2 form-check-primary">
|
||
<input class="form-check-input" type="checkbox" value="" id="customckeck18" disabled>
|
||
<label class="form-check-label" for="customckeck18">Can't check this</label>
|
||
</div>
|
||
|
||
<div class="form-check mb-2">
|
||
<input class="form-check-input" type="checkbox" value="" id="customckeck19" checked disabled>
|
||
<label class="form-check-label" for="customckeck19">This too</label>
|
||
</div>
|
||
|
||
<div class="form-check mb-2 form-check-warning">
|
||
<input class="form-check-input rounded-circle" type="checkbox" value="" id="customckeck20" checked disabled>
|
||
<label class="form-check-label" for="customckeck20">And this</label>
|
||
</div>
|
||
|
||
<div class="form-check mb-2 form-check-info">
|
||
<input class="form-check-input" type="checkbox" value="" id="customckeck21" checked disabled>
|
||
<label class="form-check-label" for="customckeck21">Can't check this</label>
|
||
</div>
|
||
|
||
<div class="form-check mb-2 form-check-pink">
|
||
<input class="form-check-input" type="checkbox" value="" id="customckeck22" checked disabled>
|
||
<label class="form-check-label" for="customckeck22">This too</label>
|
||
</div>
|
||
|
||
<div class="form-check mb-2 form-check-blue">
|
||
<input class="form-check-input rounded-circle" type="checkbox" value="" id="customckeck23" checked disabled>
|
||
<label class="form-check-label" for="customckeck23">And this</label>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div> <!-- end row-->
|
||
</div>
|
||
</div> <!-- end card-->
|
||
</div> <!-- end col-->
|
||
</div> <!-- end row -->
|
||
|
||
<!-- RADIOS -->
|
||
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="row">
|
||
<div class="col-md-4">
|
||
<h4 class="header-title">Custom radio - Basic</h4>
|
||
|
||
<p class="sub-header">
|
||
Supports bootstrap brand colors: <code>.form-check</code>,
|
||
<code>.form-check-*</code> etc.
|
||
</p>
|
||
|
||
<div class="row">
|
||
<div class="col-sm-6">
|
||
<div class="form-check mb-2">
|
||
<input class="form-check-input" type="radio" name="flexRadioDefault" id="customradio1" checked>
|
||
<label class="form-check-label" for="customradio1">Default</label>
|
||
</div>
|
||
|
||
<div class="form-check mb-2 form-check-success">
|
||
<input class="form-check-input" type="radio" name="flexRadioDefault" id="customradio2">
|
||
<label class="form-check-label" for="customradio2">Success</label>
|
||
</div>
|
||
|
||
<div class="form-check mb-2 form-check-info">
|
||
<input class="form-check-input" type="radio" name="flexRadioDefault" id="customradio3">
|
||
<label class="form-check-label" for="customradio3">Info</label>
|
||
</div>
|
||
|
||
<div class="form-check mb-2 form-check-danger">
|
||
<input class="form-check-input" type="radio" name="flexRadioDefault" id="customradio4">
|
||
<label class="form-check-label" for="customradio4">Danger</label>
|
||
</div>
|
||
|
||
<div class="form-check mb-2 form-check-info">
|
||
<input class="form-check-input" type="radio" name="flexRadioDefault" id="customradio5">
|
||
<label class="form-check-label" for="customradio5">Info</label>
|
||
</div>
|
||
|
||
<div class="form-check mb-2 form-check-primary">
|
||
<input class="form-check-input" type="radio" name="flexRadioDefault" id="customradio6">
|
||
<label class="form-check-label" for="customradio6">Primary</label>
|
||
</div>
|
||
|
||
<div class="form-check mb-2 form-check-pink">
|
||
<input class="form-check-input" type="radio" name="flexRadioDefault" id="customradio7">
|
||
<label class="form-check-label" for="customradio7">Pink</label>
|
||
</div>
|
||
|
||
<div class="form-check mb-2 form-check-dark">
|
||
<input class="form-check-input" type="radio" name="flexRadioDefault" id="customradio8">
|
||
<label class="form-check-label" for="customradio8">Dark</label>
|
||
</div>
|
||
</div> <!-- end col -->
|
||
|
||
<div class="col-sm-6">
|
||
<div class="form-check mb-2">
|
||
<input class="form-check-input" type="radio" id="customradio1">
|
||
<label class="form-check-label" for="customradio1">Default</label>
|
||
</div>
|
||
|
||
<div class="form-check mb-2 form-check-success">
|
||
<input class="form-check-input" type="radio" id="customradio2" checked>
|
||
<label class="form-check-label" for="customradio2">Success</label>
|
||
</div>
|
||
|
||
<div class="form-check mb-2 form-check-info">
|
||
<input class="form-check-input" type="radio" id="customradio3">
|
||
<label class="form-check-label" for="customradio3">Info</label>
|
||
</div>
|
||
|
||
<div class="form-check mb-2 form-check-danger">
|
||
<input class="form-check-input" type="radio" id="customradio4" checked>
|
||
<label class="form-check-label" for="customradio4">Danger</label>
|
||
</div>
|
||
|
||
<div class="form-check mb-2 form-check-info">
|
||
<input class="form-check-input" type="radio" id="customradio5">
|
||
<label class="form-check-label" for="customradio5">Info</label>
|
||
</div>
|
||
|
||
<div class="form-check mb-2 form-check-primary">
|
||
<input class="form-check-input" type="radio" id="customradio6" checked>
|
||
<label class="form-check-label" for="customradio6">Primary</label>
|
||
</div>
|
||
|
||
<div class="form-check mb-2 form-check-pink">
|
||
<input class="form-check-input" type="radio" id="customradio7">
|
||
<label class="form-check-label" for="customradio7">Pink</label>
|
||
</div>
|
||
|
||
<div class="form-check mb-2 form-check-dark">
|
||
<input class="form-check-input" type="radio" id="customradio8" checked>
|
||
<label class="form-check-label" for="customradio8">Dark</label>
|
||
</div>
|
||
|
||
</div><!-- end col -->
|
||
</div> <!-- end row-->
|
||
</div>
|
||
<!-- end col -->
|
||
|
||
<div class="col-md-4">
|
||
<h4 class="header-title mt-3 mt-md-0">Custom radio - Disabled</h4>
|
||
<p class="sub-header">
|
||
Disabled state also supported.
|
||
</p>
|
||
|
||
<div class="form-check form-check-danger mb-2">
|
||
<input class="form-check-input" type="radio" id="customradio1" checked disabled>
|
||
<label class="form-check-label" for="customradio1">Zero</label>
|
||
</div>
|
||
|
||
<div class="form-check mb-2 form-check-dark">
|
||
<input class="form-check-input" type="radio" id="customradio2" checked disabled>
|
||
<label class="form-check-label" for="customradio2">One</label>
|
||
</div>
|
||
|
||
<div class="form-check mb-2 form-check-blue">
|
||
<input class="form-check-input" type="radio" id="customradio3" checked disabled>
|
||
<label class="form-check-label" for="customradio3">Two</label>
|
||
</div>
|
||
|
||
<div class="form-check mb-2 form-check-pink">
|
||
<input class="form-check-input" type="radio" id="customradio4" checked disabled>
|
||
<label class="form-check-label" for="customradio4">Three</label>
|
||
</div>
|
||
</div> <!-- end col -->
|
||
|
||
</div> <!-- end row-->
|
||
</div>
|
||
</div> <!-- end card-->
|
||
</div> <!-- end col-->
|
||
</div><!-- end row -->
|
||
|
||
</div> <!-- container -->
|
||
@endsection |