4 Demos of Bootstrap 4 Labels in Forms, Floating and More

The labels in Bootstrap 4 can be referred to 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 examples of simple labels that are displayed inline or above in the form elements. I will also show you 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:

<div class="container">

<h3>Demo of labels in form</h3>

<form>



  <div class="form-group">

    <label for="label-name1">Enter Full Name:</label>

    <input type="text" class="form-control" id="label-name" aria-describedby="nameHelp" >

   

  </div>

  <div class="form-group">

    <label for="label-email">Enter email:</label>

    <input type="email" class="form-control" id="label-email" aria-describedby="emailHelp">

   

  </div>

  <div class="form-group">

    <label for="label-password">Enter Password:</label>

    <input type="password" class="form-control" id="label-password" aria-describedby="passHelp">

    <small id="passHelp" class="form-text text-muted">Must be 8 characters long</small>

  </div>

  <div class="form-check">

    <input type="checkbox" class="form-check-input" id="CheckDemo">

    <label class="form-check-label" for="CheckDemo">Agree with Terms & Conditions?</label>

  </div>

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

</form>

</div>

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:

The markup:

<div class="container">

<h4>A demo of horizontal form</h4>

<form>

  <div class="form-group row">

    <label for="label-name" class="col-sm-4 col-form-label">Enter your name</label>

    <div class="col-sm-8">

      <input type="text" class="form-control" id="label-name">

    </div>

  </div>

  <div class="form-group row">

    <label for="label-email" class="col-sm-4 col-form-label">Email Address</label>

    <div class="col-sm-8">

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

    </div>

  </div>

  <div class="form-group row">

    <label for="label-pass" class="col-sm-4 col-form-label">Enter Password</label>

    <div class="col-sm-8">

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

    </div>

  </div>

  <fieldset class="form-group">

    <div class="row">

      <legend class="col-form-label col-sm-4 pt-0">Your option</legend>

      <div class="col-sm-8">

        <div class="form-check">

          <input class="form-check-input" type="radio" name="gridRadios" id="label-rad-1" value="option1" checked>

          <label class="form-check-label" for="label-rad-1">

            Yes

          </label>

        </div>

        <div class="form-check">

          <input class="form-check-input" type="radio" name="gridRadios" id="label-rad-2" value="option2">

          <label class="form-check-label" for="label-rad-2">

            No

          </label>

        </div>

        <div class="form-check disabled">

          <input class="form-check-input" type="radio" name="gridRadios" id="label-rad-3" value="option3" disabled>

          <label class="form-check-label" for="label-rad-3">

            I Don't Know

          </label>

        </div>

      </div>

    </div>

  </fieldset>

  <div class="form-group row">

    <div class="col-sm-4">Do you Agree?</div>

    <div class="col-sm-8">

      <div class="form-check">

        <input class="form-check-input" type="checkbox" id="label-check">

        <label class="form-check-label" for="label-check">

          Agree with Term and Conditions?

        </label>

      </div>

    </div>

  </div>

  <div class="form-group row">

    <div class="col-sm-12">

      <button type="submit" class="btn btn-success btn-block">Save info</button>

    </div>

  </div>

</form>

</div>

You can see that 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 smartphones (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.

Complete code

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<style>
:root {
  --input-padding-x: .75rem;
  --input-padding-y: .75rem;
}

html,
body {
  height: 100%;
}

body {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}

.form-signup {
  width: 100%;
  max-width: 420px;
  padding: 15px;
  margin: 0 auto;
}

.form-label-group {
  position: relative;
  margin-bottom: 1rem;
}

.form-label-group > input,
.form-label-group > label {
  padding: var(--input-padding-y) var(--input-padding-x);
}

.form-label-group > label {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  margin-bottom: 0; /* Override default `<label>` margin */
  line-height: 1.5;
  color: #495057;
  border: 1px solid transparent;
  border-radius: .25rem;
  transition: all .1s ease-in-out;
}

.form-label-group input::-webkit-input-placeholder {
  color: transparent;
}

.form-label-group input:-ms-input-placeholder {
  color: transparent;
}

.form-label-group input::-ms-input-placeholder {
  color: transparent;
}

.form-label-group input::-moz-placeholder {
  color: transparent;
}

.form-label-group input::placeholder {
  color: transparent;
}

.form-label-group input:not(:placeholder-shown) {
  padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
  padding-bottom: calc(var(--input-padding-y) / 3);
}

.form-label-group input:not(:placeholder-shown) ~ label {
  padding-top: calc(var(--input-padding-y) / 3);
  padding-bottom: calc(var(--input-padding-y) / 3);
  font-size: 12px;
  color: #777;
}
</style>
</head>
<body>
<div class="container">
    <form class="form-signup">
      <div class="text-center mb-4">
        <h1 class="h3 mb-3 font-weight-normal">The floating label template</h1>
      </div>

      <div class="form-label-group">
        <input type="text" class="form-control" id="label-name" placeholder="Enter your name" required autofocus>
        <label for="label-name">Your name</label>
      </div>

      <div class="form-label-group">
        <input type="email" id="label-email" class="form-control" placeholder="Your Email" required autofocus>
        <label for="label-email">Your Email</label>
      </div>

      <div class="form-label-group">
        <input type="password" id="label-password" class="form-control" placeholder="Password" required>
        <label for="label-password">Password</label>
      </div>

      <div class="checkbox mb-3">
        <label>
          <input type="checkbox" value="remember-me"> Remember me
        </label>
      </div>
      <button class="btn btn-lg btn-success btn-block" type="submit">Sign Up</button>
    </form>
</div>
</body>
</html>

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:

Online demo and code

Grab the complete code from the demo page.

Creating Bootstrap 4 labels in forms

Creating labels in Bootstrap 4 form controls

See online demo and code

The example of inline labels

Creating floating label template

Floating labels example 2 – with borderline

Online demo and code

Author - Abu Hassam

Creating labels in Bootstrap 4 form controls

See online demo and code

The example of inline labels

Creating floating label template

Floating labels example 2 – with borderline

Online demo and code

Related Tutorials:

Author - Abu Hassam