Bootstrap Tutorial

BS4 HomeBS4 Container

BS4 Borders

BS4 Border AdditiveBS4 Border SubtractiveBS4 Border ColorBS4 Border Radius

BS4 Float

BS4 floatBS4 clearfix

BS4 Close icon

BS4 Close Icon

BS4 Colors

BS4 ColorBS4 Background color

BS4 Display

BS4 Display NotationBS4 Display in Print

BS4 Embed

BS4 embed

BS4 Flex

BS4 FlexBS4 Flex DirectionBS4 justify-contentBS4 align-itemsBS4 align-selfBS4 align-contentBS4 Flex GrowBS4 Flex ShrinkBS4 Flex FillBS4 Flex WrapBS4 OrderBS4 Auto Margins

BS4 Sizing

BS4 WidthBS4 Height

BS4 Spacing

BS4 MarginBS4 PaddingBS4 Horizontal centering

BS4 Text

BS4 Text alignmentBS4 Text wrappingBS4 Text transformBS4 Font weight and italicsBS4 Text decorationBS4 Text resetBS4 Text monospace

BS4 Alignment

BS4 Vertical alignment

BS4 Visibility

BS4 Visibility

BS4 Overflow

BS4 Overflow

BS4 Link

BS4 Stretched Link

BS4 Shadow

BS4 Shadow

BS4 Position

BS4 Position

BS4 Typography

BS4 Typography HeadingsBS4 Typography Custom HeadingsBS4 Typography Display HeadingsBS4 Typography LeadBS4 Typography Inline textBS4 Typography AbbreviationsBS4 Typography BlockquotesBS4 Typography List UnstyledBS4 Typography List Inline

BS4 Code

BS4 Code InlineBS4 Code BlocksBS4 Code VariablesBS4 Sample OutputBS4 User input

BS4 Image

BS4 Image ResponsiveBS4 Image Thumbnails

BS4 Figures

BS4 Figure

BS4 Grid

BS4 Grid

BS4 Media Object

BS4 Media Object

BS4 Table

BS4 TableBS4 Table HeadBS4 Table CaptionsBS4 Table Responsive

BS4 Components

BS4 AlertBS4 BadgeBS4 BreadcrumbBS4 ButtonBS4 Button GroupBS4 CardBS4 CarouselBS4 CollapseBS4 DropdownBS4 FormBS4 Input GroupBS4 JumbotronBS4 List GroupBS4 ModalBS4 NavsBS4 NavbarBS4 PaginationBS4 PopoversBS4 ProgressBS4 SpinnersBS4 TooltipsBS4 ToastsBS4 Scrollspy

Bootstrap4 form

Last Updated:

Basic Form

Check out the example to create a basic form.

Example

Form controls

Check out the example to create a form with controls.

Example

Form File Upload

Check out the example to create a form with file upload.

Example

Form Input Sizing

Check out the example to create form inputs with different sizing.

Example

Form Select Sizing

Check out the example to create a form selects with different sizing.

Example

Form Input ReadOnly

Check out the example to create a form readonly input.

Example

Form Readonly plain text

Check out the example to create a form readonly plain text.

Example

From Input Range

Check out the example to create a form with input range.

Example

Form Checkboxes

Check out the example to create a form with checkboxes.

Example

Form Radios

Check out the example to create a form with radios.

Example

Form Inline Checkboxes

Check out the example to create a form with inline checkboxes.

Example

Form Inline Radios

Check out the example to create a form with inline radios.

Example

Form Groups

Check out the example to create a form groups.

Example

Form Grid

Check out the example to create a form grid.

Example

Form Row

Check out the example to create a form row.

Example

Form Row Complex Structure

Check out the example to create a row complex form structure.

Example

Form Horizontal

Check out the example to create a horizontal form.

Example

Radios
Checkbox

Form Horizontal Label Sizing

Check out the example to create a horizontal form with different label sizing.

Example

Form Column sizing

Check out the example to create a form with different column sizing.

Example

Form Auto-sizing

Check out the example to create an auto-sizing form.

Example

@

Form Help text

Check out the example to create a form with help text.

Example

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

Form Disabled Fieldset

Check out the example to create a form with disabled fieldset.

Example

Form Browser defaults

Check out the example to create a form with browser default validation.

Try to submit this form.

Example

@

Form Server side

Check out the example to create a form with server side validation.

Example

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting.

Form Custom styles

Check out the example to create a form with custom validation.

Example

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting.

Form Prior Validation

Check out the example to create a form with prior validation.

Example

Please enter a message in the textarea.
Example invalid feedback text
More example invalid feedback text
Example invalid custom select feedback
Example invalid custom file feedback

Form with Tooltips

Check out the example to create a form with tooltips.

Try to submit this form.

Example

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.

Form Custom Checkbox

Check out the example to create a form with custom checkbox.

Example

Form Custom Radios

Check out the example to create a form with custom radios.

Example

Form Switches

Check out the example to create a form with switches.

Example

Form Custom Input Range

Check out the example to create a form with custom input range.

Example

Form Custom Input Range with Steps

Check out the example to create a custom input range with steps.

Try to slide the indicator.

Example

Form Custom File Upload

Check out the example to create a form with custom file upload.

Example

Classes

The following table provides a list of all classes to create a form.

ClassExplanation
.form-check Container for checkboxes. Adds proper padding.
.form-check-inline Makes checkboxes appear on the same line (horizontally).
.form-check-input Styles checkboxes with proper margins.
.form-check-label Ensures proper margins for labels used together with checkboxes.
.form-control Used on input, textarea, and select elements to span the entire width of the page and make them responsive.
.form-control-file Adds display:block and width:100% to input filed with type="file".
.form-control-sm Small form control.
.form-control-lg Large form control.
.form-control-plaintext Styles a form control as plain text.
.form-control-range Adds display:block and width:100% to input filed with type="range".
.form-group Container for form input and label.
.form-inline Makes a <form> left-aligned with inline-block controls.
Note: This only applies to forms within viewports that are at least 768px wide.

Share this Page

Meet the Author