Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

Understanding Bootstrap Labels: A Simple Overview

Introduction to Bootstrap Labels

Bootstrap is a popular front-end framework offering tools and styles for crafting responsive and visually appealing websites.

Bootstrap features an array of components, such as labels and badges, which serve to emphasize and categorize the content.

In this article, we’ll explore the concept of Bootstrap labels to create visually informative elements.

What are Labels in Bootstrap?

In Bootstrap, the term “label” is often informally used to refer to the badge component, which is a small element that displays additional information, usually in the form of a label or tag.

The badge component is used to highlight or categorize content on a web page. It’s often displayed as a small piece of text within a colored background.

Moreover, labels in Bootstrap are often used to provide additional information or to add context and style to elements on a web page in a different format. Therefore, in Bootstrap, the terms “label” and “badge” are often used interchangeably, especially in the context of the badge component.

Bootstrap Labels Appearance Classes

Bootstrap 3.4.1 provides contextual classes for labels, allowing you to control their appearance. The sections below will cover some of the common appearance classes for Bootstrap 3.4.1 labels.

Give Purecode AI a try today to instantly generate thousands of customizable, styled Bootstrap and JavaScript components to accelerate your web development projects.

Default Label

Default labels are typically created using the label class name. This is sometimes called a basic label. A basic label or default label in Bootstrap is created using the <span> or any other element with the class label label-default.

If you want to create one, you can use the following example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Label Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h2>Default Label</h2>
      <span class="label label-default">Default Label</span>
    </div>
  </body>
</html>

The label label-default class name will produce a simple label with default styling provided by Bootstrap. The background color and appearance will be the default style.

The above code will produce the following output:

Primary Label

You can create a primary label using the label component with the label-primary class. Here’s an example below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Label Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h2>Primary Label</h2>
      <span class="label label-primary">Primary Label</span>
    </div>
  </body>
</html>

The above code will produce the following output:

This will produce a label with the default Bootstrap primary color (usually color blue). The label class is the base class for labels and label-primary sets the background color to the primary color defined by Bootstrap.

Success Label

To create a success label in Bootstrap, you can use the label component along with the label-success class.

Here’s an example below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Label Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h2>Success Label</h2>
      <span class="label label-success">Success Label</span>
    </div>
  </body>
</html>

The above code will produce the following output:

In this example, the label class is the base class for creating a badge, and label-success is a contextual class that sets the background color to indicate success which is usually green in Bootstrap’s default styling.

Info Label

To create an info label in Bootstrap, you can use the label component along with the label-info class.

Here’s an example below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Label Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h2>Info Label</h2>
      <span class="label label-info">Info Label</span>
    </div>
  </body>
</html>

The above code will produce the following output:

In the example above, the label class is the base class for creating a label, and label-info is a contextual class that sets the background color to indicate informational content and it is usually light blue in Bootstrap’s default styling.

Warning Label

To create a warning label in Bootstrap, you can use the label component along with the label-warning class. Apply the class to the HTML element containing the text as shown in the code below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Label Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h2>Warning Label</h2>
      <span class="label label-warning">Warning Label</span>
    </div>
  </body>
</html>

The above code will produce the following output:

In this example, the label class is the base class for creating a label, and label-warning is a contextual class that sets the background color to indicate a warning (usually yellow in Bootstrap’s default styling).

Danger Label

To create a danger label in Bootstrap, you can use the label component along with the label-danger class. By applying the class to the HTML element containing the text you will have the following:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Label Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h2>Danger Label</h2>
      <span class="label label-danger">Danger Label</span>
    </div>
  </body>
</html>

The above code will produce the following output:

In the example above, the label class is the base class for creating a label, and label-danger is a contextual class that sets the background color to indicate a potentially dangerous or critical element (usually red in Bootstrap’s default styling).

Adding Badge to Labels in Bootstrap 5

In Bootstrap 5, the label class has been dropped, this section will guide you on how to add badges to labels to provide additional information, counts, or visual indicators.

You can combine the button and badge components for this purpose.

Here’s an example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Label and Badge Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container py-3">
      <h2>Label with a badge</h2>
      <button class="btn btn-primary">
        Credit balance? <span class="badge bg-white text-dark">10</span>
      </button>
    </div>
  </body>
</html>

The above code will produce the following output:

What is a badge class in Bootstrap 5

The badge class is used to create badges, which are small components typically used to highlight, label, or categorize content.

Badges are commonly used to display additional information, such as counts, and statuses, or used to display an indicator in a visually prominent way.

Badges dynamically adjust their size to align with the dimensions of their immediate parent element through the utilization of relative font sizing.

Bootstrap offers a selection of eight distinct background types:

ClassDescription
badge bg-primaryBlue background for important content.
badge bg-secondaryGray background for less important content.
badge bg-successGreen background for indicating success.
badge bg-dangerRed background for indicating danger.
badge bg-warningYellow background for warning messages.
badge bg-infoLight blue background for informational content.
badge bg-lightLight gray background for a subtle look.
badge bg-darkDark background for a strong contrast.

Here’s a basic example of using the badge class:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Label Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container">
      <h2>Default Badge</h2>
      <span class="badge bg-secondary rounded-pill">99</span>
    </div>
  </body>
</html>

The above code will produce the following output:

The above example will create a simple badge with default styling.

However, the badge class is often combined with contextual classes to change the appearance of the badge based on different contexts. For example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Label Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container">
      <span class="badge bg-primary">What is your Name?</span>
      <span class="badge bg-info">My name is Samuel</span>
      <span class="badge bg-success">Excellent Reward</span>
    </div>
  </body>
</html>

The above code will produce the following output:

In the above examples, the badge class is combined with contextual classes (bg-primary, bg-info, bg-success, etc.) to give the badges different background colors based on their meanings or significance.

Bootstrap badges can be customized further using other contextual classes to add custom styles.

Examples of Labels with Badge in Bootstrap 5

Below are examples of how to create labels with badges in Bootstrap 5. These examples illustrate how you can combine the button and badge component to create labels with additional information.

Example 1:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Label and Badge Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container py-3">
      <h2>Label with a badge</h2>
      <button class="btn btn-primary">
        Nike shoe <span class="badge bg-secondary text-white">New</span>
      </button>
    </div>
  </body>
</html>

The above code will produce the following output:

In this example, the button (btn btn-primary) serves as the label, and the badge (badge bg-secondary) adds supplementary information as a badge, such as “New”.

Example 2:

Apply the class to the HTML element containing the text you will have the following :

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Label and Badge Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container py-3">
      <h2>Label with a badge</h2>
      <button class="btn btn-warning">
        Danger ahead
        <span class="badge bg-danger text-white">High Priority</span>
      </button>
    </div>
  </body>
</html>

The above code will produce the following output:

Here, the button is a warning label, and the badge indicates high priority with a potentially dangerous context.

Example 3:

Apply the class to the HTML element containing the text you will have the following :

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Label and Badge Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container py-3">
      <h2>Label with a badge</h2>
      <button class="btn btn-info">
        Education is light
        <span class="badge bg-dark text-white">Featured</span>
      </button>
    </div>
  </body>
</html>

The output of the above is:

In this case, the button label denotes the content type (“Education is light”), while the badge signifies that the post is featured.

What are Form Floating Labels – Form Control

Form floating labels are a design pattern used in web development to enhance the user experience in form input fields. In a typical form, users see labels placed above or beside input fields to indicate the purpose of each field.

With form floating labels, the label appears inside the input field when empty and floats to the top when the user starts typing or when the input field has content.

Here’s how the form floating label pattern typically works:

  1. Initial State: When the form loads, the labels are positioned inside the input fields as placeholders.

  2. User Interaction: When a user clicks on an input field or starts typing, the label smoothly transitions to a floating position above the input field.

  3. Filled State: If the user enters information into the field, the label remains in the floating position.

This design pattern has several benefits:

PointBenefit
Space EfficiencyPlacing the label inside the input field saves space on the form and creates a cleaner, more modern appearance.
ClarityUsers can see the label while typing, providing context for the information they are entering.
Reduced Visual NoiseThe form looks cleaner without having labels permanently visible next to the input fields.

How to Create an Input Floating Label

Creating an input field with a floating label involves enclosing a set of input and label elements within a .form-floating class container to activate Bootstrap’s floating labels for textual form fields.

PS: Ensure that the input element includes a placeholder, as the Bootstrap floating labels rely on the placeholder pseudo-element.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap floating label</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
  </head>
  <body class="w-70 mx-auto p-5">
    <form>
      <div class="form-floating">
        <input
          type="email"
          class="form-control"
          placeholder="name@example.com"
        />
        <label for="email">Email address</label>
      </div>
    </form>
  </body>
</html>

The above code will produce the following output:

How to Create a Textarea Floating Label

Creating a textarea with a floating label is similar to creating an input field with a floating label. The key difference is the use of a <textarea> tag instead of an <input> tag.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap floating label</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
  </head>
  <body class="w-70 mx-auto p-5">
    <div class="form-floating mb-3">
      <h2>An Example of Floating Label- Textarea</h2>
      <p>Clicking the inside textarea will reveal the floating label effect:</p>
      <form>
        <div class="form-floating my-3">
          <textarea
            class="form-control"
            id="comment"
            name="text"
            placeholder="Comment goes here"
          ></textarea>
          <label for="comment">Comments</label>
        </div>
        <button type="submit_the_form" class="btn btn-primary">
          Submit the form
        </button>
      </form>
    </div>
  </body>
</html>

The output is:

How to Create a Select Floating Label

Creating a select (drop-down) with a floating label involves a similar approach to input fields and text areas.

Applying a floating label to the select component ensures that the label is consistently displayed in the floating state, regardless of the select’s state.

It’s important to note that floating labels do not function with the size and multiple variations of the select element. Nevertheless, they are compatible with a disabled select element.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap floating label</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
  </head>
  <body class="w-70 mx-auto p-5">
    <div class="form-floating mb-3">
      <h2>An Example of Floating Label-Select</h2>
      <p>Using the floating-labels on select menus.</p>
      <form>
        <div class="form-floating my-3">
          <select class="form-select" id="sel1" name="sellist">
            <option value="primary">Primary</option>
            <option value="secondary">Secondary</option>
            <option value="tertiary">Tertiary</option>
          </select>
          <label for="sel1" class="form-label">Select list (select one):</label>
        </div>
        <button class="btn btn-primary">Submit the form</button>
      </form>
    </div>
  </body>
</html>

The output is:

Best Practices for Using Bootstrap Labels

Floating labels in Bootstrap 5 are typically used in conjunction with form controls to provide additional context or information. Here are some best practices for using Bootstrap 5 labels:

  1. Use Semantic HTML: Always use semantic HTML tags like <label> for labels. Bootstrap is designed to work well with semantic HTML, and it enhances accessibility and helps with styling.

    <label for="exampleFormControlInput1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
  2. Associate Labels with Form Controls: Use the for attribute in the <label> element to associate it with a specific form control using the id attribute. This improves accessibility and allows users to click on the label to focus on the associated input.

    <label for="exampleFormControlInput1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
  3. Use Bootstrap Classes for Styling: Bootstrap provides styling classes for labels. Use the .form-label class to apply Bootstrap’s default label styling.

    <label for="exampleFormControlInput1" class="form-label">Email address</label>
  4. Horizontal Form Layout: To create horizontal forms, you can use the .col-form-label class to create a responsive layout where labels and controls are on the same line.

    <div class="row mb-3">
      <label for="exampleFormControlInput1" class="col-sm-2 col-form-label">Email address</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
      </div>
    </div>
  5. Accessibility: Ensure that your labels are descriptive and provide meaningful information to assistive technologies. This is crucial for making your forms accessible to users with disabilities.

You can watch the video tutorials below for more context on Bootstrap labels.

Wrapping Up Bootstrap Labels

In conclusion, Bootstrap labels, often referred to as badges, are versatile elements used to categorize and highlight content on a webpage. They come in various types, each with its contextual class for different situations.

Bootstrap 5 has transitioned from the “label” class to the “badge” class, allowing for an even more dynamic presentation of content.

Furthermore, Bootstrap 5 introduces the concept of form floating labels, enhancing the user experience in form fields.

Ensuring best practices such as using semantic HTML, associating labels with form controls, and considering accessibility can help you make the most out of these features.

Check out Purecode AI!

I recommend you try out Purecode AI, an AI tool that can generate custom HTML, CSS, and JavaScript components. Here are some of its features:

  • It uses an AI assistant to generate thousands of responsive pre-made components for you.

  • The components come with default styling using CSS, Tailwind CSS, or your own custom styles so you can match your brand’s design.

  • You can easily customize the generated components to suit your specific needs – change colors, spacing, paddings, margins, etc.

  • It generates both the HTML markup and CSS styles for the components, saving you development time.

  • It also includes some JavaScript functionality within the components to make them interactive.

Ayodele Samuel Adebayo

Ayodele Samuel Adebayo