set form width of inline form- responsive bootstrap

Question

I was trying to embeds three different forms in a single horizontal row.

The first(shop), second(locality) and third(search) form element should occupy 50%,30% and 20% (6,4 and 2 bootstrap col unit) of total horizontal row.

enter image description here

In mobile view, each three form element should be adjust in individual row. enter image description here I tried following:

<div class="row search-form-wizard">
    <form role="form" class="">
        <div class="form-group form-group-lg">
            <div class="col-md-6">
                <label class="sr-only" for="select2_sample6"></label>
                <input type="hidden" id="select2_sample6" class="form-control select2 input-lg"  >
            </div>
        </div>
        <div class="form-group form-group-lg">
            <div class="col-md-4">
                <label class="sr-only" for="selectextra_sample6"></label>
                <input type="hidden" id="selectextra_sample6" class="form-control select2 input-lg" >
            </div>
        </div>
        <div class="col-md-2">
            <button type="button" class="btn green btn-lg btn-block"><i class="fa fa-search"></i> Search</button>
        </div>
    </form>
</div>

Is this the correct approach?

Should I use bootstrap inline form for this purpose?

I tried using inline form, but its difficult to set width of each form elements.

Derrick Wells · Accepted Answer · 2015-01-14 17:51:50Z

2

You are correct you just need to adjust for small screens with col-xs-12 & change md to sm.. xs is mobile...

<div class="row search-form-wizard">
    <form role="form" class="">
        <div class="form-group form-group-lg">
            <div class="col-sm-6 col-xs-12">
                <label class="sr-only" for="select2_sample6"></label>
                <input type="hidden" id="select2_sample6" class="form-control select2 input-lg"  >
            </div>
        </div>
        <div class="form-group form-group-lg">
            <div class="col-sm-4 col-xs-12">
                <label class="sr-only" for="selectextra_sample6"></label>
                <input type="hidden" id="selectextra_sample6" class="form-control select2 input-lg" >
            </div>
        </div>
        <div class="col-sm-2 col-xs-12">
            <button type="button" class="btn green btn-lg btn-block"><i class="fa fa-search"></i> Search</button>
        </div>
     </form>
</div>

answered Jan 14, 2015 at 17:51

Derrick Wells

3181 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ritesh Kumar Gupta Over a year ago

with col-xs-12, there is no gap between three elements

Derrick Wells Over a year ago

This is where margins come into play.

Wild Beard · Accepted Answer · 2015-01-14 17:51:34Z

1

You have to specify a small (col-sm-*) width for each one. Edit like another answer col-xs for extra-small screens.

<div class="col-md-6 col-sm-12">

<div class="col-md-4 col-sm-12">

<div class="col-md-2 col-sm-12">

answered Jan 14, 2015 at 17:51

Wild Beard

2,9371 gold badge14 silver badges24 bronze badges

3 Comments

Derrick Wells Over a year ago

col-xs-* is for mobile.

Creaven Over a year ago

If you have applied custom margins, padding etc it can throw out the 12 grid system and you may have lose one of the 12 to handle it

Wild Beard Over a year ago

That's why you apply margins and padding to inner elements not the column element itself.

Collectives™ on Stack Overflow

set form width of inline form- responsive bootstrap

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related