title: How do I create a rounded search bar in Bootstrap 3?
body: <p>I have an issue creating a rounded search bar using Bootstrap 3.
  I've tried using class="search-query" and also using 
  the following example: </p>
  
  <h2>HTML:</h2>
  
  <pre><code>&lt;div style="padding:20px;"&gt;
      &lt;form class="form-search form-inline"&gt;
          &lt;input type="text" class="search-query" placeholder="Search..." /&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>CSS:</h2>
  
  <pre><code>input.search-query {
      padding-left:26px;
  }
  
  form.form-search {
      position: relative;
  }
  
  form.form-search:before {
      content:'';
      display: block;
      width: 14px;
      height: 14px;
      background-image: url(http://getbootstrap.com/2.3.2/assets/img/glyphicons-halflings.png);
      background-position: -48px 0;
      position: absolute;
      top:8px;
      left:8px;
      opacity: .5;
      z-index: 1000;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/qdGZy/" rel="nofollow noreferrer">http://jsfiddle.net/qdGZy/</a></p>
  
  <p>Unfortunately, nothing helps. </p>
  
  <p>I need to make a search bar as the attached image.
  I'm sure it can be done via Bootstrap 3 instead of
  usign manual html5/css but I don't know how.</p>
  
  <p>I'm using the CDN:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"&gt;
  </code></pre>
  
  <p>  </p>
  
  <p>Can you please help me ? :) </p>
  
  <p><a href="https://i.stack.imgur.com/Im2gv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Im2gv.png" alt="enter image description here"></a></p>