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.

While using the Bootstrap framework, the labels are styled automatically which you may customize as well.

See the following section for learning how to create simple and floating labels while 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

The markup:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
   
</head>

<body>
<div class="container">
<h1>Bootstrap labels demo</h1>
<form>
  <div class="form-group">
    <label for="Name-label">Name</label>
    <input type="name" class="form-control" id="Name-label" placeholder="Name">
  </div>
  <div class="form-group">
    <label for="Email1-label">Email</label>
    <input type="email" class="form-control" id="Email1-label" placeholder="Email">
  </div>  
  <div class="form-group">
    <label for="Inputselect-label">Select Number</label>
    <select class="form-control" >
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select>
  </div>  
  <div class="checkbox">
    <label>
      <input type="checkbox" id="yesno"> Yes / No
    </label>
  </div>

  <button type="submit" class="btn btn-info">Save</button>
</form>
</div>
</body>
</html>

A demo of creating inline labels

In the 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

The markup:

<form class="form-inline">

  <div class="form-group">

    <label for="Name-label">Your Name</label>

    <input type="text" class="form-control" id="Name-label" placeholder="Enter Name here">

  </div>

  <div class="form-group">

    <label for="Email-label">Email</label>

    <input type="email" class="form-control" id="Email-label" placeholder="Email here">

  </div>

  <button type="submit" class="btn btn-success">Submit</button>

</form>

A demo of floating labels in text boxes

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

bootstrap label floating

The custom CSS used in the demo:

fieldset.form-group {

  position: relative;

}

 

label {

  position: absolute;

  top: .6rem;

  left: 1rem;

  transition: all .4s linear;

}

 

:focus + label {

  color: #800040;

  top: -15px;

  background: #F2F2F2;

}

The markup:

<form class="form-group">

  <fieldset class="form-group">

    <input type="email" class="form-control" id="email-label" placeholder="">

    <label for="email-label">Your Email</label>

    <small class="text-muted">A little description about the field</small>

  </fieldset>

  <fieldset class="form-group">

    <input type="password" class="form-control" id="pass-label" placeholder="">

    <label for="pass-label">Enter Password</label>

  </fieldset>

 

  <button type="submit" class="btn btn-success">Proceed</button>

</form>

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

Get the complete code from the demo page.

Author - Abu Hassam

Abu Hassam is an experienced web developer. He graduated in Computer Science in 2000. Started as a software engineer and worked mostly on web-based projects.
Just like any great adventure, web development is about discovery and learning.
The web is a vast playground, and the best adventures are yet to come. Happy coding and exploring! 🌍⌨️