My Blog

Floating Labels

Written by

saqibkhan

in

This chapter will discuss about Bootstrap floating labels. Floating labels refer to form labels that float over the input fields.

Basic example

  • To allow floating labels with Bootstrap’s textual form fields, include a pair of <input class=”form-control”> and <label> elements in .form-floating.
  • Each <input> must have a placeholder since the technique for CSS-only floating labels employs the :placeholder-shown pseudo-element. The <input> needs to be placed first to make use of a sibling selector like (~).
https://www.tutorialspoint.com/bootstrap/examples/floating_labels_basic_example.php

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Floating Labels</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="form-floating mb-3 mt-2"><input type="text" class="form-control" id="floatingUsername" placeholder="[email protected]"><label for="floatingUsername">Username</label></div><div class="form-floating"><input type="password" class="form-control" id="floatingPassword" placeholder="Password"><label for="floatingPassword">Password</label></div></body></html>

When a value is already assigned, <label> elements will automatically align their position to float over the input field.https://www.tutorialspoint.com/bootstrap/examples/floating_labels_floated_location.php

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Floating Labels</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><form class="form-floating mt-2"><input type="email" class="form-control" id="floatingInputValue" placeholder="[email protected]" value="[email protected]"><label for="floatingInputValue">Username</label></form></body></html>

By using form validation styles like is-invalid, you can provide visual feedback to users when they submit incorrect data.https://www.tutorialspoint.com/bootstrap/examples/floating_labels_floated_location.php

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Floating Labels</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><form class="form-floating"><input type="text" class="form-control is-invalid" id="floatingInvalidInput" placeholder="Password" value="Password"><label for="floatingInvalidInput">Invalid Password</label></form></body></html>

Textareas

The height of <textarea> with the class .form-control is automatically set to have the same height as <input>.https://www.tutorialspoint.com/bootstrap/examples/floating_labels_textareas.php

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Floating Labels</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="form-floating"><textarea class="form-control" placeholder="Text Here" id="floatingTextarea"></textarea><label for="floatingTextarea">Text Here</label></div></body></html>

Don’t use the rows attribute if you want to customize the height of your <textarea>. Instead, specify a height explicitly (either inline or using customized CSS). In the below example we have used inline styling.https://www.tutorialspoint.com/bootstrap/examples/floating_labels_customize_textareas.php

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Floating Labels</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="form-floating"><textarea class="form-control" placeholder="Add a comment" id="floatingTextarea" style="height: 100px"></textarea><label for="floatingTextarea">Add a comment</label></div></body></html>

Selects

  • Floating labels are only accessible on .form-selects, in addition to .form-control.
  • The same concepts apply to them, except unlike <input>s, they always display the <label> in its floated state. Size-based and multiple selects are not supported.
https://www.tutorialspoint.com/bootstrap/examples/floating_labels_selects.php

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Floating Labels</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="form-floating"><select class="form-select" id="floatingSelect" aria-label="Floating label select menu"><option selected>Language</option><option value="1">English</option><option value="2">Hindi</option><option value="3">Marathi</option></select><label for="floatingSelect">Others</label></div></body></html>

Disabled

Add the disabled boolean attribute on an input. This gives grayed-out appearance to an input, textarea, or select. It also removes pointer events, and prevents focusing.https://www.tutorialspoint.com/bootstrap/examples/floating_labels_disabled.php

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Floating Labels</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="form-floating mb-3"><input type="email" class="form-control" id="floatingInputDisabled" placeholder="name" disabled><label for="floatingInputDisabled">Name</label></div><div class="form-floating mb-3"><textarea class="form-control" placeholder="[email protected]" id="floatingEmailDisabled" disabled></textarea><label for="floatingEmailDisabled">Email Id</label></div><div class="form-floating mb-3"><textarea class="form-control" placeholder="Add a comment" id="floatingTextareaDisabled" style="height: 120px" disabled></textarea><label for="floatingTextareaDisabled">Add a comment</label></div><div class="form-floating"><select class="form-select" id="floatingSelectDisabled" aria-label="Floating label disabled select example" disabled><option selected>Select Language</option><option value="1">English</option><option value="2">Hindi</option><option value="3">Marathi</option></select><label for="floatingSelectDisabled">Others</label></div></body></html>

Readonly plaintext

When switching from an editable <input> to a plaintext value without changing the page layout, .form-control-plaintext can be useful.https://www.tutorialspoint.com/bootstrap/examples/floating_labels_readonly_plaintext.php

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Floating Labels</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="form-floating mb-3 mt-2"><input type="text" readonly class="form-control" id="floatingEmptyPlaintextInput" style="height: 80px" placeholder="Block the comment" value="Block the comment"><label for="floatingEmptyPlaintextInput">Block the comment</label></div><div class="form-floating mb-3"><input type="text" readonly class="form-control" id="floatingPlaintextInput" style="height: 80px" placeholder="Add a comment" value="Add a comment"><label for="floatingPlaintextInput">Add a comment</label></div></body></html>

Input groups

Similarly, floating labels support .input-group.https://www.tutorialspoint.com/bootstrap/examples/floating_labels_input_groups.php

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Floating Labels</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="input-group mb-3"><div class="form-floating"><input type="email" class="form-control" id="floatingInputGroup" placeholder="email"><label for="floatingInputGroup">Email Id</label></div><span class="input-group-text">[email protected]</span></div></body></html>

The -feedback (it is a validation class to provide valuable feedback to users before submitting the form.) should be positioned outside of the .form-floating but inside of the .input-group when using .input-group and .form-floating along with form validation.https://www.tutorialspoint.com/bootstrap/examples/floating_labels_has_validation.php

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Floating Labels</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="input-group has-validation"><div class="form-floating is-invalid"><input type="text" class="form-control is-invalid" id="floatingInputGroup" placeholder="Password" required><label for="floatingInputGroup">Password</label></div><div class="invalid-feedback">

            Wrong Password
        &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>




Layout





    

  • When using a grid system, the implementation of floating labels layout becomes beneficial as it enables the placement of form elements within column classes.
    • 




  • There is no pre-defined classes in bootstrap, so we must utilize form classes and position them according to our requirement.
    • 







https://www.tutorialspoint.com/bootstrap/examples/floating_labels_layout.php






Example





You can edit and try running this code using Edit & Run option.





<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Floating Labels</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="row g-2"><div class="col-md"><div class="form-floating"><input type="email" class="form-control" id="floatingGrid" placeholder="[email protected]" value="[email protected]"><label for="floatingGrid">Email Id</label></div></div><div class="col-md"><div class="form-floating"><select class="form-select" id="floatingSelectGrid"><option selected>Language</option><option value="1">English</option><option value="2">Hindi</option><option value="3">Marathi</option></select><label for="floatingSelectGrid">Others</label></div></div></div></html>

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

More posts