jcadima
8/23/2018 - 8:08 PM

Bootstrap Input Fields with icons

NOTE: wrap the whole input group with:
<div class="form-group">
   ...  
</div>

To get default padding spacing


============= WITHOUT LABELS ======================

Input Field for File with PDF icon
<div class="input-group">                      
    <div class="input-group-addon">
        <i class="fa fa-file-pdf-o"></i>
    </div>
    <input type="file" class="form-control pull-right" id="pdf_filename" name="pdf_filename">
</div>   


Input Fields for Name with user icon

<div class="input-group">                      
    <div class="input-group-addon">
        <i class="fa fa-user-o"></i>
    </div>
    <input type="text" class="form-control pull-right"  name="name" value="{{ $member->name }}">
</div>   


Input Field with file input with image icon
<div class="input-group">                      
    <div class="input-group-addon">
        <i class="fa fa-file-image-o"></i>
    </div>
    <input type="file" class="form-control pull-right" id="picture" name="picture">
</div>  


Text Area for Message
<div class="form-group">
  <div class="input-group input-group-lg">
    <div class="input-group-prepend">
    <span class="input-group-text"><i class="fa fa-globe"></i></span>
  </div>
    <textarea class="form-control" placeholder="Message" rows="5"></textarea>
  </div>
</div>


Select DropDown

<div class="input-group">                      
  <div class="input-group-addon">
      <i class="fa fa-window-maximize"></i>
  </div>

  <select class="form-control" name="banner" id="banner">
      <option value="1">Yes</option>
      <option value="0">No</option>				
  </select>
</div> 



============ WITH LABELS ===========

<div class="form-group">
    <label for="title">Title</label>
    <div class="input-group">                      
        <div class="input-group-addon">
            <i class="fa fa-user-o"></i>
        </div>
        <input type="text" class="form-control pull-right"  name="name" value="{{ $member->name }}">
    </div>   
</div>


Text Area
<div class="form-group">
    <label for="title">Message</label>
    <div class="input-group">                      
        <div class="input-group-addon">
            <i class="fa fa-pencil"></i>
        </div>
        <textarea name="meta_description" id="meta_description" cols="5" rows="5" class="form-control">{{ $home->meta_description }}</textarea>
    </div>   
</div>


Select DropDown
<div class="form-group">
    <label for="">Hide Page Banner?</label>

    <div class="input-group">                      
            <div class="input-group-addon">
                <i class="fa fa-window-maximize"></i>
            </div>

            <select class="form-control" name="banner" id="banner">
                <option value="1">Yes</option>
                <option value="0">No</option>				
            </select>
    </div> 
</div>