Boostrap 4 extra small col width 100% not working

Question

I have developed a static HTML page with Bootstrap 4, using col equal with big screen but on Extra small screens, the col is not getting 100% width. What did I forget?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<div class="container">
     <div class="form-row">
        <!-- Grid column -->
        <div class="col col-6">
            <!-- Material input -->
            <div class="md-form">
                <input type="text" class="form-control" placeholder="City">
            </div>
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col">
            <!-- Material input -->
            <div class="md-form">
                <input type="text" class="form-control" placeholder="State">
            </div>
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col">
            <!-- Material input -->
            <div class="md-form">
                <input type="text" class="form-control" placeholder="Zip">
            </div>
        </div>
        <!-- Grid column -->
    </div>
    </div>

Carol Skelly · Accepted Answer · 2018-04-12T12:15:36.100

Extra small col width 100% not working

The columns aren't 100% width because col is the auto-layout column for the smallest xs screen size, therefore the columns will continue to shrink in width, and never stack vertically.

Just use col-sm instead...

https://www.codeply.com/go/xb7WffaSmS

<div class="container">
    <div class="form-row">
        <!-- Grid column -->
        <div class="col-sm-6">
            <!-- Material input -->
            <div class="md-form">
                <input type="text" class="form-control" placeholder="City">
            </div>
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-sm">
            <!-- Material input -->
            <div class="md-form">
                <input type="text" class="form-control" placeholder="State">
            </div>
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-sm">
            <!-- Material input -->
            <div class="md-form">
                <input type="text" class="form-control" placeholder="Zip">
            </div>
        </div>
        <!-- Grid column -->
    </div>
</div>

Also note, the -xs infix has been removed in Bootstrap 4. Now the smallest classes are simple col, col-6, col-12, etc...

Boostrap 4 extra small col width 100% not working

1 Answers1