Bootstrap 4 Search Box with Search Icon
By Güngör Budak
- 2 minutes read - 255 wordsBootstrap 4 is a very handy library to generate quick web user interfaces for web pages and web applications. Search box is a very fundamental UI element if the web page is providing some content and in this post I’ll describe some styles that make a nice text input for search box.
To accomplish this, I’ll make use of the default way of form validations in Bootstrap 3 which was removed in Bootstrap 4 because it doesn’t support font icons anymore. But the below solution will for work Bootstrap 4. Check this pen if you’re looking for a solution in Bootstrap 3 .
This solution is also using Font Awesome font icons but it can be done with any other font icon.
After you include Bootstrap 4 and Font Awesome CSS files, use below HTML and CSS to display the box as shown in the pen below.
1<div class="form-group has-search">
2 <span class="fa fa-search form-control-feedback"></span>
3 <input type="text" class="form-control" placeholder="Search">
4</div>
In this HTML code, .has-search
is something new Bootstrap 4 doesn’t have. So here are those class styles:
1.has-search .form-control {
2 padding-left: 2.375rem;
3}
4
5.has-search .form-control-feedback {
6 position: absolute;
7 z-index: 2;
8 display: block;
9 width: 2.375rem;
10 height: 2.375rem;
11 line-height: 2.375rem;
12 text-align: center;
13 pointer-events: none;
14 color: #aaa;
15}
This way, .has-search
will place given font icon for search icon correctly left to the search box. Find this search box below, I also have a version with an actual button but this one uses built-in styles.