Crazy CSS Bootstrap Form Nightmare

[Anonymous]

In this bootstrap form I cant figure out how to get the calendar icon to the right of the input where it should go. I’ve tried everything, not that I know much =) Any ideas? I’ve literally played with it for 5 hours now.

    <h4 style='color:#310fac; margin-bottom:10px;'>Enter Manual Volunteer Hours</h4>
    <form class="form-horizontal">
    <fieldset>
    
    <div id=clock_in class="form-group input-append">
      <label style='margin-top:25px;' class="col-md-4 control-label" for="clock_in">Date / Time Clocked In</label>  
      <div class="col-md-4">      
        <span class="add-on">
            <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
        </span>  
      <input data-format="MM/dd/yyyy HH:mm:ss PP" name="clock_in" type="text" placeholder="Date / Time Clocked In" class="form-control input-md" required="">
      </div>
    </div>
    
    
    <div id=clock_out class="form-group input-append">
      <label style='margin-top:25px;' class="col-md-4 control-label" for="clock_out">Date / Time Clocked Out</label>  
      <div class="col-md-4">      
        <span class="add-on">
            <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
        </span>  
      <input data-format="MM/dd/yyyy HH:mm:ss PP" name="clock_out" type="text" placeholder="Date / Time Clocked Out" class="form-control input-md" required="">
      </div>
    </div>
    
    
    <div class="form-group">
      <label class="col-md-4 control-label" for="selectbasic">Job Performed</label>
      <div class="col-md-4">
        <select id="selectbasic" name="selectbasic" class="form-control">
          <option value="1">Option one</option>
          <option value="2">Option two</option>
        </select>
      </div>
    </div>
    
    
    <div class="form-group">
      <label class="col-md-4 control-label" for="submit"></label>
      <div class="col-md-4">
        <button id="submit" name="submit" class="btn btn-primary">Submit For Approval</button>
      </div>
    </div>
    
    </fieldset>
    </form>

 

[ahmedarain34]

To place the calendar icon to the right of the input field, you can make use of Bootstrap's input group component. Here's an updated version of your code with the calendar icon aligned to the right of the input field:
<h4 style='color:#310fac; margin-bottom:10px;'>Enter Manual Volunteer Hours</h4>
<form class="form-horizontal">
<fieldset>

<div id="clock_in" class="form-group">
<label style='margin-top:25px;' class="col-md-4 control-label" for="clock_in">Date / Time Clocked In</label>
<div class="col-md-4">
<div class="input-group">
<input data-format="MM/dd/yyyy HH:mm:ss PP" name="clock_in" type="text" placeholder="Date / Time Clocked In" class="form-control input-md" required="">
<span class="input-group-addon">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
</div>
</div>


<div id="clock_out" class="form-group">
<label style='margin-top:25px;' class="col-md-4 control-label" for="clock_out">Date / Time Clocked Out</label>
<div class="col-md-4">
<div class="input-group">
<input data-format="MM/dd/yyyy HH:mm:ss PP" name="clock_out" type="text" placeholder="Date / Time Clocked Out" class="form-control input-md" required="">
<span class="input-group-addon">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
</div>
</div>


<div class="form-group">
<label class="col-md-4 control-label" for="selectbasic">Job Performed</label>
<div class="col-md-4">
<select id="selectbasic" name="selectbasic" class="form-control">
<option value="1">Option one</option>
<option value="2">Option two</option>
</select>
</div>
</div>


<div class="form-group">
<label class="col-md-4 control-label" for="submit"></label>
<div class="col-md-4">
<button id="submit" name="submit" class="btn btn-primary">Submit For Approval</button>
</div>
</div>

</fieldset>
</form>

In the updated code, I've wrapped each input field with a <div> having the input-group class. Inside this wrapper, the input field comes first, followed by the calendar icon wrapped inside a <span> with the input-group-addon class. This structure aligns the icon to the right of the input field within the form group.