Creating Bootstrap 4 labels in forms

The labels in Bootstrap 4 can be referred differently for various elements. For example, labels in the form controls where the title for the text box can be created as a label.

Similarly, you may create floating labels that display inside the form controls and “floats” as information is entered in the textbox.

The labels in Bootstrap 3 are renamed as badges in Bootstrap 4. These badges/labels look like this:

You may read a full tutorial about the Bootstrap 4 badges/labels.

In this tutorial, I am going to show you the usage of labels in form controls. You can see the examples of simple labels that are displayed inline or above in the form elements. I will also show you the examples of floating labels with different styles.

Creating labels in Bootstrap 4 form controls

In this example, a Bootstrap form is created with labels above the form textboxes. For that, the <labels> tags are used before the <input> fields as follows:

See online demo and code

The code:

A few things to learn about labels:

• The label is an HTML attribute that is used with the input fields.
• The label has “for” attribute that is used to bind an input type like textbox by its ID.
• As you click on the label, the input that is bound to the textbox gets focused.

The example of inline labels

By using the Bootstrap 4 grid classes, you may create labels at the same level (inline) with the form fields rather than above the field.

See the code and output of the example where labels are displayed inline:

See online demo and code

The markup:

You can see, for the labels, I used col-sm-4 grid class whereas for the form controls col-sm-8 classes are used. That means, the labels in controls remain inline from small to extra large devices or viewports.

In smart phones (extra small devices), the labels will move above the fields. If you want to keep inline for extra small devices then try col-* classes.

Creating floating label template

The floating labels move inside the textbox as you enter information. For creating floating labels, use the :placeholder-shown pseudo-element that works with the latest browsers (Chrome, Firefox, Safari).

See the following demo where labels move toward left top within the textbox.

See online demo and code

The markup:

You can see the complete CSS for this example (that is required) in the example page’s code section.

Floating labels example 2 – with borderline

Rather than moving the floating label within, it can be “embedded” in the borderline of the form control as well.

The following example shows the textboxes where labels move (if a textbox is focused or information is entered) to the borderline. Have a look at the markup, CSS, and output:

See online demo and code

Grab the complete code from the demo page.