CODEWITHSUNDEEP
htmlcsstwitter-bootstrapinput
jeremy
jeremy

Reputation: 433

how to get 2 input groups next to each other but only 1 label in bootstrap

I'm wondering how to get 2 input groups next to each other but have only 1 label above the input groups...kind of like this

enter image description here

so far I have:

<div class="row">
                <div class="form-group col-xs-3 col-xs-offset-1">
                    <label for="attendeeCountMin">Guests</label>
                    <input id="attendeeCountMin" class="form-control input-group-lg" type="number" name="attendeeCountMin" placeholder="Min"/>
                </div>

                <div class="form-group col-xs-3">
                    <label for="attendeeCountMax"></label>
                    <input id="attendeeCountMax" class="form-control input-group-lg" type="number" name="attendeeCountMax" placeholder="Max"/>
                </div>
</div>

it keeps on making the second input box a little above the first one unless i put something in the second label box. Any one know how to do this?

thanks

Upvotes: 1

Views: 1897

Answers (2)

megamit
megamit

Reputation: 952

Move the label outside the row

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<label>Guests</label>
<div class="row form-group">
                <div class="form-group col-xs-3 col-xs-offset-1">
                    
                    <input id="attendeeCountMin" class="form-control input-group-lg" type="number" name="attendeeCountMin" placeholder="Min"/>
                </div>

                <div class="form-group col-xs-3">
                    <input id="attendeeCountMax" class="form-control input-group-lg" type="number" name="attendeeCountMax" placeholder="Max"/>
                </div>
</div>

Upvotes: 2

Nick Gatzouli
Nick Gatzouli

Reputation: 376

You can get the result you want by adding a couple of CSS rules.

.form-group { 
   display: inline-block; 
}

The above CSS rule makes sure every element that contains .form-group class is position inline with the other element

.form-group label { 
   display: block; 
}

Makes sure every label under .form-group class is not affected by the rule above.

You can see the JSFiddle here: https://jsfiddle.net/NikolaosG/r80fjLwt/

Upvotes: 0

Related Questions