Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

bootstrap
labels
communitycreator

What are floating labels in Bootstrap?

Akande Olalekan Toheeb

label enables the developer to name an input field. By default, label content and the input field stand separately.

Bootstrap comes with form-floating to enable floating labels with Bootstrap’s textual form fields.

Procedure

The following is a step-by-step procedure to create a floating label in bootstrap:

  1. Create a container, for example div, with the class form-floating

  2. Create your input field.

The input field should have the following:

  • type — to set the form validation

  • class = “form-control”

  • An id — which should match the for attribute in the label

  • A placeholder

  1. Create the label with a for attribute that matches the id of the input element.

NOTE

The input must come before the label.

Floating labels can also be used with bootstrap’s textarea and select.

Try it yourself for better understanding.

RELATED TAGS

bootstrap
labels
communitycreator

CONTRIBUTOR

Akande Olalekan Toheeb
RELATED COURSES

View all Courses

Keep Exploring