<div class="container my-4">

  <p>

    This input uses <code>.form-outline</code> and works fine standing on its own.

  </p>

  <div class="form-outline">

    <input type="text" id="form1" class="form-control" disabled />

    <label class="form-label" for="form1">No layout 1</label>

  </div>

  <div class="form-outline">

    <input type="text" id="form2" class="form-control" />

    <label class="form-label" for="form2">No layout 2</label>

  </div>

  <hr class="my-5" />

  <p>

    The form inputs below use <code>.form-outline</code> which does not seem to work when trying to adjust the layout. They are in a <code>div</code> with <code>.row</code> applied.

  </p>

  <p>

    They don't seem to support colums/rows. In fact using them breaks them.

  </p>

  <div class="row row-cols-3">

    <div class="form-outline col">

      <input type="text" id="form1" class="form-control" disabled />

      <label class="form-label" for="form1">Label One</label>

    </div>

​

    <div class="form-outline col">

      <input type="text" id="form2" class="form-control" />

      <label class="form-label" for="form2">Label Two (not disabled)</label>

    </div>

    <div class="form-outline col">

      <input type="text" id="form3" class="form-control" disabled />

      <label class="form-label" for="form3">Label Three</label>

    </div>

  </div>

  <hr class="my-5" />

  <p>

    Here is an example of the same inputs as above. <code>.form-outline</code> has been replaced with <code>.form-group</code> on the <code>input</code>.

  </p>

    <div class="row row-cols-3">

    <div class="form-group col">

      <input type="text" id="form1" class="form-control" disabled />

      <label class="form-label" for="form1">Label One</label>

    </div>

​

    <div class="form-group col">

      <input type="text" id="form2" class="form-control" />

      <label class="form-label" for="form2">(not disabled)</label>

    </div>

    <div class="form-group col">

      <input type="text" id="form3" class="form-control" disabled />

      <label class="form-label" for="form3">Label Three</label>

    </div>

  </div>

</div>