bootstrap3 form / How to "pull-left" an input-group-addon

0
votes

I have a form builded with Bootstrap 3 and Ace Admin theme.

In this form, I have form groups with addons but addons are not stucked with input field.

<div class="col-md-3">
  <div class="input-group">
    <input type="date" name="dateActivation" id="dateActivation" class="input-control">
      <span class="input-group-addon">
        <i class="ace-icon fa fa-calendar"></i>
      </span>
  </div>
</div>

How to stuck the addon with the input field ?

I don't want to use "form-control text-left" classes because the size of my input field will be changed.

I tried that : 

<div class="col-md-3">
  <div class="input-group pull-left">
    <input type="date" name="dateActivation" id="dateActivation" class="input-control pull-right">
      <span class="input-group-addon">
        <i class="ace-icon fa fa-calendar"></i>
      </span>
  </div>
</div>

It do the job for input field & addon but the pull-left doesn't work.

An idea ?

Here is the fiddle

1
htmlcsstwitter-bootstraptwitter-bootstrap-3

1 Answers

0
votes

The class for the date input needs to change to form-control

Demo Fiddle

Change your HTML to:

  <div class="input-group">
    <input type="date" name="dateActivation" id="dateActivation" class="form-control"> 
    <span class="input-group-addon">
      <i class="ace-icon fa fa-calendar"></i>
    </span>
  </div>