content logo

Bootstrap Search Boxes:

Bootstrap Auto Expanding Search Box on Hover

A search bar is mostly made up of two elements in its user interface. The first one is a search field where you type in the input and the second one is a button. When you design a search box for your website, you need to keep in mind that the design of your search interface has a huge impact on how fast and easy the users can find the content they are searching for on your website. Your main goal has to be the convenience of your users and not the functionality of the search bar alone. Of course, you can always use one of the available Bootstrap search box templates on our website for free to help you get started.

In this post, we have a Bootstrap search bar with an auto expanding style. The code features a search box with a black and reddish orange theme. Normally, you can only see the search icon which is the magnifying glass but when you hover your mouse cursor over the button, it expands into an expanding search bar in which the users can type in the search input. They can click the search button to do the actual search. When you wanted the interface to close, you can stop hovering over the search bar. The CSS search bar is kind of unique and can help your website improve.

#

Bootstrap Search Box

#

CSS Search Bar

#

Auto Expanding Style

#

Expanding Search Bar

<!-- This script got from frontendfreecode.com -->
<div class="container h-100">
    <div class="d-flex justify-content-center h-100">
        <div class="searchbar">
            <input class="search_input" type="text" name="" placeholder="Search...">
            <a href="#" class="search_icon"><i class="fas fa-search"></i></a>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #e74c3c !important;
}
.searchbar {
    margin-bottom: auto;
    margin-top: auto;
    height: 60px;
    background-color: #353b48;
    border-radius: 30px;
    padding: 10px;
}
.search_input {
    color: white;
    border: 0;
    outline: 0;
    background: none;
    width: 0;
    caret-color: transparent;
    line-height: 40px;
    transition: width 0.4s linear;
}
.searchbar:hover > .search_input {
    padding: 0 10px;
    width: 320px;
    caret-color: red;
    transition: width 0.4s linear;
}
.searchbar:hover > .search_icon {
    background: white;
    color: #e74c3c;
}
.search_icon {
    height: 40px;
    width: 40px;
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: white;
    text-decoration: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" >
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" >
<style>
body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #e74c3c !important;
}
.searchbar {
    margin-bottom: auto;
    margin-top: auto;
    height: 60px;
    background-color: #353b48;
    border-radius: 30px;
    padding: 10px;
}
.search_input {
    color: white;
    border: 0;
    outline: 0;
    background: none;
    width: 0;
    caret-color: transparent;
    line-height: 40px;
    transition: width 0.4s linear;
}
.searchbar:hover > .search_input {
    padding: 0 10px;
    width: 320px;
    caret-color: red;
    transition: width 0.4s linear;
}
.searchbar:hover > .search_icon {
    background: white;
    color: #e74c3c;
}
.search_icon {
    height: 40px;
    width: 40px;
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: white;
    text-decoration: none;
}
</style>

</head>
<body>
<div class="container h-100">
    <div class="d-flex justify-content-center h-100">
        <div class="searchbar">
            <input class="search_input" type="text" name="" placeholder="Search...">
            <a href="#" class="search_icon"><i class="fas fa-search"></i></a>
        </div>
    </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