Basic Form Elements

Basic Input


With Placeholder

Disabled Input

Add disabled attribute to disable input field.

Readonly Input

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

Predefined Value

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

Static Text

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

Input text with help

Muted help text using .text-muted class.

Textarea & Select

Textual form controls—like <select>s, and <textarea>s—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.


Basic Textarea
Textarea with Placeholder
Textarea with Description

Textarea description text.


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 File Browser

Basic File Input

Basic Form Helpers

Block-level help text in forms can be created using .form-text. Inline help text can be flexibly implemented using any inline HTML element and utility classes like .text-muted.

Form Helper Left

Helper aligned to left

Form Helper Center

Helper aligned to center

Form Helper Right

Helper aligned to right

Inline Helper

Inline helper class .block-tag

Input Styling

Default Input Field

.round class for rounded field

.square class for squared field

Input Sizing Options

Use .input-xl class for extra large Input

Use .input-lg class for large Input

Use .input-sm class for small Input

Use .input-xs class for extra small Input

Use .input-xl class for extra large select

Use .input-lg class for large select

Use .input-sm class for small select

Use .input-xs class for extra small select

Server side Validation

We recommend using client side validation, but in case you require server side, you can indicate invalid and valid form fields with .is-invalid and .is-valid. Note that .invalid-feedback is also supported with these classes.

Use.has-danger class for danger state

Use.has-success class for success state

Validation Tooltips

If your form layout allows it, you can swap the .{valid|invalid}-feedback classes for .{valid|invalid}-tooltip classes to display validation feedback in a styled tooltip. Be sure to have a parent with position: relative on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup.

Looks good!
Looks good!
Please choose a unique and valid username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
Navbar Color Options

Layout Options

Sidebar menu Background

Sidebar Background Image
background image
background image
background image
background image

Try Layout Builder