Twitter Bootstrap Question posted in

Twitter bootstrap – Bootstrap Form Horizontal Vertical Responsive

I have a simple form and want it to be horizontal on medium an large devices and vertical on small devices with twitter-bootstrap-3.

I got it working responsive, but it’s not switching to vertical style on small devices.. Isn’t that possible?

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-offset-1 col-md-10">
            <form method="POST" action="...url.." class="form-horizontal">
                <div class="form-group">
                    <label for="telefon" class="control-label col-xs-3">Telefon</label>
                   <div class="col-xs-8">
                       <input type="text" name="telefon" class="form-control">
                   </div>
                </div>
                <div class="form-group">
                    <label for="email" class="control-label col-xs-3">Email</label>
                    <div class="col-xs-8">
                        <input type="email" name="email" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-6">
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </div>                    
            </form>
        </div> 
    </div>
</div>

http://jsfiddle.net/quyw5fnL/

EDIT:
I want it to look like this on large screens:

Label1: Inputbox1
Label2: Inputbox2

And on small Screens like this:

Label1:
Inputbox1
Label2:
Inputbox2

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Just realized that there was never a correct answer given. Perhaps it's just to easy, but for the sake of completion and all who are stumbling over this, here is the simple answer:

    <form method="POST" action="...something..." class="form-horizontal">

  <div class="form-group">
    <label for="" class="col-xs-12 col-sm-3 control-label">Name</label>
    <div class="col-xs-12 col-sm-9">
      <p class="form-control-static">John Muller</p>
    </div>
  </div>

  <div class="form-group">
    <label for="town" class="col-xs-12 col-sm-3 control-label">Town</label>
    <div class="col-xs-12 col-sm-9">
      <input type="text" name="town" class="form-control " placeholder="" value="New York">
    </div>
  </div>

  <div class="form-group">
    <label for="something" class="col-xs-12 col-sm-3 control-label">Something else</label>
    <div class="col-xs-12 col-sm-9">
      <input type="text" name="something" class="form-control " placeholder="" value="Got it">
    </div>
  </div>
</form>

    The important part is to set col-xs-12 and col-sm-3 on the label and col-xs-12 and col-sm-9 on the input.

    Fiddle


  2. 0 
    <div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-offset-1 col-md-10">
            <form method="POST" action="...url.." class="form-inline">
                <div class="form-group">
                <label for="telefon" class="">Telefon</label>
              <input type="text" name="telefon" class="form-control">
                </div>
                <div class="form-group">
                    <label for="email" class="">Email</label>
                        <input type="email" name="email" class="form-control">
                </div>
                <div class="form-group">

                        <button type="submit" class="btn btn-primary">Save</button>

                </div>                    
            </form>
        </div> 
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search