Form Basic Elements

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.

Focus on label click

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

Static Text

email@pixinvent.com

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

Input with Help text at bottom

Muted help text using .text-muted class.

Autocomplete Disabled

Add attribute autocomplete="off" to disable Autocomplete.

Input Type Options

Text

Using input type="text"

Password

Using input type="password"

Telephone Number

Using input type="tel"

Using input type="email"

URL

Using input type="url"

Using input type="search"

Numbers

Using input type="number"

Date Time

Using input type="datetime-local"

Date

Using input type="date"

Time

Using input type="time"

Week

Using input type="week"

Month

Using input type="month"

Color

Using input type="color"

Range

Using input type="range"

Basic Textarea

Textarea with Placeholder

Textarea with Description

Textarea description text.

Basic Select

Basic select

Custom select

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

Multiple select

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

Basic Input Style 2

Another Input style using .form-group-style

Input text Style 2

Password

URL

Another Select style using .form-group-style

Number

Textarea

Select

Another types using .form-group-style class.

DateTime

Date

Time

Month

Basic File Browser

File input

Basic File Input

Choose file

Input Font Options

Normal Font

.font-weight-normal class for normal font

Bold Font

.font-weight-bold class for bold font

Italic Font

.font-weight-italic class for italic font

Lowercase Font

.text-lowercase class for lowercase font

Capitalized Text

.text-capitalize class for capitalize font

Uppercased Text

.text-uppercased class for uppercased font

Left Aligned Text

.text-left class for left align text in input

Center Aligned Text

.text-center class for center align text in input

Right Aligned Text

.text-right class for right align text in input

Large Font

.font-size-large class for large input font

Small Font

.font-size-small class for small input font

Extra Small 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

Input Styling

Rounded Input

.round class for rounded field

Squared Input

.square class for squared field

Default Input

Default Input Field

Input Column Sizing

Column sizing 1

Column sizing 2

Column sizing 3

Control Sizing Options

Extra Large Input

XLarge Input class .input-xl

Extra Large Select

XLarge Input class .input-xl for select

Large Input

Large Input class .input-lg

Large Select

Large Input class .input-lg for select

Default Input

Default Select

Small Input

Small Input class .input-sm

Small Select

Small Input class .input-sm for select

Extra Small Input

XSmall Input class .input-xs

Extra Small Select

XSmall Input class .input-xs for select

Input Validation States

Danger State

Use.has-danger class for danger state

Success State

Use.has-success class for success state

Warning State

Use.has-warning class for warning state

Input with Icons

Extra Large Input with Left Icon

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

Extra Large Input with Right Icon

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

Large Input with Left Icon

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

Large Input with Right Icon

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

Default Input with Left Icon

Default Input with Right 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

Input Font Color

Input Border Color

Input Background Color

Select Font Color

Select Border Color

Select Background Color

Textarea Font Color

Textarea Border Color

Textarea Background Color

You have new order!

99% Server load

Warning notifixation

Complete the task

Generate monthly report

Margaret Govan

Bret Lezama

Carie Berra

Eric Alsobrook