CODEWITHSUNDEEP
csstwitter-bootstrap-3
texas697
texas697

Reputation: 6397

how to change the distance between bootsrap label and input

I am trying to change the distance between the Labels and there inputs(less distance between the 2). I would also like the labels to be right aligned with each other. I have found some examples of what I am looking for but I cant get it to work. Also you will see two sets of "City/St/Zipcode. I want these to be in the same row, everything I am seeing says to use inline-form in the form tag. My question is how can I do that when my entire modal is one form? can you have forms inside of forms for a single submit? here is my modal in a plunkr
myPlunkr

 <div class="form-group clearfix">
     <label class="col-sm-3 control-label">Name</label>
       <div class="col-sm-9">
         <input ng-model="job.name" type="text" class="form-control input-md">
       </div>
  </div>

Here is a fiddle showing how I want the labels to be right aligned and the distance between the label and input fiddle

<div class="form-group">
    <label for="gender" class="col-sm-4 control-label col-sm-pad">Gender:</label>
        <div class="col-sm-8 col-sm-pad">
            <input class="form-control input-block" name="gender" type="text">                      
         </div>
</div>

Here is a fiddle showing how I want the City/St/Zipcode to be inline fiddle

<form class="form-inline" role="form">
 <div class="form-group">
  <label class="sr-only" for="timezone">Timezone</label>
   <select class="form-control" id="timezone" name="timezone">
  <option value="America/St_Lucia">America/St_Lucia</option>
  <option value="Europe/Nicosia">Europe/Nicosia</option>
 </select>
</div>

<label class="radio-inline">
  <input id="timeformat-0" name="timeformat" value="24" type="radio" />
  19:00
</label>

<label class="radio-inline">
 <input checked id="timeformat-1" name="timeformat" value="12" type="radio" />
   7:00 PM
</label>

 <button class="btn" type="submit">Save</button>
</form>

Update: * = (space) Instead of this Label**********Input. I want this, Label***Input

Upvotes: 0

Views: 646

Answers (1)

user3931708
user3931708

Reputation:

I can not exactly understand what you want..

if you want space b/w the label and input field then add br tag like...

  <input id="timeformat-0" name="timeformat" value="24" type="radio" />
  19:00
</label>
<br/>
<label class="radio-inline">
 <input checked id="timeformat-1" name="timeformat" value="12" type="radio" />
   7:00 PM
</label>

if you want it to the right side then add this class.

pull-right

Upvotes: 1

Related Questions