CODEWITHSUNDEEP
htmlcssangularjstwitter-bootstrap-3
Candres
Candres

Reputation: 405

Space among inputs using Bootstrap3

I have a single page application with Bootstrap 3 and AngularJS, and I don't want to use a datepicker to select dates, I would like to use 2 inputs to day and year, and another to month.

The div where I printed the date fields is:

            <div class="col-md-8">
               <div class="row">
                   <label>Start date</label>
               </div>
               <div class="row">
                   <div class="col-md-3">
                      <input type="text" name="day" class="form-control" placeholder="Day"/>
                    </div>
                    <div class="col-md-6">
                        <select class="form-control">
                            <option>Month</option>
                            <option>January</option>
                            <option>Febrary</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <input type="text" name="" class="form-control" placeholder="Year"/>
                    </div>
                </div>
            </div>

At the webpage How I can display this better? As you can see the label align is wrong and the space among fields is very big.

Upvotes: 1

Views: 71

Answers (2)

Christina
Christina

Reputation: 34652

Take a look at the grid system documentation. You don't nest .row as you have done as .row will give you a negative margin. You can modify the css as follows to do what you want:

DEMO: http://jsbin.com/qukema/1/edit

You can also use .form-group instead of .row but change the css below.

CSS:

@media (max-width:991px) {
    .v-space {margin:5px 0;}
}

.custom-form [class*="col-"] {
    padding-left: .5%;
    padding-right: .5%;
}
.custom-form.row {
    margin-left: -.5%;
    margin-right: -.5%;
}

HTML

 <div class="container">
     <!-- do not nest containers but if you use row, there must be a .container parent -->
     <form role="form">
        <label>Start date</label><!--no grid class required -->
        <div class="row custom-form">
           <div class="col-md-3 v-space">
              <input type="text" name="day" class="form-control" placeholder="Day"/>
           </div>
           <div class="col-md-6 v-space">
              <select class="form-control">
                 <option>Month</option>
                 <option>January</option>
                 <option>Febrary</option>
              </select>
           </div>
           <div class="col-md-3 v-space">
              <input type="text" name="" class="form-control" placeholder="Year"/>
           </div>
        </div>
     </form>
  </div>

Upvotes: 1

Jens W
Jens W

Reputation: 188

The label has different alignment because it is not inside a column

The space between the columns is called gutter. By default bootstrap has 15px on the left and right side of each column. So the first column has a spacing of 15px to the left and 30px between the columns.

http://getbootstrap.com/css/#grid

You can change the default margins as already mentioned, but this will have an effect on your whole grid. Maybe you should risk a look at the bootstrap form examples:

http://getbootstrap.com/css/#forms

Upvotes: 1

Related Questions