Bootstrap Search Boxes:

Bootstrap Simple Search Box with Gray Background

If you, as a website owner, have a large, complex website with hundreds of pages and links to other subpages, then you should definitely consider adding some means of searching for content. Adding a basic search function enables your visitors to find exactly what they are after in a few seconds; both saving time and avoid getting them so frustrated and mad that they leave your website. An example of this is e-commerce websites or a well-developed blog where there are far too many categories for an individual to look through.

This can be extremely difficult if someone is trying to find a certain item among all of those pages and links. The search bar that you have recently added can help them escape such situations where they get stuck in your navigation. If for some reason they cannot find any more reasonable places to go afterwards, then the search function helps them out. This way, you can ensure maximum performance from your website and the visitors will stay in your site for much longer times.

The code below features a CSS search box with a grey background. This Bootstrap search box is more than enough for your website as it offers all the basic elements of an effective search bar. This is also a right-side search box meaning it is located on the right side of the page. If you are interested, you can use this Bootstrap right side search box in your own website for literally no costs.

Right Side Search

Bootstrap Right Side Search

Bootstrap Search Box

CSS Search Box

<!-- This script got from frontendfreecode.com -->
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <!-- all the navigation stuff -->
    </div>
</nav>
<!-- main content -->
<div class="section-main">
    <div class="container" role="main">
        <div class="row">
            <div class="col-xs-12 col-md-6">
                <h2>Quite Long Header Text</h2>
            </div>
            <div class="col-xs-12 col-md-6">
                <form action="" method="GET" class="form-main form-inline nofloat-xs pull-right pull-left-sm">
                    <div class="form-group form-input-fields form-group-lg has-feedback">
                        <label class="sr-only" for="search">Search</label>
                        <div class="input-group">
                            <input type="text" class="form-control input-search" name="q" id="search" placeholder="Search" />
                            <span class="input-group-addon group-icon"> <span class="glyphicon glyphicon-user"></span> </span>
                        </div>

                        <button type="submit" class="btn btn-lg btn-success btn-submit"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> Search</button>
                    </div>
                </form>
            </div>
        </div>
        <!--rest of page content -->
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

.form-main {
    margin-top: 15px;
}
.form-input-fields {
    margin-bottom: 0;
}
.section-main {
    margin-top: 40px;
    background-color: lightgrey;
    padding: 20px 0;
}
.group-icon {
    background-color: #fff;
    border: 0;
}
.input-search {
    border: 1px solid #fff;
    box-shadow: none;
}
@media (max-width: 992px) {
    .pull-left-sm {
        float: left !important;
    }
}
@media (max-width: 767px) {
    .nofloat-xs {
        float: none !important;
    }
    .btn-submit {
        margin-top: 10px;
    }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
.form-main {
    margin-top: 15px;
}
.form-input-fields {
    margin-bottom: 0;
}
.section-main {
    margin-top: 40px;
    background-color: lightgrey;
    padding: 20px 0;
}
.group-icon {
    background-color: #fff;
    border: 0;
}
.input-search {
    border: 1px solid #fff;
    box-shadow: none;
}
@media (max-width: 992px) {
    .pull-left-sm {
        float: left !important;
    }
}
@media (max-width: 767px) {
    .nofloat-xs {
        float: none !important;
    }
    .btn-submit {
        margin-top: 10px;
    }
}
</style>

</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <!-- all the navigation stuff -->
    </div>
</nav>
<!-- main content -->
<div class="section-main">
    <div class="container" role="main">
        <div class="row">
            <div class="col-xs-12 col-md-6">
                <h2>Quite Long Header Text</h2>
            </div>
            <div class="col-xs-12 col-md-6">
                <form action="" method="GET" class="form-main form-inline nofloat-xs pull-right pull-left-sm">
                    <div class="form-group form-input-fields form-group-lg has-feedback">
                        <label class="sr-only" for="search">Search</label>
                        <div class="input-group">
                            <input type="text" class="form-control input-search" name="q" id="search" placeholder="Search" />
                            <span class="input-group-addon group-icon"> <span class="glyphicon glyphicon-user"></span> </span>
                        </div>

                        <button type="submit" class="btn btn-lg btn-success btn-submit"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> Search</button>
                    </div>
                </form>
            </div>
        </div>
        <!--rest of page content -->
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS