Form Elements Documentation

Input

Bootstrap’s form controls expand on our Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.

Input Types

Check input type options below that can be used :

Input Types	Usage
Input text type	`<input type="text">`
Password Input	`<input type="password">`
Telephone Number	`<input type="tel">`
Email field	`<input type="email">`
URL field	`<input type="url">`
Search Input	`<input type="search">`
Number Input	`<input type="number">`
Date Time	`<input type="datetime-local">`
Date	`<input type="date">`
Time	`<input type="time">`
Week	`<input type="week">`
Month	`<input type="month">`
Color	`<input type="color">`
Range	`<input type="range">`

Input Style

Use .form-group-style class with .form-group class which contains label and form field.

Find input style options below :

Input style options	Class	Description
Rounded Input	`.round`	Use this class for round styled input.
Square Input	`.square`	Use this class for square styled input.
Input Sizing	`.input-[xl/lg/sm]`	Use this class for different input sizing.
Input with Icons	`.has-icon-left`	Default icon align is right. For left align icon use this class.

More input style example can be like :

Example Type	URL
Input type examples	https://pixinvent.com/demo/convex-bootstrap-admin-dashboard-template/demo-1/inputs.html

Input Groups

Use .input-group class with an .input-group-addon class to prepend or append elements to a .form-control. Place one add-on or button on either side of an input. You may also place one on both sides of an input. It does not support multiple add-ons on a single side, nor multiple form-controls in a single input group.

Check input group options below that can be used :

Input Group Options	Class	Description
Input Group	`.input-group-prepend`	To add input group addon before input. To add icon to left, add span with this class before.
Input Group	`.input-group-append`	To add icon to right, add class after the input. You can add add-on to both the sides too.
Input Group Sizing	`.input-group-[lg/sm]`	For large & small input groups.
Input Group Buttons	`.input-group-btn`	To add input group button to input. To add button to left, add span with this class before. To add button to right, add span using this class after. You can add button to both the sides too.
Input Group add-on bg color	`.bg-*`	To color using this class to the addon.

Here are Input group example below :

Input group
Input group with checkbox & Radio
Input group sizing
Input group buttons
Input group dropdown, etc..

Refer following links for detailed documentation, configuration options, methods and examples:

Type	URL
Bootstrap Link	https://getbootstrap.com/docs/4.1/components/input-group/
Template Page	https://pixinvent.com/demo/convex-bootstrap-admin-dashboard-template/demo-1/input-groups.html

Input Grids

Bootstrap includes a powerful mobile-first grid system for building layouts of all shapes and sizes. It’s based on a 12 column layout and has multiple tiers, one for each media query range. You can use it with Sass mixins or our predefined classes.

Check input grid options below that can be used :

Input Grid Options	Class	Description
Extra small class prefix	`.col-*`	For extra small grids (<576px) for 1 to 12 grids.
Small class prefix	`.col-sm-*`	For small grids (≥576px) for 1 to 12 grids.
Medium class prefix	`.col-md-*`	For medium grids (≥768px) for 1 to 12 grids.
Large class prefix	`.col-lg-*`	For large grids (≥992px) for 1 to 12 grids.
Extra large class prefix	`.col-xl-*`	For extra large grids (≥1200px) for 1 to 12 grids.

Grid Options can be :

Horizontal Grid
Grid With Row Label
Grid With Label
Grid With Left & Right Offset
Centered Input Grid
Grid with Row Label
Grid with Inline Label
Multiple Inputs with Label
Multiple Inputs with Inline Label