title: Unwanted space between two columns of form in bootstrap
body: <p>I want to create tooltip for input box similar to this.<a href="https://i.stack.imgur.com/0iFy8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0iFy8.png" alt="enter image description here"></a>  </p>
  
  <p>But when I try in my code there is too much space left in between input box and tooltip as shown in below image. I am using two different columns for input box and tooltip. 
  <a href="https://i.stack.imgur.com/WIT8P.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WIT8P.png" alt="enter image description here"></a></p>
  
  <p>My Code for username &amp; tooltip row is as follows:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  
  &lt;div class="row"&gt;
  &lt;div class="col-xs-0 col-sm-3"&gt;&lt;/div&gt;
  &lt;div class="col-xs-11 col-sm-4"&gt;
    &lt;form action="&lt;?php echo base_url('loginclient/verify'); ?&gt;" method="post" name="login_form" onsubmit=" return validateForm()"&gt;
    &lt;div class="form-group"&gt;
    &lt;input type="text" class="form-control" name="username" placeholder="username" autofocus="autofocus" pattern="([^ ]){6,}" title="Minimum length is 6, without any space." required="" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-xs-1 col-sm-1" style="background-color:pink"&gt;
    &lt;a class="pull-left" data-toggle="tooltip" data-placement="bottom" title="Enter your username"&gt;?&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="col-xs-0 col-sm-4"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>