I am currently utilizing Bootstrap 5 and attempting to incorporate floating labels with centered form controls that have a width set to auto, as opposed to the default 100% in Bootstrap. My challenge lies in getting the floating labels to remain inside the input fields consistently. Below is the code for the form along with the relevant CSS:
<form action="/login" method="post">
<div class="form-floating mb-3">
<input type="text" class="form-control" name="username" id="floatingUsername" placeholder="Username" autocomplete="off" autofocus>
<label for="floatingUsername">Username</label>
</div>
<div class="form-floating mb-3">
<input type="password" class="form-control" name="password" id="floatingPassword" placeholder="Password" autocomplete="off">
<label for="floatingPassword">Password</label>
</div>
<button class="btn btn-light border" type="submit">Log In</button>
</form>
main .form-control
{
/* Center form controls and override 100% width */
display: inline-block;
width: auto;
}
main
{
/* Scroll horizontally*/
overflow-x: auto;
text-align: center;
}
Displayed here is what the current layout looks like: labels not inside inputs
I have experimented with various align and display properties in .form-floating, label, etc. I also attempted setting width to auto for labels, but no changes were observed. My understanding is limited, and it appears that floating labels are a relatively new feature in standard Bootstrap, hence the lack of helpful information from Google/SO. Perhaps it is not achievable to have small inputs (not set to width:100%) and functioning floating labels simultaneously?