Bootstrap 5 - Position floating label inside form-control with width: auto? - html

Question

I'm using Bootstrap 5. I'm trying to use floating labels with centered form controls that have a width: auto instead of Bootstrap's default 100%. I'm not sure how I can get the floating labels to be inside the input fields at all times. I've currently got the following form and 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;
}
And this is what that looks like:
labels not inside inputs
I've tried using a bunch of align and display properties in .form-floating, label, etc. I've also tried setting width:auto for labels but that didn't change anything either. Kind of at a loss here as I've only got minimal experience and it seems like floating labels are a relatively new addition to stock Bootstrap, so Google/SO didn't find much. Maybe it's just not possible to make the inputs small (not width:100%) and have working floating labels?

Answer 1

You can do with bootstrap flex behaviors & Grid system without use custom css.
Example 1
with flex behaviors
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-center text-center">
<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>
</div>
Example 2
with Grid system
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row justify-content-center text-center">
<div class="col-md-4">
<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>
</div>
</div>
</div>