CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
aman
aman

Reputation: 6242

CSS: Form control alignment using bootstrap 3

This might be something simple that I am missing but I cant get though this. I am using bootstrap 3 in my application. In my form I have some controls like dropdowns, textbox, labels etc. See example as below:

<div class="modal-body">
<form role="form" name="form" class="form-body">
    <div class="form-group"> 
        //form label here
        <div class="m-grid-col-sm-5">               
           //form element here
        </div>
    </div>
</form>
<div>

Above is just a example. The issue is when I run my app, I can see is the label is always above the control. What I want is the label on the left and the form control (dropdown,textbox etc) on the right.

You can see I created a sample jsfiddle at: https://jsfiddle.net/aman1981/xprh2tno/8/

Please ignore the modal class as the issue is not I am having is not at the modal but other forms within my app as well.

I have tried adjusting and using different class but looks like its not adjusting well.

Upvotes: 1

Views: 845

Answers (2)

Md. Abu Sayed
Md. Abu Sayed

Reputation: 2486

You Can try this Code here 

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">


<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="name" class="col-xs-2 control-label">Name</label>
    <div class="col-xs-10">
      <input type="text" class="form-control" id="name" placeholder="Email">
    </div>
  </div>

  <div class="form-group">
    <label for="inputEmail3" class="col-xs-2 control-label">Email</label>
    <div class="col-xs-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>

<div class="form-group">
    <label for="sex" class="col-xs-2 control-label">Sex</label>
    <div class="col-xs-10">
       <select name="sex" class="auto-width setup-inline form-control input-medium" required>
          <option value="">---Please select---</option>
          <option value="m">Male</option>
          <option value="f">Female</option>
       </select>
    </div>
</div>


  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10 text-right">
      <button type="submit" class="btn btn-success">Submit</button>
    </div>
  </div>
</form>

Upvotes: 0

K K
K K

Reputation: 18099

You need to refer the Horizontal Form section in the documentation here: http://bootstrapdocs.com/v3.0.3/docs/css/#forms

HTML:

  <form class="form-horizontal" role="form">
    <div class="form-group">
      <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
      </div>
    </div>
    <div class="form-group">
      <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <div class="checkbox">
          <label>
            <input type="checkbox"> Remember me
          </label>
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default">Sign in</button>
      </div>
    </div>
  </form>

Demo: https://jsfiddle.net/xprh2tno/12/

Upvotes: 1

Related Questions