Olian - Bootstrap Minimal & Clean Admin Template

Basic Elements

Text

Usage `type="text"`

Email

Usage `type="email"`

Password

Usage `type="password"`

Number

Usage `type="number"`

Search

Usage `type="search"`

URL

Usage `type="url"`

Tel

Usage `type="tel"`

File

Usage `type="file"`

Date & Time

Usage `type="datetime-local"`

Date

Usage `type="date"`

Time

Usage `type="time"`

Week

Usage `type="week"`

Month

Usage `type="month"`

Range

Usage `type="range"`

Color

Usage `type="color"`

Input type Properties

Placeholder text

Usage `placeholder="....."`

Readonly

Usage `readonly`

Disabled

Usage `disabled`

Static Value

Usage `.form-control-plaintext`

Default Value

Usage `value="....."`

Min Value

Usage `minLength="....."`

Max Value

Usage `maxLength="....."`

Helper text

Usage `.form-text`

Helper Text

Textarea

Usage `textarea`

Default Select

Usage `select`

Multiple Select

Usage `multiple`

Input type with different sizes

Default Size

Usage `.form-control-md`

Small Size

Usage `.form-control-sm`

Large Size

Usage `.form-control-lg`

Grid Sizes

Usage `.col-sm-4`

Grid Sizes

Default Range

Create custom `<input type="range">` controls with `.custom-range`. The track (the background) and thumb (the value) are both styled to appear the same across browsers.

Min Max Range

Range inputs have implicit values for `min` and `max`—`0` and `100`, respectively. You may specify new values for those using the `min` and `max` attributes.

Steps Range

By default, range inputs “snap” to integer values. To change this, you can specify a `step` value. In the example below, we double the number of steps by using `step="0.5"`.

Default Checkbox

By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with `.form-check`.

Default checkbox

Disabled checkbox

Custom Checkbox

Each checkbox and radio is wrapped in a `<div>` with a sibling `<span>` to create our custom control and a `<label>` for the accompanying text. Structurally, this is the same approach as our default `.form-check`.

Check this custom checkbox

Disable custom checkbox

Inline Checkbox

Group checkboxes or radios on the same horizontal row by adding `.form-check-inline` to any `.form-check`.

3 (disabled)

Default Radios

By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with `.form-check`.

Default radio

Second default radio

Disabled radio

Custom Radios

Each checkbox and radio is wrapped in a `<div>` with a sibling `<span>` to create our custom control and a `<label>` for the accompanying text. Structurally, this is the same approach as our default `.form-check`.

Toggle this custom radio

Or toggle this other custom radio

Disabled custom radio

Inline Radios

Group checkboxes or radios on the same horizontal row by adding `.form-check-inline` to any `.form-check`.

3 (disabled)

Custom 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.

Toggle this switch element

Disabled switch element

Settings

Popup Notification

Message Sound

Generate Report

Email Statement

Invoice PDF

Add Users

Show Sidebar

Sticky Topbar

NotificationsClear all

Product Added

Sale Started

Kelly Reported

John Resigned

See all

Basic Elements

Input types

Text

Usage type="text"

Email

Usage type="email"

Password

Usage type="password"

Number

Usage type="number"

Search

Usage type="search"

URL

Usage type="url"

Tel

Usage type="tel"

File

Usage type="file"

Date & Time

Usage type="datetime-local"

Date

Usage type="date"

Time

Usage type="time"

Week

Usage type="week"

Month

Usage type="month"

Range

Usage type="range"

Color

Usage type="color"

Input type Properties

Placeholder text

Usage placeholder="....."

Readonly

Usage readonly

Disabled

Usage disabled

Static Value

Usage .form-control-plaintext

Default Value

Usage value="....."

Min Value

Usage minLength="....."

Max Value

Usage maxLength="....."

Helper text

Usage .form-text

Textarea

Usage textarea

Select

Default Select

Usage select

Multiple Select

Usage multiple

Input type with different sizes

Default Size

Usage .form-control-md

Small Size

Usage .form-control-sm

Large Size

Usage .form-control-lg

Grid Sizes

Usage .col-sm-4

Usage `type="text"`

Usage `type="email"`

Usage `type="password"`

Usage `type="number"`

Usage `type="search"`

Usage `type="url"`

Usage `type="tel"`

Usage `type="file"`

Usage `type="datetime-local"`

Usage `type="date"`

Usage `type="time"`

Usage `type="week"`

Usage `type="month"`

Usage `type="range"`

Usage `type="color"`

Usage `placeholder="....."`

Usage `readonly`

Usage `disabled`

Usage `.form-control-plaintext`

Usage `value="....."`

Usage `minLength="....."`

Usage `maxLength="....."`

Usage `.form-text`

Usage `textarea`

Usage `select`

Usage `multiple`

Usage `.form-control-md`

Usage `.form-control-sm`

Usage `.form-control-lg`

Usage `.col-sm-4`

Create custom `<input type="range">` controls with `.custom-range`. The track (the background) and thumb (the value) are both styled to appear the same across browsers.

Range inputs have implicit values for `min` and `max`—`0` and `100`, respectively. You may specify new values for those using the `min` and `max` attributes.

By default, range inputs “snap” to integer values. To change this, you can specify a `step` value. In the example below, we double the number of steps by using `step="0.5"`.

By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with `.form-check`.

Each checkbox and radio is wrapped in a `<div>` with a sibling `<span>` to create our custom control and a `<label>` for the accompanying text. Structurally, this is the same approach as our default `.form-check`.

Group checkboxes or radios on the same horizontal row by adding `.form-check-inline` to any `.form-check`.

Group checkboxes or radios on the same horizontal row by adding `.custom-control-inline`.

By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with `.form-check`.

Each checkbox and radio is wrapped in a `<div>` with a sibling `<span>` to create our custom control and a `<label>` for the accompanying text. Structurally, this is the same approach as our default `.form-check`.

Group checkboxes or radios on the same horizontal row by adding `.form-check-inline` to any `.form-check`.

Group checkboxes or radios on the same horizontal row by adding `.custom-control-inline`.

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.