Bootstrap 4 Components


You can create a wide variety of forms using from control styles, layout options, and custom components in BootStrap.

Bootstrap applies display: block; and width:100%; to most form controls resulting in the vertical stacking of the form elements.

Let’s create a basic form with two input fields to input username and password and sign in button.

Now, we can add different input fields like a checkbox, radio button or a text box that only takes input as numbers, you name it, we can have it in our forms.

Inline forms

Use Bootstrap’s .form-inline to render forms as inline and align them horizontally.

Form Layout Using the Grid

To have form elements stacked vertically at the same time the input labels be next to each other horizontally add a .row class to the .form-group and .col-*-* for each column.

In order for the label to align in the center with respect to the input element use class .col-form-label with the label.

Hidden Labels

You can hide the label for the input types by using a .sr-only class to the label. Give a placeholder to the input types to give the user a hint of what input type is expected in an input box.


Add the disabled attribute to the inputs to make it disabled.


Use classes .has-success, .has-warning, .has-danger to the parent element to include validation styles for success, warning, and danger on most form controls. Contextual validation text which will adapt to the parent .has-* class can be added using the class .form-control-feedback.

Help Text

Help text can be block level and inline.

If the help text is longer or you need it to be below the input, block help text can be used.

Inline help text can be included by any of the HTML inline elements like <span> or <small> or utility classes like .text-muted.

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

Required field