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

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?

Try applying the width auto to the form-floating div, and if that doesn't work, please put up a JSFiddle and then we can have a look! — Siddharth Bhansali, Jul 21 '21 at 19:13
@SiddharthBhansali Just to inform you that I did try your approach: width auto sadly didn't do anything when applied to .form-floating. But the solution posted below by HDP worked (I used flex). Thanks for your input! — Nicolas De Roover, Jul 23 '21 at 19:37

HDP · Accepted Answer · 2021-07-22T11:57:48.160

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>

Thank you so much for your help, @HDP! I thought the first solution was more elegant and I applied it, I'm reading up on the relevant docs as we speak. So handy! — Nicolas De Roover, Jul 23 '21 at 19:37

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

1 Answers1

Example 1

Example 2