Bootstrap 5 Floating labels Selects Last Updated : 31 Jul, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report The Bootstrap 5 Floating labels Component Selects is used to give a floating label to input fields. It also works with the HTML 5 <select> component. When we apply a floating label to the select component the label will always be shown in the floating state irrespective of the state of the select. The floating labels do not work with the size and multiple variations of the select element. However, they support the disabled select element.Bootstrap 5 Floating labels Component Selects classes:form-select: This class is used to trigger the select option styles of Bootstrap 5.Bootstrap 5 Floating labels Component Selects attributes:selected: This attribute is used to select an option from the select menu by default.for='floatingSelect': This attribute is used to show a floating label to the select. This attribute works only with the selects.Syntax:<div class="form-floating"> <select id="gfg" class="form-select"> ... </select> <label for="gfg">Floating label</label></div>Example 1: This is a basic example showing a floating label for the select element. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Enhanced Company Selector</title> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <style> body { background-color: #f8f9fa; } .container { max-width: 500px; margin-top: 50px; } .form-floating { margin-top: 20px; } </style> </head> <body> <div class="container"> <h1 class="text-primary mb-4">GeeksforGeeks</h1> <h2 class="text-secondary mb-4">Bootstrap 5 Floating Labels Select</h2> <div class="form-floating"> <select id="companySelect" class="form-select"> <option value="" selected disabled>Choose a company</option> <option value="google">Google</option> <option value="apple">Apple</option> <option value="microsoft">Microsoft</option> <option value="meta">Meta</option> <option value="netflix">Netflix</option> </select> <label for="companySelect">Select a Company</label> </div> <div id="companyInfo" class="mt-4 p-3 bg-light rounded d-none"> <h3 id="companyName" class="text-info"></h3> <p id="companyDescription"></p> </div> </div> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <script> const companySelect = document.getElementById('companySelect'); const companyInfo = document.getElementById('companyInfo'); const companyName = document.getElementById('companyName'); const companyDescription = document.getElementById('companyDescription'); const companyData = { google: "Google is a multinational technology company specializing in internet-related services and products.", apple: "Apple is a technology company known for its consumer electronics, software, and online services.", microsoft: "Microsoft is a multinational technology corporation producing computer software, consumer electronics, and related services.", meta: "Meta, formerly Facebook, is a technology company focused on social networking services and products.", netflix: "Netflix is a streaming service offering a wide variety of award-winning TV shows, movies, anime, documentaries, and more." }; companySelect.addEventListener('change', function () { const selectedCompany = this.value; if (selectedCompany) { companyName.textContent = selectedCompany.charAt(0).toUpperCase() + selectedCompany.slice(1); companyDescription.textContent = companyData[selectedCompany]; companyInfo.classList.remove('d-none'); } else { companyInfo.classList.add('d-none'); } }); </script> </body> </html> Output:Example 2: In this example, the floating label is shown for the disabled select element. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Enhanced Floating Label Select</title> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <style> body { background-color: #f8f9fa; } .container { max-width: 500px; margin-top: 50px; } .form-floating { margin-bottom: 20px; } </style> </head> <body> <div class="container"> <h1 class="text-primary mb-4">GeeksforGeeks</h1> <h2 class="text-secondary mb-4">Bootstrap 5 Floating Labels Select</h2> <div class="card shadow-sm"> <div class="card-body"> <h3 class="card-title text-info mb-4"> Floating label with Disabled Select Element </h3> <div class="form-floating"> <select id="carSelect" class="form-select" aria-label="Select a car" disabled> <option value="" selected disabled>Select a Car</option> <option value="dezire">Dezire</option> <option value="ertiga">Ertiga</option> <option value="scorpio">Scorpio</option> <option value="brezza">Brezza</option> </select> <label for="carSelect">Choose your car</label> </div> <button id="toggleButton" class="btn btn-primary"> Enable Selection </button> </div> </div> </div> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script> <script> document.getElementById('toggleButton').addEventListener('click', function() { let select = document.getElementById('carSelect'); select.disabled = !select.disabled; this.textContent = select.disabled ? 'Enable Selection' : 'Disable Selection'; }); </script> </body> </html> Output:Reference: https://getbootstrap.com/docs/5.2/forms/floating-labels/#selects Comment More infoAdvertise with us Next Article Bootstrap 5 Validation Browser defaults B badalmishra28 Follow Improve Article Tags : Technical Scripter Web Technologies Bootstrap Technical Scripter 2022 Bootstrap-5 +1 More Similar Reads FormsBootstrap 5 Overview Form textBootstrap 5 Overview Form Text sits below the form input elements to guide the user on how to fill in the input. Form text can be added to input by using a container(a <div> or a <span>) having the class form-text with the text inside it. If we use a block element for the text the top ma 2 min read Bootstrap 5 Overview Disabled formsIn Bootstrap, you can easily disable input in a form and stop it from interacting by using the disabled attribute. This is mainly used in forms where some fields are not available for all users to fill in. Although buttons are visibly disabled with this attribute you need to add the tabindex="-1" to 2 min read Form controlsBootstrap 5 Form Controls SizingBootstrap 5 Form controls Sizing gives textual form controls on <input>, <select>, and <textarea> elements with custom styles, sizing, focus states, and more.Bootstrap 5 Form Controls Sizing Classes:form-control-sm: This class is used to make the size of the form control small.form 2 min read Bootstrap 5 Form Controls DisabledBootstrap5 Form controls Disabled are used to create a disabled input field. To create a disabled input field, we will use the disabled boolean attribute on an input to disable the input field. It will remove any pointer event from the field. Form controls Disabled Class: There are no pre-defined cl 2 min read Bootstrap 5 Form Controls ReadonlyBootstrap 5 Form Controls Readonly is used to create a read-only input field. To create a read-only input field, we will use readonly attribute on an input to prevent modification of the input’s value. It is useful when we want to have a fixed value for the input. Bootstrap 5 Form controls Readonly 2 min read Bootstrap 5 Form controls Readonly plain textBootstrap 5 Form Controls Readonly plain text is used to create a readonly input field as a plaintext. To create a plain text input field, we will use .form-control-plaintext class. This class removes the styling and preserves the correct margin and padding. Form Control Readonly Attribute: readonly 2 min read Bootstrap 5 Form Controls File InputBootstrap5 Form controls File input provides customized ways to take the input of the files, i.e., the file input can accept as default, or can accept multiple files at once, or can be disabled the file input. This can also be done for any file input size, which varies from small size to large. This 2 min read Bootstrap 5 Form controls ColorBootstrap 5 is the newest version of Bootstrap, which is the most popular HTML, CSS, and JavaScript framework for creating responsive, mobile-first websites. It was officially released on 16 June 2020 after several months of redefining its features. Bootstrap 5 Form Control Color is used to set the 2 min read Bootstrap 5 Form controls DatalistsBootstrap 5 is the newest version of Bootstrap, which is the most popular HTML, CSS, and JavaScript framework for creating responsive, mobile-first websites. It was officially released on 16 June 2020 after several months of redefining its features. Bootstrap 5 Form controls datalists are used to cr 2 min read Bootstrap5 Form controls SASSBootstrap 5 Form controls can be used to change the default values provided for the Form controls by customizing scss file of bootstrap 5. SASS variables of Form controls: $input-color: This variable provides the cursor color and the font color of the text typed into the input fields. By default, it 7 min read Form SelectBootstrap 5 Select DefaultBootstrap 5 Select Default stylizes dropdown menus, enhancing user experience. However, limitations exist in modifying option styles due to browser constraints, despite offering various customization options for select elements. Bootstrap 5 Select Default Class: form-select: This class is used to tr 2 min read Bootstrap 5 Select DisabledBootstrap 5 Select is a great component that helps us to add options that can be used inside a form as a field. Disabling a select menu just required the disabled attribute to be added to the select tag. Bootstrap 5 Select Disabled Attributes:disabled: This attribute when added to the select tag, th 2 min read Bootstrap 5 Select SASSBootstrap 5 Select SASS can be used to change the default values provided for the select menus by customizing scss file.SASS variables of Select:$form-select-padding-y: This variable provides the top and bottom padding of the form select. By default, it is 0.375rem.$form-select-padding-x: This varia 7 min read Form Checks and radiosBootstrap 5 Checks and radios ChecksBootstrap 5 Checks box is a square box that is ticked when it is activated. It allows the user to select one or more options among all the limited choices. The checkbox check is used to tick (select) the checkbox item. The check has two options that are given below: Indeterminate: The checkboxes can 3 min read Bootstrap 5 Checks and Radios DisabledBootstrap 5 Checks and radios Disabled is used to make a checkbox/radio disabled, which means we won't be able to click on it. Its appearance will also get muted. Add the disabled attribute and the associated <label>s are automatically styled with a lighter color to indicate its disabled state 2 min read Bootstrap 5 Checks and radios SwitchesBootstrap5 Checks and radios Switches are used to transform the Checks and Radio Inputs into switches. They are transformed as .form-switch is added to the HTML div containing the input and the label. The prime difference between the checkbox and radio switch is the role attribute which is set to ra 3 min read Bootstrap 5 Checks and radios Default (stacked)behaviorBootstrap 5 Checks and radios Default (stacked) is used to create a stack of checks and radios as a list. To create a stack we need to put the checks and radios normally one by one that will create stacks it's the default behaviour of Bootstrap 5 Checks and radios. Bootstrap 5 Checks and rad 2 min read Bootstrap 5 Checks and radios InlineBootstrap 5 Checks and radios Inline can be used to align the checkbox or radio horizontally in the same line. Bootstrap 5 Checks and radios Inline Class: form-check-inline: This class makes all the checkboxes or radios inline or beside each other which are inside the div having this class. Syntax: 2 min read Bootstrap 5 Checks and Radios Without LabelsBootstrap 5 Checks and radios are a way to take boolean type values easily. Generally, they have a label that shows what value it is taking mainly for user experience and some assistive technologies to work correctly. The label can be removed too for the switch as well as the radio inputs. Checks an 2 min read Bootstrap 5 Buttons Toggle statesBootstrap 5 Buttons Toggle states are used to change the button states. A button has three toggle states, they are passive, active, and disabled. We can add the button to the data-bs-toggle attribute to the button to toggle a button’s active state. For the passive state, we can just use the syntax b 2 min read Bootstrap 5 Checks and radios Checkbox Toggle buttonsBootstrap 5 Checks and radios Checkbox Toggle buttons are a way of visualizing the checkboxes as buttons and primarily the .form-check is changed to .btn-check and the .form-check-label is changed to buttons classes. There are three toggle states, the first is checked followed by unchecked and disab 2 min read Bootstrap 5 Checks and radios Radio Toggle ButtonsBootstrap 5 Checks and Radios Radio Toggle Buttons use buttons instead of round-shaped radio buttons. This can be achieved by removing the form-check-label class from the label element of the radio and adding the btn class to it. Variations of buttons like outlined styles can also be used instead of 2 min read Bootstrap 5 Checks and Radios Outlined StylesBootstrap 5 provides us with utility Checks and radios with outlined styles for different looks, designs,s and background colors. Checks and radios Outlined styles Classes: No special classes are used in Outlined styles. You can customize the component using Button Outline. Different variants of .bt 2 min read Form RangeBootstrap 5 Range Min and MaxBootstrap5 Range Min and Max attributes are used for altering the minimum and maximum values of the range. By default, the minimum value of the range is 0 and the maximum value is 100. There is no specific class used for Range Min and Max. Although, we can set the values for min and max by specifyin 2 min read Bootstrap 5 Range StepsBootstrap5 Range Step is the factor by which the value of the range input will increment or decrement in one step. The default value of the step is 1 and can be altered by setting the step attribute of the range to the desired value. There is no specific class used for the Range Steps. Although, the 2 min read Bootstrap 5 Range SASSBootstrap 5 Range SASS has a set of variables with default values that can be changed to customize the container. We can customize the range component by changing the default value of the variables. Bootstrap 5 Range SASS variables : $form-range-track-width: It is the width of the range tracking. 4 min read Form Input groupBootstrap 5 Input group SizingBootstrap 5 Input group Sizing is used to extend the default form controls by adding text or buttons on either side of textual inputs, custom file selectors, or custom inputs. In this article, we will learn about Input group sizing. Input Group sizing helps us to create input groups of small, large, 2 min read Bootstrap 5 Input group Checkboxes and RadiosBootstrap 5 Input group Checkboxes and radios are used to pace the radios and checkboxes within an input group’s addon instead of text.Bootstrap 5 Input group Checkboxes and Radios Classes: There are no specific classes to add checkboxes and radios. To create the checkboxes and radios we use the for 3 min read Bootstrap 5 Input Group Multiple InputsBootstrap 5 Input Group Multiple Inputs help to take multiple inputs in an input group. Multiple inputs in an input group do not support validations. Bootstrap 5 Input Group Multiple Inputs used Classes: There are no specific classes to create multiple inputs in input group. For creating the input g 2 min read Bootstrap 5 Input group Multiple addonsBootstrap 5 Input group Multiple addons help to add multiple items in an input group which may include text, button, input, checkbox, radio, etc. Bootstrap 5 Input group Multiple addons Classes input-group: This class is used to create an input groupinput-group-text: This class is used to add text t 2 min read Bootstrap 5 Input Group Button AddonsBootstrap 5 Input Groups are used to extend form controls by adding the buttons, text, or button groups before or after the text inputs, custom selects, or file inputs. Input Group Button Addons are used to extend form controls by adding buttons or button groups.Bootstrap 5 Input group Button Addons 2 min read Bootstrap 5 Input group Buttons with dropdownsBootstrap 5 Input group Buttons with dropdowns is used to display a button along with an input group. On Clicking this button, it gives a dropdown menu. Input group Buttons with dropdowns Classes: No special classes are used in Input group Buttons with dropdowns. You can customize the component usin 2 min read Bootstrap 5 Input group Segmented ButtonsBootstrap 5 Input group Segmented buttons used to segment dropdowns in input groups, use the same general style as the dropdown button.Bootstrap 5 Input group Segmented buttons used classes: There is no specific class used to group Segmented buttons. To create a button, we use the .btn class, and to 2 min read Bootstrap 5 Input group Custom formsBootstrap 5 Input group Custom forms are extended form controls, used to collect specific information from visitors on your website. Custom form limits are placed on the number of unique forms you have created. There are two types of custom forms as follows:Custom select: The custom select menu is a 2 min read Bootstrap 5 Input group Custom SelectBootstrap 5 Input Groups are used to extend form controls by adding the buttons, text, or button groups before or after the text inputs, custom selects, or file inputs.Bootstrap 5 Input group Custom select Classes: There is no specific class used to input group custom select. We use combinations of 2 min read Bootstrap 5 Input group Custom file inputBootstrap 5 Input Groups are used to extend form controls by adding the buttons, text, or button groups before or after the text inputs, custom selects, or file inputs.Bootstrap 5 Input group Custom file input ClassesThere is no specific class used to Input group Custom file input. To create a butto 2 min read Bootstrap 5 Input group SassBootstrap 5 Input group SASS has a set of variables with default values that can be changed to customize the Input groups. SASS variables for Input group: $input-group-addon-padding-y: This variable is used for padding in the y-axis$input-group-addon-padding-x: This variable is used for padding in t 3 min read Form Floating labelsBootstrap 5 Floating labels SelectsThe Bootstrap 5 Floating labels Component Selects is used to give a floating label to input fields. It also works with the HTML 5 <select> component. When we apply a floating label to the select component the label will always be shown in the floating state irrespective of the state of the sel 3 min read Bootstrap 5 Floating labels LayoutBootstrap 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 2 min read Bootstrap 5 Floating labels SASSBootstrap 5 Floating labels can be used to change the default values provided for the floating label by customizing scss file of bootstrap5.SASS variables of Floating Labels:$form-floating-height: This variable provides the height of the floating label. By default, it is 3.5rem.$form-floating-paddin 5 min read Form ValidationBootstrap 5 Validation Browser defaultsBootstrap5 Validation Browser defaults provide feedback by browser default behaviors. It mainly uses browser default when we do not want to provide validation feedback messages or are not interested in writing javascript code for validation then we can use browser defaults. Browser default validatio 2 min read Bootstrap 5 Validation Server sideBootstrap 5 Validation Server side provides valuable, actionable feedback to your users by browser default behaviors or custom styles and JavaScript. If you are using server-side validation, you can indicate invalid and valid form fields with .is-invalid and .is-valid and add .invalid-feedback & .va 3 min read Bootstrap 5 Validation Supported ElementsBootstrap 5 Validation is supported by various elements present in the form and you can use it to make sure the user knows about which field is mandatory. The different elements in the form group which are supported are:<input>s and <textarea>s with .form-control<select>s with .for 3 min read Bootstrap 5 Validation TooltipsBootstrap 5 Validation Tooltips are used to provide interactive textual hints to the user about the requirements to submit the form. Bootstrap 5 Validation Tooltips classes: valid|invalid-feedback: This class is used to tell the user about what things are necessary for the form to be submitted.valid 2 min read Like