Twitter Bootstrap 3 Input and icon do not display inline

Question

My problem is that I cannot display my glyphicon before my inputs.

problem

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">&times;    </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/>

       {{'          &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   
       '}}


       {{ 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..

zessx zessx · Accepted Answer · 2013-12-04T19:38:15

You could use .form-horizontal, and put your glyphicon in an other column than the field :

enter image description here

<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"/>
    &nbsp;or&nbsp;
    <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

Twitter Bootstrap 3 Input and icon do not display inline

1 Answers