CODEWITHSUNDEEP
htmlcssformstwitter-bootstrap
diegoaguilar
diegoaguilar

Reputation: 8376

How can I make a Twitter Bootstrap styled form have multiple inputs in a row?

From official docs:

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form (which doesn't have to be a ). Doing so changes .form-groups to behave as grid rows, so no need for .row.

So I tried:

<form class="form-horizontal">
    <div class="form-group">
        <input type="text" class="col-md-2 form-control" placeholder="Cantidad">
        <input type="text" class="col-md-6 form-control" placeholder="Unidad">
    </div>  
</form>

But it seems the form-control class will make them return to an own single row each.

This is what I got:

enter image description here How can I achieve both input to be placed in same row?

Upvotes: 0

Views: 120

Answers (2)

serakfalcon
serakfalcon

Reputation: 3531

Add form-inline to the form class. Note that, if you make the form too small, it will still 'spill over'. In this case, and if you don't want all form-groups to be inline, use separate divs for the spacing.

Form inline example: 

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-md-10 col-md-offset-1">
<form class="form-horizontal form-inline">
    <div class="form-group">
        <input type="text" class="col-md-2 col-xs-6 form-control" placeholder="Cantidad">
        <input type="text" class="col-md-6 col-xs-6 form-control" placeholder="Unidad">
    </div>  
</form>
</div>
</div>

Separate Div example: fiddle

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-md-10 col-md-offset-1">
<form class="form-horizontal">
<div class="form-group">
    <div class="input-group">
    <div class="col-md-2 col-xs-6">
    <input type="text" class=" form-control" placeholder="Cantidad" />
        </div>
        <div class="col-md-6 col-xs-6">
    <input type="text" class=" form-control" placeholder="Unidad" />
        </div>
    </div>
</div> 
</form>
</div></div>

Upvotes: 1

vas
vas

Reputation: 960

HTML

<form class="form-horizontal">
    <div class="form-group">
        <input type="text" class="col-md-2  pull-left" placeholder="Cantidad">
        <input type="text" class="col-md-6  pull-left" placeholder="Unidad">
    </div>  
</form>

jsfiddle

Upvotes: 0

Related Questions