Open In App

Bootstrap 5 Floating labels Layout

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Floating labels Layout is useful when we are working with the grid system, so we have to place form elements within column classes. 

Floating labels Layout Classes: There are no pre-defined classes, we need to use Bootstrap5 form classes, and place them according to our needs. as we want to display the form to the user. The total layout depends on us, so practice will give us enough idea that how a form should look like.

Syntax:

<div class="form-floating">
  <select class="form-select">
    <option>...</option>
    ....
  </select>
  <label for="floatingSelect">...</label>
</div>

Below are the examples illustrating the Floating labels Layout:

Example 1: In this example, we will create a simple input field that is already filed, one of them will be a drop-down option.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link href=
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
</head>
  
<body class="m-3">
    <h1 class="text-success text-center">
        Geeksforgeeks
    </h1>
    <p class="text-center">
        Floating labels Layout
    </p>
    <!-- Bootstrap5 Floating labels Layout -->
    <div class="form-floating mb-3">
        <input type="text" class="form-control">
        <label for="floatingInput">Name</label>
    </div>
    <div class="form-floating mb-3">
        <input type="email" class="form-control">
        <label for="floatingInput">
            Email address
        </label>
    </div>
    <div class="col-md">
        <div class="form-floating">
            <select class="form-select">
                <option selected>Avatar</option>
                <option value="1">Contributor</option>
                <option value="2">Learner</option>
            </select>
            <label for="floatingSelectGrid">
                Characteristics
            </label>
        </div>
    </div>
</body>
</html>


Output: 

 

Example 2: In this example, we will create a feedback form where Name, Email id, and valuable feedback are placed in a proper form, always remember that placeholder plays an important role when we are using Bootstrap.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link href=
          rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
</head>
  
<body class="m-3">
    <h1 class="text-success text-center">
        Geeksforgeeks
    </h1>
    <p class="text-center">
        Floating labels Layout
    </p>
    <!-- Bootstrap5 Floating labels Layout -->
    <div class="form-floating mb-3">
        <input type="text" 
               class="form-control" 
               placeholder="Jon Doe">
        <label for="floatingInput">
            Name
        </label>
    </div>
    <div class="form-floating mb-3">
        <input type="email" 
               class="form-control" 
               placeholder="sky@geeksforgeeks.org">
        <label for="floatingInput">
            Email address
        </label>
    </div>
  
    <div class="form-floating">
        <textarea class="form-control" 
                  placeholder="Please give us 
                  feedback to improve">
        </textarea>
        <label for="floatingTextarea">
            Feedback
        </label>
    </div>
</body>
</html>


Output:

Bootstrap5 Floating labels Layout

Bootstrap5 Floating labels Layout

Reference: https://getbootstrap.com/docs/5.0/forms/floating-labels/#layout



Last Updated : 23 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads