title: Dashes between credit card input using bootstrap grid
body: <p>I have the following code:</p>
  
  <pre><code>&lt;div class="row"&gt;
     &lt;div class="col-xs-3 col-sm-3"&gt;
          &lt;div class="form-group"&gt;
                &lt;input type="text" class="form-control card-input" maxlength="4" id="creditCardEntry1" placeholder="xxxx"&gt;
          &lt;/div&gt;  
     &lt;/div&gt;
     &lt;div class="col-xs-3 col-sm-3"&gt;
          &lt;div class="form-group"&gt;
               &lt;input type="text" class="form-control card-input" maxlength="4" id="creditCardEntry2" placeholder="xxxx"&gt;
          &lt;/div&gt;  
     &lt;/div&gt;
     &lt;div class="col-xs-3 col-sm-3"&gt;
          &lt;div class="form-group"&gt;
               &lt;input type="text" class="form-control card-input" maxlength="4" id="creditCardEntry3" placeholder="xxxx"&gt;
          &lt;/div&gt;  
      &lt;/div&gt;
    &lt;div class="col-xs-3 col-sm-3"&gt;
          &lt;div class="form-group"&gt;
               &lt;input type="text" class="form-control card-input" maxlength="4" id="creditCardEntry4" placeholder="xxxx"&gt;
          &lt;/div&gt;  
    &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Which looks good but my client wants a - between the first, second and third text field and I cant figure out how to do it using bootstrap which keeps its responsiveness.</p>
  
  <p>Like this:</p>
  
  <p>[     ] - [     ] - [      ] - [     ]</p>
  
  <p>I've tried imputing a - at the end of the input but it doesn't work at all. It looks like this: <a href="http://i.imgur.com/s92TPqx.jpg" rel="nofollow">http://i.imgur.com/s92TPqx.jpg</a></p>
  
  <p>All the class <code>card-input</code> does it <code>text-align:center</code></p>