Twitter Bootstrap 3 Input and icon do not display inline - css

Question

My problem is that I cannot display my glyphicon before my inputs.
Here is my code:
<div class="modal fade " id="login" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header text-center">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">× </button>
<h4 class="modal-title">Log in</h4>
</div>{{--close modal header --}}
<div class="modal-body text-center">
{{ Form::open(array('url'=>'/' ,'role'=>'form')) }}
#if($errors->count()>0)
<div class="alert alert-danger" style="text-align:center;">
<p>Errors</p>
<ul>
#foreach($errors->all() as $error)
<li>
{{$error}}
</li>
#endforeach
</ul>
</div>
#endif
#if(Session::has('flash_message'))
<div class="alert alert-danger" style="text-align:center;">
<p>{{Session::get('flash_message')}}</p>
</div>
#endif
<div class="form-group">
<span class="glyphicon glyphicon-user ">
{{ Form::text('username', null, ['required'=>'1','placeholder'=>'Username','id'=>'user','class'=>'form-control']) }}
</span>
</div>
<div class="form-group">
<span class="glyphicon glyphicon-lock ">
{{ Form::password('password', ['required'=>'1','placeholder'=>'Password','id'=>'password','class'=>'form-control']) }}
</span>
</div>
<br/>
{{'
'}}
{{ Form::submit('login',['class'=>'btn']) }}
or
{{ Form::button('Sign up',['class'=>'btn btn-danger','data-dismiss'=>'modal','data-toggle'=>'modal','data-target'=>'#signup'])
}}
{{ Form::close() }}
</div>{{--close modal body --}}
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div> {{--close modal --}}
Where rows such as {{ Form::text('username', null, ['required'=>'1','placeholder'=>'Username','id'=>'user','class'=>'form-control']) }}
are Laravel 4 commands which generate input type="text" name="text" class="form-control pleceholder= ...
Please answer only for bootstrap 3..

Answer 1

You could use .form-horizontal, and put your glyphicon in an other column than the field :
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-1 col-sm-offset-3 control-label"><span class="glyphicon glyphicon-user"></span></label>
<div class="col-sm-5">
<input type="text" placeholder="Username" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-1 col-sm-offset-3 control-label"><span class="glyphicon glyphicon-lock"></span></label>
<div class="col-sm-5">
<input type="password" placeholder="Username" class="form-control"/>
</div>
</div>
<br/>
<input type="submit" class="btn btn-default" value="Login"/>
or
<input type="submit" class="btn btn-danger" value="Sign up"/>
</form>
Play with col-sm-x and col-sm-offset-x to get the width you need.
Bootply