title: Bootstrap 5 - Position floating label inside form-control with width: auto?
body: <p>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:</p>
  <pre><code>    &lt;form action=&quot;/login&quot; method=&quot;post&quot;&gt;
          &lt;div class=&quot;form-floating mb-3&quot;&gt;
              &lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;username&quot; id=&quot;floatingUsername&quot; placeholder=&quot;Username&quot; autocomplete=&quot;off&quot; autofocus&gt;
              &lt;label for=&quot;floatingUsername&quot;&gt;Username&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class=&quot;form-floating mb-3&quot;&gt;
              &lt;input type=&quot;password&quot; class=&quot;form-control&quot; name=&quot;password&quot; id=&quot;floatingPassword&quot; placeholder=&quot;Password&quot; autocomplete=&quot;off&quot;&gt;
              &lt;label for=&quot;floatingPassword&quot;&gt;Password&lt;/label&gt;
          &lt;/div&gt;
          &lt;button class=&quot;btn btn-light border&quot; type=&quot;submit&quot;&gt;Log In&lt;/button&gt;
      &lt;/form&gt;
  </code></pre>
  <pre><code>main .form-control
  {
      /* Center form controls and override 100% width */
      display: inline-block;
      width: auto;
  }
  
  main
  {
      /* Scroll horizontally*/
      overflow-x: auto;
  
      text-align: center;
  }
  </code></pre>
  <p>And this is what that looks like:
  <a href="https://i.stack.imgur.com/mTwLE.png" rel="nofollow noreferrer">labels not inside inputs</a></p>
  <p>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?</p>