CODEWITHSUNDEEP
htmlcssbootstrap-4
Jackal
Jackal

Reputation: 3521

bootstrap columns on same row on mobile

I have this row using horizontal form to show the label on the left side. On Mobile i want the label to occupy one row, and I want the 3 textboxes to remain on the same row, how to acheive this? They will stack on top of each other still

<div class="row">
    <div class="col-sm-12">
        <div class="form-group row">
            <label for="dobDay" class="col-sm-12 col-md-3 col-form-label">Date Of Birth</label>
                                
            <div class="col-sm-4 col-md-3">
                <input type="number" class="form-control" id="dobDay" placeholder="DD">
            </div>
            <div class="col-sm-4 col-md-3">
                <input type="number" class="form-control" id="dobMonth" placeholder="MM">
            </div>
            <div class="col-sm-4 col-md-3">
                <input type="number" class="form-control" id="dobYear" placeholder="AAAA">
            </div>
        </div>
     </div>
</div>

Upvotes: 0

Views: 1739

Answers (2)

Parth
Parth

Reputation: 151

That stacking was because you didn't mention breakpoints for xs devices.

<div class="row">
    <div class="col-sm-12">
        <div class="form-group row">
            <label for="dobDay" class="col-xs-12 col-sm-12 col-md-3 col-form-label">Date Of Birth</label>
            
            <div class="col-xs-4 col-sm-4 col-md-3">
                <input type="number" class="form-control" id="dobDay" placeholder="DD">
            </div>
            <div class="col-xs-4 col-sm-4 col-md-3">
                <input type="number" class="form-control" id="dobMonth" placeholder="MM">
            </div>
            <div class="col-xs-4 col-sm-4 col-md-3">
                <input type="number" class="form-control" id="dobYear" placeholder="AAAA">
            </div>
        </div>
     </div>
</div>

Upvotes: 0

David Liang
David Liang

Reputation: 21476

You can utilize the equal-width class .col:

<div class="form-group row">
    <label for="dobDay" class="col-12 col-md col-form-label" />
    <div class="col">
        <input />
    </div>
    <div class="col">
        <input />
    </div>
    <div class="col">
        <input />
    </div>
</div>

You set col-12 on Date of Birth label so that it would occupy a row for extra small devices (less than 576px). Since other 3 columns are set with col, they will take up equal width on their own row. That would give you the col-sm-4 effect.

On medium devices and up, the Date of Birth label, with col-md, will join the equal-width group as well. That would give you the col-md-3 effect.

enter image description here

enter image description here

demo: https://jsfiddle.net/davidliang2008/yr5gp6kq/8/

Upvotes: 3

Related Questions