How do I create a rounded search bar in Bootstrap 3?

Question

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:

HTML:

<div style="padding:20px;">
    <form class="form-search form-inline">
        <input type="text" class="search-query" placeholder="Search..." />
    </form>
</div>

CSS:

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;
}

http://jsfiddle.net/qdGZy/

Unfortunately, nothing helps.

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.

I'm using the CDN:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

Can you please help me ? :)

If you're wanting that search bar to be 100% Bootstrap it's not possible. You will need to create *some* custom css. — Drew Kennedy, Mar 29 '16 at 16:16
You can refer to [this answer](http://stackoverflow.com/a/18839305/4204026) — Drew Kennedy, Mar 29 '16 at 16:27

score 1 · Answer 1 · answered Mar 29 '16 at 16:30

Didn't manage to replicate exactly what you wanted, but I think is close enough.

Referred to Bootstrap Form Control Validation State for inspiration.

P/S: If you want to fine tune the style, I think you can try to adjust padding of .input-group-addon or #inputGroupSuccess1.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group has-feedback">
  <div class="input-group">
    <span class="input-group-addon" style="background-color:#FFFFFF;"><span class="glyphicon glyphicon-search"></span></span>
    <input type="text" class="form-control" id="inputGroupSuccess1" placeholder="Search..." style="border-left: 0px;">
  </div>
</div>

Hope this helps.

score 0 · Answer 2 · edited Mar 29 '16 at 22:40

0

In your CSS, set:

form-query {
    border-radius: 33px;
}

edited Mar 29 '16 at 22:40

Hatchet

5,320
1
30
42

answered Mar 29 '16 at 15:58

Argiris A

156
2
20

Hi Argiris, The thing is that i'm not using a button-class in my solution. How it can be solved ? – EVH671 Mar 29 '16 at 15:59
I need it to be circular like what I've attached. Sorry for the bothering but I'm a newbie in bootstrap and I need it urgently for my workplace – EVH671 Mar 29 '16 at 16:18
A border-radius WILL make it circular, you just need to make sure you are using that on the correct element - you need to use it on the - so according to your posted code ".search-query" would do the job. Side note since your a newb: everyone's question is urgent in their own mind, a simple search would have turned up a LOT of results: https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=css3%20input%20rounded%20corners – patricksweeney Mar 29 '16 at 16:26

score 0 · Answer 3 · answered Jan 04 '18 at 20:09

I know this question is a little old but perhaps some one will still find this useful.

The following bootstrap code will work:

HTML

   <div class="input-group">
    <input type="text" class="form-control search-form" 
     placeholder="Search">
     <span class="input-group-btn">
       <button type="submit" 
       class="btn search-btn" data-target="#search-form" 
       name="q">
         <i class="fa fa-search"><!--FONT AWESOME font @ 
         "http://fortawesome.github.io/Font-Awesome/" --></i>
       </button>
     </span>
   </div>

CSS

.search-form {
  border-radius: 30px 0px 0px 30px;
  /*border-radius: Top-left, Top-right, Bottom-right, Bottom-left;*/
}

.search-btn {
  border-radius: 0px 30px 30px 0px;
  cursor:pointer;
  background-color: white;
 }

See Source [http://jsfiddle.net/blayderunner123/C5Eq7/][1]

Note: this requires Font awesome.

As you see, a little custom CSS is still required, but all it really is is adding a border-radius to achieve the rounding

The .search-btn containing the font awesome search icon looks just like it is a part of the actual input element by making it white and also giving it a border-radius

score -2 · Answer 4 · answered Mar 29 '16 at 16:06

-2

Use the following code:

      <input type="text" class="form-control" placeholder="Search" />

Refer demo.

answered Mar 29 '16 at 16:06

Shashank

2,010
2
18
38

isn't rounded and no search icon – ayvazj Sep 10 '16 at 16:33

How do I create a rounded search bar in Bootstrap 3?

HTML:

CSS:

4 Answers4

HTML

CSS