CODEWITHSUNDEEP
htmltwitter-bootstrap-3
Derek
Derek

Reputation: 8630

Bootstrap Horizontal alignment form

Can anyone advise why im getting this strange alignment issue with bootstrap when horizontally aligning textboxes with a select control :-

enter image description here

  <div class="row">
      <div class="form-group">
           <div class="col-xs-12 col-md-2">

                <select class="form-control" required>
                     <option value="">Title</option>
                     <option value="Mr">Mr</option>
                     <option value="Mrs">Mrs</option>
                     <option value="Ms">Ms</option>
                     <option value="Miss">Miss</option>
                     <option value="Dr">Dr</option>
                </select>
            </div>

     </div>

    <div class="form-group">
           <div class="col-xs-12 col-md-5">
               <input type="text" class="form-control" placeholder="Forename" />
           </div>
    </div>

    <div class="form-group">
         <div class="col-xs-12 col-md-5">
              <input type="text" class="form-control" placeholder="Surname" />
         </div>
     </div>

 </div>

Upvotes: 1

Views: 469

Answers (4)

Ritwika Das
Ritwika Das

Reputation: 199

Please use one form-group for the entire section.` 

<div class="form-group">
     <div class="col-xs-12 col-md-2">
          <select class="form-control" required>
               <option value="">Title</option>
               <option value="Mr">Mr</option>
               <option value="Mrs">Mrs</option>
               <option value="Ms">Ms</option>
               <option value="Miss">Miss</option>
               <option value="Dr">Dr</option>
          </select>
     </div>
     <div class="col-xs-12 col-md-5">
          <input type="text" class="form-control" placeholder="Forename" />
     </div>
     <div class="col-xs-12 col-md-5">
          <input type="text" class="form-control" placeholder="Surname" />
     </div>
</div>

`

Upvotes: 1

Rendy Tan
Rendy Tan

Reputation: 1

Form group is supposed to be used if you need to group several form elements together. In this case, it is a good idea for you to group all your form elements into a single form-group.

<div class="row">
  <div class="form-group">
      <div class="col-xs-12 col-md-2">
            <select class="form-control" required>
                 <option value="">Title</option>
                 <option value="Mr">Mr</option>
                 <option value="Mrs">Mrs</option>
                 <option value="Ms">Ms</option>
                 <option value="Miss">Miss</option>
                 <option value="Dr">Dr</option>
            </select>
      </div>
     <div class="col-xs-12 col-md-5">
         <input type="text" class="form-control" placeholder="Forename" />
     </div>
     <div class="col-xs-12 col-md-5">
          <input type="text" class="form-control" placeholder="Surname" />
     </div>
 </div>

Upvotes: 0

Niroj S
Niroj S

Reputation: 24

Define the column outside the form-group class.

<div class="row">
  <div class="col-xs-12 col-md-2">
    <div class="form-group">
      <select class="form-control" required>
        <option value="">Title</option>
        <option value="Mr">Mr</option>
        <option value="Mrs">Mrs</option>
        <option value="Ms">Ms</option>
        <option value="Miss">Miss</option>
        <option value="Dr">Dr</option>
      </select>
    </div>
  </div>
  <div class="col-xs-12 col-md-5">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Forename">
    </div>
  </div>
  <div class="col-xs-12 col-md-5">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Surname">
    </div>
  </div>
</div>

Upvotes: -1

Abhi Andhariya
Abhi Andhariya

Reputation: 560

Write your columns outside form-group.

<html>
   <head>
      <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   </head>
   <body>
      <div class="row">
         <div class="col-xs-12 col-md-2">
            <div class="form-group">
               <select class="form-control" required>
                  <option value="">Title</option>
                  <option value="Mr">Mr</option>
                  <option value="Mrs">Mrs</option>
                  <option value="Ms">Ms</option>
                  <option value="Miss">Miss</option>
                  <option value="Dr">Dr</option>
               </select>
            </div>
         </div>
         <div class="col-xs-12 col-md-5">
            <div class="form-group">
               <input type="text" class="form-control" placeholder="Forename" />
            </div>
         </div>
         <div class="col-xs-12 col-md-5">
            <div class="form-group">
               <input type="text" class="form-control" placeholder="Surname" />
            </div>
         </div>
      </div>
   </body>
</html>

Upvotes: 1

Related Questions