@extends('layouts.master') @section('title')Unikit @endsection @section('css') @endsection @section('body-start')
@endsection @section('content') @section('breadcrumb') @component('components.breadcrumb') @slot('li_1') Forms @endslot @slot('title') Form Elements @endslot @endcomponent @endsectionHere are examples of .form-control applied to each
textual HTML5 <input> type.
Basic example to demonstrate Bootstrap’s form styles.
Be sure to use .col-form-label-sm
or .col-form-label-lg to your <label>s
or <legend>s
to correctly follow the size of .form-control-lg and
.form-control-sm.
Custom stylr example.
Use the .col-auto class to create horizontal layouts.
Set heights using classes like
.form-control-lg and
.form-control-sm.
The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text.
Basic example to demonstrate Bootstrap’s form styles.
CUse our custom range inputs for consistent cross-browser styling and built-in customization.
A switch has the markup of a custom checkbox but uses the .custom-switch class to render
a toggle switch. Switches also support the disabled attribute.
For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic and accessible markup, so they’re solid replacements for any default form control.
For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic and accessible markup, so they’re solid replacements for any default form control.
Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.