CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Chad Johnson
Chad Johnson

Reputation: 21895

How to make a partially inline Bootstrap form?

I'm attempting to produce this form with Bootstrap 3:

enter image description here

I'm having trouble making First Name and Last Name inline AND making them together take up the same width as the other fields. Currently I have the following

<form role="form" class="form-horizontal">
    <h4>Administrator</h4>

    <div class="form-group">
        <div class="col-sm-6 col-md-6">
            <input type="text" class="form-control" placeholder="First Name" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-6 col-md-6">
            <input type="text" class="form-control" placeholder="Last Name" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-6 col-md-6">
            <input type="text" class="form-control"placeholder="Email Address" />
        </div>
    </div>
    <button type="submit" class="btn btn-primary">Save</button>
    <button type="button" class="btn btn-default">Cancel</button>
</form>

which outputs a simple form with no inlining. Any ideas how to adjust this to look like in the picture? Here is a jsfiddle: http://jsfiddle.net/gJdyb/1/

Upvotes: 0

Views: 909

Answers (2)

Datz Me
Datz Me

Reputation: 955

Try this one

<form role="form" class="form-horizontal">
    <h4>Administrator</h4>


    <div class="form-group row">
        <div class="col-xs-6 col-md-6">
          <input type="text" class="form-control" placeholder="First Name" />
        </div>
       <div class="col-xs-6 col-md-6">
           <input type="text" class="form-control" placeholder="Last Name" />
        </div>

    </div>
    <div class="Form-group">

            <input type="text" class="form-control"placeholder="Email Address" />

    </div>
    <button type="submit" class="btn btn-primary">Save</button>
    <button type="button" class="btn btn-default">Cancel</button>
</form>

http://jsfiddle.net/gJdyb/4/

it use the col-xs-6.. it is us

read this for documentation of grid system of bootstrap

http://getbootstrap.com/css/#grid

Upvotes: 0

Tom Studee
Tom Studee

Reputation: 10452

Here's a jsFiddle. Use class row on the form-group you'd like to inline:

Administrator

<div class="form-group">
    <div class="col-md-12">
        <div class="form-group row">
            <div class="col-md-6">
                <input type="text" class="form-control" placeholder="First Name" />
            </div>
            <div class="col-md-6">
                <input type="text" class="form-control" placeholder="Last Name" />
            </div>
        </div>
    </div>
</div>
<div class="form-group">
    <div class="col-md-12">
        <input type="text" class="form-control"placeholder="Email Address" />
    </div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-default">Cancel</button>

Upvotes: 1

Related Questions