Hit enter after type your search item

Simple and floating Bootstrap labels in form elements

How to create labels in Bootstrap

The labels are generally used with the form fields like textboxes, textarea, checkbox etc. for showing the purpose of that field.

As using the Bootstrap framework, the labels are styled automatically that you may customize as well.

See the following section for learning how to create the simple and floating labels as using the Bootstrap framework.

 

A demo of simple labels in Bootstrap form

In this demo, a few form fields are created based on Bootstrap CSS form related classes. With each form field, a label is associated. For example, the textbox to enter the name is given the “Name” label. The “for” attribute is associated with the ID of the textbox. Similarly, other form fields are created like a select and checkbox with labels using Bootstrap framework:

bootstrap label

See online demo and code

The markup:


 

A demo of creating inline labels

In above example, the labels Bootstrap were created above the form fields. In this demo, the labels are created inline. Basically, you may use the form-inline class which is built-in CSS class in Bootstrap framework. The labels are created as in above example:

bootstrap label inline

See online demo and code

The markup:


 

A demo of floating labels in text boxes

In this demo, the pure CSS is used for creating the floating labels in Bootstrap that are associated to the textbox fields. The CSS transition property is used for the labels where linear motion is used to float the labels.

bootstrap label floating

See online demo and code

The custom CSS used in the demo:


 

The markup:


Yoy may change the position by modifying the focus + label in the CSS section. Just change the value of top and adjust as you want.

Get the complete code from the demo page.

This div height required for enabling the sticky sidebar