Bootstrap 4 text-left class strange behaviour

Question

I tried using 'text-left' on a <div> and found that it doesn't work. So I set up the simplest example I can think of:

<form>
    <div class="col-12 form-inline">
        <label class="col-10 text-left" style="background-color:powderblue;">TestLabel</label>
    </div>
</form>

and I tested it on https://www.codeply.com/ The result is: it's working only on sm screen size.

width 360:

but on 768 and above:

And my question is: am I doing something wrong, or is it a bug in Bootstrap?

Answer 1

It is because of the flexform behaviour of form-inline.

You have to use justify-content-start instead of text-left

<form>
    <div class="col-12 form-inline">
        <label class="col-10 justify-content-start" style="background-color:powderblue;">TestLabel</label>
    </div>
</form>

And don't use cols inside a col without a row.