CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Ensom Hodder
Ensom Hodder

Reputation: 1548

is it possible to have multiple control-group in one row with Bootstrap

I am using Bootstrap for creating a simple webpage. When I create a form containing some personal information, like first name, last name, email address, etc. Sometimes I prefer to make 2 control group (first name label & input field, and last name label & input field) in the same row. How can I achieve it ? It's not evident to do it in the Horizontal-form. Thanks for your help !

Upvotes: 0

Views: 9937

Answers (2)

Miljan Puzović
Miljan Puzović

Reputation: 5820

You can't do that with horizontal form, you must use .form-inline Twitter Bootstrap class.

<form class="form-inline">
    <label>First name</label>
    <input type="text" class="input-small" placeholder="First name"/>
    <label>Last name</label>
    <input type="text" class="input-small" placeholder="Last name"/>
</form>

http://jsfiddle.net/fq4wm/

Or, you can do that also in horizontal form, but you must to override many classes and properties, and I'll not recommend that. Better way is to use default Twitter Bootstrap classes for this stuff.

EDIT: You can combine horizontal and inline classes inside one form like this:

<form class="form-inline">
    <label>First name</label>
    <input type="text" class="input-small" placeholder="First name"/>
    <label>Last name</label>
    <input type="text" class="input-small" placeholder="Last name"/>
    <br/><br/><br/>
    <div class="form-horizontal">
        <div class="control-group">
            <label class="control-label" for="inputEmail">Email</label>
            <div class="controls">
                <input type="text" id="inputEmail" placeholder="Email"/>
            </div>
        </div>
        <div class="control-group">
           <label class="control-label" for="inputPassword">Password</label>
           <div class="controls">
               <input type="password" id="inputPassword" placeholder="Password"/>
           </div>
         </div>
     </div>
</form>

http://jsfiddle.net/fq4wm/6/

Upvotes: 2

Roma149
Roma149

Reputation: 1431

Change the class to make it an inline form:

<form class="form-inline">
   ...
</form>

Then it's easier to place fields in different rows and columns.

Upvotes: 0

Related Questions