Form Basic Elements

  1. Home
  2. Form
  3. Basic Elements
Calender Cart Support
Settings

Default Input text

Default Input text with help

eg.someone@example.com

Password

Disabled Input field

Add attribute disabled to disable input field.

Predefined Input Value

Add attribute value="VALUE" to set predefined value.

Readonly Input field

Add attribute readonly="readonly" to set field readonly.

Input with Placeholder

Maximum Value

Add attribute maxlength="NUMBER" to input area.

To set focus on label click, use .cursor-pointer class.

Static Text

email@pixinvent.com

To set static text use .form-control-static class.

Muted help text using .text-muted class.

Add attribute autocomplete="off" to disable Autocomplete.

Input Type Options

Using input type="text"

Using input type="password"

Using input type="tel"

Using input type="email"

Using input type="url"

Using input type="search"

Using input type="number"

Using input type="datetime-local"

Using input type="date"

Using input type="time"

Using input type="week"

Using input type="month"

Using input type="color"

Using input type="range"

Basic Textarea

Textarea description text.

Basic Select

To use custom select add class.custom-select to select.

To use multiple select add an attribute multiple="multiple".

Basic Input Style 2

Another Input style using .form-group-style

Another Select style using .form-group-style

Another types using .form-group-style class.

Basic File Browser

Basic File Input

Input Font Options

.font-weight-normal class for normal font

.font-weight-bold class for bold font

.font-weight-italic class for italic font

.text-lowercase class for lowercase font

.text-capitalize class for capitalize font

.text-uppercased class for uppercased font

.text-left class for left align text in input

.text-center class for center align text in input

.text-right class for right align text in input

.font-size-large class for large input font

.font-size-small class for small input font

.font-size-xsmall class for XSmall input font

Basic Form Helpers

Form Helper Left

Helper aligned to left

Form Helper Center

Helper aligned to center

Form Helper Right

Helper aligned to right

Form Helper Left with color label

Helper aligned to left

Form Helper Center with color label

Helper aligned to center

Form Helper Right with color label

Helper aligned to right

Form Helper Left with block color label

Helper aligned to left

Form Helper Center with block color label

Helper aligned to center

Form Helper Right with block color label

Helper aligned to right

Inline Helper

Inline helper class .block-tag

Inline Helper with color

Inline color helper

Inputs With Tooltip

Tooltip On Focus

Tooltip On Hover

Tooltip Bottom

Tooltip On Right

Tooltip On Left

Tooltip Top

Input Styling

.round class for rounded field

.square class for squared field

Default Input Field

Input Column Sizing

Control Sizing Options

XLarge Input class .input-xl

XLarge Input class .input-xl for select

Large Input class .input-lg

Large Input class .input-lg for select

Small Input class .input-sm

Small Input class .input-sm for select

XSmall Input class .input-xs

XSmall Input class .input-xs for select

Input Validation States

Use.has-danger class for danger state

Use.has-success class for success state

Use.has-warning class for warning state

Input with Icons

Icon Left class .has-icon-left, XLarge Input class .input-xl& .font-medium-4 class for XLarge Icon

Icon Left class .has-icon-left, XLarge Input class .input-xl& .font-medium-4 class for XLarge Icon

XLarge Input class .input-xl& .font-medium-4 class for XLarge Icon

XLarge Input class .input-xl& .font-medium-4 class for XLarge Icon

Icon Left class .has-icon-left, Large Input class .input-lg& .font-medium-4 class for Large Icon

Icon Left class .has-icon-left, Large Input class .input-lg& .font-medium-4 class for Large Icon

Large Input class .input-lg& .font-medium-4 class for Large Icon

Large Input class .input-lg& .font-medium-4 class for Large Icon

Small Input with Left Icon

Icon Left class .has-icon-left, Small Input class .input-sm& .font-small-4 class for Small Icon

Small Input with Right Icon

Small Input class .input-sm& .font-small-4 class for Small Icon

Extra Small Input with Left Icon

Icon Left class .has-icon-left, XSmall Input class .input-xs& .font-small-2 class for XSmall Icon

Extra Small Input with Right Icon

XSmall Input class .input-xs& .font-small-2 class for XSmall Icon

Round Input with Icon

Use class .has-icon-left class for Left Icon.

Round Input with Right Spin Icon

Default right icon. No classes needed.

Default Input with Spin Icon

Icon Left class .has-icon-left & .spinner class to spin the Icon

Default Input with Right Spin Icon

.spinner class to spin the Icon

Control Color Options