Twitter Bootstrap 3 inline and horizontal form

Twitter Bootstrap 3 inline and horizontal form

I’m trying to migrate my Bootstrap 2 form to Bootstrap 3.
My current code and fiddle: http://jsfiddle.net/mavent/Z4TRx/





I want inline behaviour, my label 2 will be next to text input, my label 3 will be next to text input. I also need horizontal behaviour, my label 4 will be on top of the textarea. My label 2’s and my label 3’s text box will be 4 column width, my label 4’s width will be full width of the form.

How can I do this in Bootstrap 3 ?

Solutions/Answers:

Solution 1:

Just because the docs suggest you should use the form controls does not mean you have to. You can just use the built-in grid system to achieve the layout. See http://bootply.com/82900 for a working example. Code below:

<div class="container">
  <form role="form">
    <div class="row">
      <label class="col-xs-4" for="inputEmail1">Email</label>
      <div class="col-xs-8">
        <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
      </div>
    </div>
    <div class="row">
      <label class="col-xs-4" for="inputPassword1">Password</label>
      <div class="col-xs-8">
        <input type="password" class="form-control" id="inputPassword1" placeholder="Password">
      </div>
    </div>
    <div class="row">
      <label class="col-xs-12" for="TextArea">Text Area</label>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <textarea class="form-control" id="TextArea"></textarea>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <button type="submit" class="btn btn-default">Sign in</button>
      </div>
    </div>
  </form>
</div>

Screenshot of above code rendered

UPDATE: Just realized I dropped the label tags. Updated the answer, swapping <label> for <div>.

UPDATE: Updating code to reflect need to stay in this layout in small widths, as requested in comments below. See http://jsfiddle.net/8xxUV/3 for a working example.

Related:  Simple_form bootstrap style inline-form not working properly

Solution 2:

What you are looking for is not really in-line behaviour at all, just horizontal.

This code should help:

<div class="" id="myDialog1">
    <div class="" id="myDialog2">
        <form role="form" class="form-horizontal" id="contactForm" onsubmit="send(); return false;">
            <label>Please fill the form</label>
            <br><br>
            <div class="form-group">
                <label for="name" class="col-lg-3 col-sm-3">My Label 2</label>
                <div class="col-lg-7 col-sm-7">
                    <input type="text" class="form-control" name="name" id="name" required="required" value="myName">
                </div>
            </div>

            <div class="form-group">
                <label for="email" class="col-lg-3 col-sm-3">My Label 3</label>
                <div class="col-lg-7 col-sm-7">
                    <input type="email" class="form-control" name="email" id="email" required="required">
              </div>
            </div>

            <div class="form-group">
                <label for="message" class="col-lg-3">My Label 4</label>
                <div class="col-lg-10 col-sm-10">
                     <textarea class="form-control" name="message" id="message" required="required"></textarea>
                </div>
            </div>

            <button type="submit" class="btn btn-primary" id="submit" style="margin-left: 20px">Send</button>
        </form>
    </div>
</div>

And looks like this:

horizontal form

The col-sm-* tags are optional – they just stop the elements from stacking as you size the window down.

You can try it out here: http://bootply.com/82889

Solution 3:

I had the same problem, here is my solution:

<form method="post" class="col-md-12 form-inline form-horizontal" role="form">
        <label class="control-label col-sm-5" for="jbe"><i class="icon-envelope"></i> Email me things like this: </label>
        <div class="input-group col-sm-7">
            <input class="form-control" type="email" name="email" placeholder="your.email@example.com"/>
            <span class="input-group-btn">
                <button class="btn btn-primary" type="submit">Submit</button>
            </span>
        </div>
    </form>

here is the Demo

Related:  Glyphicon works locally but not on Heroku

Solution 4:

you can try the code below

<div class="" id="myDialog1">



        <form role="form" class="" id="contactForm" onsubmit="send(); return false;">
            <div class="clearfix igr col-md-12">
                <label>Please fill the form</label>
            </div>

            <div class="clearfix igr col-md-12">
                <div class="col-md-2">
                    <label for="name">My Label 2</label>
                </div>
                <div class="col-md-3">
                    <input type="text" class="form-control" name="name" id="name" required="required" value="myName">
                </div>
            </div>

            <div class="clearfix igr col-md-12">
                <div class="col-md-2">
                    <label for="email">My Label 3</label>
                </div>
                <div class="col-md-3">
                    <input type="email" class="form-control" name="email" id="email" required="required">
                </div>
            </div>

            <div class="clearfix igr col-md-12">
                <div class="col-md-12">
                    <label for="message">My Label 4</label>
                </div>
                <div class="col-md-3">
                    <textarea class="form-control" name="message" id="message" required="required"></textarea>
                </div>
            </div>
            <div class="clearfix igr col-md-12">
                <div class="col-md-2">
                    <button type="submit" class="btn btn-default btn-primary" id="submit" >Send</button>
                </div>
            </div>
        </form>
    </div>

and use the styles as:

label,textarea{
        margin:5px 0;
    }
    .igr{
        margin:15px 0;
    }

Solution 5:

Adding the class control-label to your labels should do the trick for you.

References

Related:  Bind on(keyup) to dynamic elements in jQuery (Twitter Bootstrap + typehead)