BootstrapHow-ToBeginner · 3 min read

How to Use Form Label in Bootstrap: Simple Guide

In Bootstrap, use the form-label class on a <label> element to style form labels consistently. Connect the label to an input by matching the label's for attribute with the input's id for better accessibility.

📐

Syntax

The basic syntax for a Bootstrap form label uses the <label> tag with the form-label class. The for attribute should match the id of the related input element.

<label class="form-label" for="inputId">Label Text</label>: The label element styled by Bootstrap.
for="inputId": Links the label to the input with id="inputId".

html

<label for="exampleInput" class="form-label">Example Label</label>
<input type="text" id="exampleInput" class="form-control">

Output

A styled label 'Example Label' above a text input box.

💻

Example

This example shows a simple Bootstrap form group with a label and a text input. The label uses the form-label class and is linked to the input by the for attribute matching the input's id. This ensures the label is clickable and accessible.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Form Label Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-4">
    <form>
      <div class="mb-3">
        <label for="username" class="form-label">Username</label>
        <input type="text" class="form-control" id="username" placeholder="Enter username">
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </div>
</body>
</html>

Output

A form with a blue 'Username' label above a text input box and a blue 'Submit' button below.

⚠️

Common Pitfalls

Common mistakes when using Bootstrap form labels include:

Not using the form-label class, which results in unstyled labels.
Missing the for attribute or mismatching it with the input's id, which breaks accessibility and clicking the label won't focus the input.
Placing the label inside the input element, which is invalid HTML.

html

<!-- Wrong: Missing form-label class and for attribute -->
<label>Username</label>
<input type="text" id="username">

<!-- Right: Using form-label class and matching for/id -->
<label for="username" class="form-label">Username</label>
<input type="text" id="username" class="form-control">

Output

The first label appears plain and is not linked to the input; the second label is styled and clickable, focusing the input.

📊

Quick Reference

Remember these tips when using Bootstrap form labels:

Always add class="form-label" to your <label> tags.
Use the for attribute to link labels to inputs by matching the input's id.
Use Bootstrap's form-control class on inputs for consistent styling.
Labels improve accessibility and user experience by making inputs easier to identify and focus.

✅

Key Takeaways

Use the form-label class on <label> elements for Bootstrap styling.

Match the label's for attribute with the input's id for accessibility and usability.

Always pair labels with inputs to improve form clarity and keyboard navigation.

Avoid missing or mismatched for and id attributes to prevent broken label-input links.

Use Bootstrap's form-control class on inputs for consistent look and feel.