-
English
-
Clear All Notification
View AllCaleb Flakelar commented on Admin 1 min ago
New user registered. 5 hours ago
Cristina Pride
Hi, How are you? What about our next meeting
Caleb Flakelar commented on Admin 4 days ago
Karen Robinson
Wow ! this admin looks good and awesome design
Carlos Crouch liked Admin 13 days ago
-
Dominic Keller
Founder
Form Elements
Input Types
Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.
<div class="form-group">
<label for="simpleinput">Text</label>
<input type="text" id="simpleinput" class="form-control">
</div>
<div class="form-group">
<label for="example-email">Email</label>
<input type="email" id="example-email" name="example-email" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<label for="example-password">Password</label>
<input type="password" id="example-password" class="form-control" value="password">
</div>
<div class="form-group">
<label for="password">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-append" data-password="false">
<div class="input-group-text">
<span class="password-eye"></span>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="example-palaceholder">Placeholder</label>
<input type="text" id="example-palaceholder" class="form-control" placeholder="placeholder">
</div>
<div class="form-group">
<label for="example-textarea">Text area</label>
<textarea class="form-control" id="example-textarea" rows="5"></textarea>
</div>
<div class="form-group">
<label for="example-readonly">Readonly</label>
<input type="text" id="example-readonly" class="form-control" readonly="" value="Readonly value">
</div>
<div class="form-group">
<label for="example-disable">Disabled</label>
<input type="text" class="form-control" id="example-disable" disabled="" value="Disabled value">
</div>
<div class="form-group">
<label for="example-static">Static control</label>
<input type="text" readonly class="form-control-plaintext" id="example-static" value="email@example.com">
</div>
<div class="form-group">
<label for="example-helping">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>
<div class="form-group">
<label for="example-select">Input Select</label>
<select class="form-control" id="example-select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="example-multiselect">Multiple Select</label>
<select id="example-multiselect" multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="example-fileinput">Default file input</label>
<input type="file" id="example-fileinput" class="form-control-file">
</div>
<div class="form-group">
<label for="example-date">Date</label>
<input class="form-control" id="example-date" type="date" name="date">
</div>
<div class="form-group">
<label for="example-month">Month</label>
<input class="form-control" id="example-month" type="month" name="month">
</div>
<div class="form-group">
<label for="example-time">Time</label>
<input class="form-control" id="example-time" type="time" name="time">
</div>
<div class="form-group">
<label for="example-week">Week</label>
<input class="form-control" id="example-week" type="week" name="week">
</div>
<div class="form-group">
<label for="example-number">Number</label>
<input class="form-control" id="example-number" type="number" name="number">
</div>
<div class="form-group">
<label for="example-color">Color</label>
<input class="form-control" id="example-color" type="color" name="color" value="#727cf5">
</div>
<div class="form-group mb-0">
<label for="example-range">Range</label>
<input class="custom-range" id="example-range" type="range" name="range" min="0" max="100">
</div>
Custom select
Custom <select> menus need only a custom class, .custom-select to trigger the custom styles.
<select class="custom-select mb-3">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="custom-select custom-select-lg mb-3">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="custom-select custom-select-sm mb-3">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">Options</label>
</div>
<select class="custom-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">
<select class="custom-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>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
Switches
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.
<!-- Custom Switch -->
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<!-- Custom Switch Disabled -->
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
<label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>
Checkboxes and radios
Each checkbox and radio <input> and <label> pairing is wrapped in a <div> to create our custom control. Structurally, this is the same approach as our default .form-check.
Checkboxes
Inline
Disabled
Radios
Inline
Disabled
<!-- Checkboxes-->
<div class="mt-3">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck2">
<label class="custom-control-label" for="customCheck2">Check this custom checkbox</label>
</div>
</div>
<!-- Inline-->
<div class="mt-2">
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" class="custom-control-input" id="customCheck3">
<label class="custom-control-label" for="customCheck3">Check this custom checkbox</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" class="custom-control-input" id="customCheck4">
<label class="custom-control-label" for="customCheck4">Check this custom checkbox</label>
</div>
</div>
<!-- Disabled-->
<div class="mt-2">
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" class="custom-control-input" id="customCheck5" checked disabled>
<label class="custom-control-label" for="customCheck5">Check this custom checkbox</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" class="custom-control-input" id="customCheck6" disabled>
<label class="custom-control-label" for="customCheck6">Check this custom checkbox</label>
</div>
</div>
<!-- Radios-->
<div class="mt-3">
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>
</div>
<!-- Inline-->
<div class="mt-2">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadio3" name="customRadio1" class="custom-control-input">
<label class="custom-control-label" for="customRadio3">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadio4" name="customRadio1" class="custom-control-input">
<label class="custom-control-label" for="customRadio4">Or toggle this other custom radio</label>
</div>
</div>
<!-- Disabled-->
<div class="mt-2">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadio5" name="customRadio2" class="custom-control-input" disabled>
<label class="custom-control-label" for="customRadio5">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadio6" name="customRadio2" class="custom-control-input" checked disabled>
<label class="custom-control-label" for="customRadio6">Or toggle this other custom radio</label>
</div>
</div>
Input Sizes
Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*.
<div class="form-group mb-3">
<label for="example-input-small">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="form-group mb-3">
<label for="example-input-normal">Normal</label>
<input type="text" id="example-input-normal" name="example-input-normal" class="form-control" placeholder="Normal">
</div>
<div class="form-group mb-3">
<label for="example-input-large">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="form-group mb-2">
<label for="example-gridsize">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>
Input Group
Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs
<div class="form-group">
<label>Static</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group">
<label>Dropdowns</label>
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-primary dropdown-toggle" type="button" data-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>
</div>
<input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group">
<label>Buttons</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username">
<div class="input-group-append">
<button class="btn btn-dark " type="button">Button</button>
</div>
</div>
</div>
<div class="form-group">
<label>Custom file input</label>
<div class="input-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile04">
<label class="custom-file-label" for="inputGroupFile04">Choose file</label>
</div>
</div>
</div>
Basic Example
Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading for documentation on required classes, form layout, and more.
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group mb-3">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="checkmeout0">
<label class="custom-control-label" for="checkmeout0">Check me out !</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Horizontal form
Create horizontal forms with the grid by adding the .row class to form groups and using the .col-*-* classes to specify the width of your labels and controls. Be sure to add .col-form-label to your <label>s as well so they’re vertically centered with their associated form controls.
<form class="form-horizontal">
<div class="form-group row mb-3">
<label for="inputEmail3" class="col-3 col-form-label">Email</label>
<div class="col-9">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row mb-3">
<label for="inputPassword3" class="col-3 col-form-label">Password</label>
<div class="col-9">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group row mb-3">
<label for="inputPassword5" class="col-3 col-form-label">Re Password</label>
<div class="col-9">
<input type="password" class="form-control" id="inputPassword5" placeholder="Retype Password">
</div>
</div>
<div class="form-group row mb-3 justify-content-end">
<div class="col-9">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="checkmeout">
<label class="custom-control-label" for="checkmeout">Check me out !</label>
</div>
</div>
</div>
<div class="form-group mb-0 justify-content-end row">
<div class="col-9">
<button type="submit" class="btn btn-info ">Sign in</button>
</div>
</div>
</form>
Inline Form
Use the .form-inline class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states. Controls only appear inline in viewports that are at least 576px wide to account for narrow viewports on mobile devices.
Auto-sizing
<form class="form-inline">
<div class="form-group">
<label for="staticEmail2" class="sr-only">Email</label>
<input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
</div>
<div class="form-group mx-sm-3">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Confirm identity</button>
</form>
<!-- Auto-sizing -->
<form>
<div class="form-row align-items-center">
<div class="col-auto">
<label class="sr-only" for="inlineFormInput">Name</label>
<input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
</div>
<div class="col-auto">
<label class="sr-only" for="inlineFormInputGroup">Username</label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
</div>
</div>
<div class="col-auto">
<div class="custom-control custom-checkbox mb-2">
<input type="checkbox" class="custom-control-input" id="autoSizingCheck">
<label class="custom-control-label" for="autoSizingCheck">Remember me</label>
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</div>
</div>
</form>
Horizontal form label sizing
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.
<form>
<div class="form-group row">
<label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
</div>
</div>
<div class="form-group row">
<label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
</div>
</div>
<div class="form-group row">
<label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
</div>
</div>
</form>
Form Row
You may also swap .row for .form-row, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4" class="col-form-label">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4" class="col-form-label">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputAddress" class="col-form-label">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2" class="col-form-label">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity" class="col-form-label">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState" class="col-form-label">State</label>
<select id="inputState" class="form-control">
<option>Choose</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip" class="col-form-label">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck11">
<label class="custom-control-label" for="customCheck11">Check this custom checkbox</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>