Twitter Bootstrap Question posted in

bootstrap 3.3.6 responsive form on small screen – Twitter bootstrap

I am using Twitter Bootstrap 3.3.6. I am new to it. I have designed a form with following input fields.

  <div class="form-group row">  
    <label for="address1" class="col-xs-2 col-md-1 control-label">Address 1:</label>
    <div class="col-xs-10 col-md-4">
      <input type="text" name="address1" id="" class="form-control" maxlength="55" value="" />
    </div>
    <label for="address2" class="col-xs-2 col-md-1 control-label">Address 2:</label>
    <div class="col-xs-10 col-md-4">
      <input type="text" name="address2" id="" class="form-control" maxlength="55" value="" />
    </div>
  </div>

When I check above using Firefox responsive design mode for width less than 768 Second label “Address 2:” is wrapped to a new line but it shows some margin on left. I don’t see any problem when I check inspect using firebug.

EDIT: Actually I want above 2 labels and inputs on same line for large screens but broken down to 2 lines for screens below 768px.

Tags:

2

Answers


  1. 0

    You don’t need to put that input inside another div. Just put your input after label tag and use two different .form-groups for two inputs. Your code should be like this.

    <div class="form-group">  
    <label for="address1" class="col-xs-2 col-md-1 control-label">Address 1:</label>
    <input type="text" name="address1" id="" class="form-control" maxlength="55" value="" />
</div>


<div class="form-group">  
    <label for="address1" class="col-xs-2 col-md-1 control-label">Address 1:</label>
    <input type="text" name="address1" id="" class="form-control" maxlength="55" value="" />
</div>

    If you need to make a inline form , add form-inline class to your <form> element.

    <form class="form-inline">

    Best Regards !

    Login or Signup to reply.
  2. 0

    I have added col-xs-12 do the label and also ‘text-center’ class for better positioning on small, but this is up to you.

    <div class="form-group row">  
  <label for="address1" class="col-xs-12 col-md-1 control-label text-center">Address 1:</label>
  <div class="col-xs-10 col-md-4">
    <input type="text" name="address1" id="" class="form-control" maxlength="55" value="" />
  </div>
  <label for="address2" class="col-xs-12 col-md-1 control-label text-center">Address 2:</label>
    <div class="col-xs-10 col-md-4">
      <input type="text" name="address2" id="" class="form-control" maxlength="55" value="" />
   </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search