How do I create a rounded search bar in Bootstrap 3?
<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>