Bootstrap Search Boxes:

Bootstrap Full Screen Search Form

One of the most important components to put into your website when designing it is a search bar. Adding a search function is a strategy used by many web owners. It offers a great way to the users to find the content they want and need. With such feature, your visitors are able to locate any content they wish by simply searching for a certain keyword or phrase. It especially helps the new visitors. They have no understanding of how to navigate through your website’s structure but a search bar offers a fast and efficient way to find content. this is especially beneficial to larger and more complex websites with hundreds of subpages and links.

Sometimes, designing a good Bootstrap search box can be time consuming and you don’t want to use a simple design either. For those of you who face this problem, we have a Bootstrap search field template perfect for any website. You don’t have to worry about running out of physical space in your website anymore as this search box templates lets you search in navbar. It’s literally a beautiful navbar with a search box popup featured in it. Also, the light red and white colour scheme is perfect and the options are designed well.

Bootstrap Search Box

Bootstrap Search Feild

Search in Navbar

Search Box Popup

<!-- This script got from frontendfreecode.com -->
<div class="container">
    <div class="row">
        <nav class="navbar navbar-inverse">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-3">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Your Brand</a>
                </div>
                <div class="collapse navbar-collapse" id="navbar-collapse-3">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Works</a></li>
                        <li><a href="#">News</a></li>
                        <li><a href="#">Contact</a></li>
                        <li class="s-icon">
                            <a href="#" id="addClass"><span class="glyphicon glyphicon-search"></span></a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div id="qnimate" class="off">
            <div id="search" class="open">
                <button data-widget="remove" id="removeClass" class="close" type="button">×</button>
                <form action="http://bootsnipp.com/user/snippets/508jR" method="" autocomplete="off">
                    <input type="text" placeholder="Type search keywords here" value="" name="term" id="term" />
                    <button class="btn btn-lg btn-site" type="submit"><span class="glyphicon glyphicon-search"></span> Search</button>
                </form>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

body {
    font-family: "Open Sans", sans-serif;
}
.popup-box-on {
    display: block !important;
}
.off {
    display: none;
}
.chat_box .chat_message_wrapper ul.chat_message > li + li {
    margin-top: 4px;
}
#search.open {
    opacity: 1;
    transform: translate(0px, 0px) scale(1, 1);
}
#search {
    background-color: #fff;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    transition: all 0.5s ease-in-out 0s;
    width: 100%;
    z-index: 2000;
}
#search .close {
    color: #be5254;
    font-size: 40px;
    opacity: 1;
    padding: 10px 17px;
    position: fixed;
    right: 15px;
    top: 15px;
}
button.close {
    background: transparent none repeat scroll 0 0;
    border: 0 none;
    cursor: pointer;
}
.close {
    float: right;
    font-weight: bold;
    line-height: 1;
    text-shadow: 0 1px 0 #fff;
}
#search input[type="text"] {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 0 none;
    color: #333;
    font-family: "Open Sans", sans-serif;
    font-size: 50px;
    font-weight: 300;
    margin: -51px auto 0;
    outline: medium none;
    padding-left: 30px;
    padding-right: 30px;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 100%;
}
#search .btn {
    left: 50%;
    margin-top: 60px;
    padding: 10px 50px;
    position: absolute;
    top: 50%;
    transform: translateX(-50%);
}
nav {
    background: #be5254 none repeat scroll 0 0 !important;
    border: medium none !important;
    border-radius: 5px !important;
    padding: 20px;
}
.s-icon a {
    background: #fff none repeat scroll 0 0 !important;
    border-radius: 40px !important;
    color: #be5254 !important;
    font-size: 26px;
    height: 44px;
    margin: 3px 20px 0 0;
    padding: 7px 0 0 !important;
    text-align: center;
    width: 44px;
}
.navbar-inverse .navbar-nav > li > a {
    color: #fff;
}
.navbar-inverse .navbar-brand {
    background: #fff none repeat scroll 0 0 !important;
    border-radius: 50px;
    color: #be5254 !important;
    height: auto;
    margin: 3px 0 2px -12px !important;
    padding: 12px 20px !important;
}
.btn-lg,
.btn-group-lg > .btn {
    border-radius: 153px;
    font-size: 29px;
}
.btn-site {
    background: #be5254 none repeat scroll 0 0;
    color: #fff !important;
}

$(function () {
    $("#addClass").click(function () {
        $("#qnimate").addClass("popup-box-on");
    });
    $("#removeClass").click(function () {
        $("#qnimate").removeClass("popup-box-on");
    });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<style>
body {
    font-family: "Open Sans", sans-serif;
}
.popup-box-on {
    display: block !important;
}
.off {
    display: none;
}
.chat_box .chat_message_wrapper ul.chat_message > li + li {
    margin-top: 4px;
}
#search.open {
    opacity: 1;
    transform: translate(0px, 0px) scale(1, 1);
}
#search {
    background-color: #fff;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    transition: all 0.5s ease-in-out 0s;
    width: 100%;
    z-index: 2000;
}
#search .close {
    color: #be5254;
    font-size: 40px;
    opacity: 1;
    padding: 10px 17px;
    position: fixed;
    right: 15px;
    top: 15px;
}
button.close {
    background: transparent none repeat scroll 0 0;
    border: 0 none;
    cursor: pointer;
}
.close {
    float: right;
    font-weight: bold;
    line-height: 1;
    text-shadow: 0 1px 0 #fff;
}
#search input[type="text"] {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 0 none;
    color: #333;
    font-family: "Open Sans", sans-serif;
    font-size: 50px;
    font-weight: 300;
    margin: -51px auto 0;
    outline: medium none;
    padding-left: 30px;
    padding-right: 30px;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 100%;
}
#search .btn {
    left: 50%;
    margin-top: 60px;
    padding: 10px 50px;
    position: absolute;
    top: 50%;
    transform: translateX(-50%);
}
nav {
    background: #be5254 none repeat scroll 0 0 !important;
    border: medium none !important;
    border-radius: 5px !important;
    padding: 20px;
}
.s-icon a {
    background: #fff none repeat scroll 0 0 !important;
    border-radius: 40px !important;
    color: #be5254 !important;
    font-size: 26px;
    height: 44px;
    margin: 3px 20px 0 0;
    padding: 7px 0 0 !important;
    text-align: center;
    width: 44px;
}
.navbar-inverse .navbar-nav > li > a {
    color: #fff;
}
.navbar-inverse .navbar-brand {
    background: #fff none repeat scroll 0 0 !important;
    border-radius: 50px;
    color: #be5254 !important;
    height: auto;
    margin: 3px 0 2px -12px !important;
    padding: 12px 20px !important;
}
.btn-lg,
.btn-group-lg > .btn {
    border-radius: 153px;
    font-size: 29px;
}
.btn-site {
    background: #be5254 none repeat scroll 0 0;
    color: #fff !important;
}
</style>

</head>
<body>
<div class="container">
    <div class="row">
        <nav class="navbar navbar-inverse">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-3">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Your Brand</a>
                </div>
                <div class="collapse navbar-collapse" id="navbar-collapse-3">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Works</a></li>
                        <li><a href="#">News</a></li>
                        <li><a href="#">Contact</a></li>
                        <li class="s-icon">
                            <a href="#" id="addClass"><span class="glyphicon glyphicon-search"></span></a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div id="qnimate" class="off">
            <div id="search" class="open">
                <button data-widget="remove" id="removeClass" class="close" type="button">×</button>
                <form action="http://bootsnipp.com/user/snippets/508jR" method="" autocomplete="off">
                    <input type="text" placeholder="Type search keywords here" value="" name="term" id="term" />
                    <button class="btn btn-lg btn-site" type="submit"><span class="glyphicon glyphicon-search"></span> Search</button>
                </form>
            </div>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
$(function () {
    $("#addClass").click(function () {
        $("#qnimate").addClass("popup-box-on");
    });
    $("#removeClass").click(function () {
        $("#qnimate").removeClass("popup-box-on");
    });
});
</script>

</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