How to give a space between model label and model text field - html

Question

I am trying to give a space between label and text field using twitter bootstarp.
bellow is the screenshot
I want to give a space between
User Name label space User Name text field
same withe other field.
how can I do that
This is my code
<div class="modal fade" id=addNewUser tabindex="-1" role="dialog" aria-labelledby="helpModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">New User</h4>
</div>
<div class="modal-body">
<form class="AddUser" role="form">
<div class="input-group col-md-8"> <span class="input-group-addon ">User Name</span>
<input class="form-control" type="text" class="form-control" placeholder="User Name" />
</div>
<div class="input-group col-md-8"> <span class="input-group-addon">Password </span>
<input class="form-control" type="text" class="form-control" placeholder="Password" />
</div>
<div class="input-group col-md-8"> <span class="input-group-addon">Roles</span>
<div class="checkbox">
<label>
<input type="checkbox">Admin</label>
</div>
</div>
<div class="input-group col-md-8"> <span class="input-group-addon">Status</span>
<div class="radio">
<label>
<input type="radio">Active</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default blue-btn">Add User</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
When I am applying this
.input-group-addon { display: inline-block; margin-right: 12px; width: 80px; }
Css Which I am using
.input-group-addon {
min-width:100px;
text-align:left;
}
.modal-dialog {
height: 80%;
padding-top:10%;
}
.modal-content {
height: 60% !important;
overflow:visible;
}
.modal-body {
height: 70%;
overflow: auto;
}
.modal-footer {
position:absolute;
bottom:0;
left:0;
right:0;
}

Answer 1

Insert &nbsp to the end of your captions
&nbsp is the entity used to represent a non-breaking space. It is essentially a standard space, the primary difference being that a browser should not break (or wrap) a line of text at the point that this occupies.
OR using CSS..
Provide your stylesheet with a class for form input elements making use of the margin: style.
In this case you would use a style on the class="input-group-addon" field.
.input-group-addon {
margin-right: 1em;
}

Answer 2

maybe try something like:
.input-group-addon { display: inline-block; margin-right: 12px; width: 80px; }