content logo

Bootstrap Search Boxes:

Bootstrap Search Bar with Rating Option

Search bars are one of the most important features of each website and they have a significant effect on the user experience of your website. Due to this importance, you need to put more effort into designing the best and most professional search box for your website. A proper search box can boost your traffic, attract more visitors, and display your site more professional. Of course, you can always go for a simple Bootstrap search bar but why do that when you can add small features to it and make it four times better.

This post shows one of the many great features you can add with a search bar. Some of the websites have user ratings on their contents or maybe even some other type of rating system. These websites can use the rating system to design a Bootstrap rating option as a filter. This way, users can search for content with a particular rating. The Bootstrap search filter allows you to search for your desired keywords alongside the rating (i.e. 5 stars). In other words, the filter system works the same way as ranking the content. This is a search with rating and you can have it for free as all of our codes are offered without any cost.

#

Bootstrap Search Filter

#

Search with Rating

#

Bootstrap Search Bar

#

Bootstrap Rating Option

<!-- This script got from frontendfreecode.com -->
<section class="search-sec">
    <div class="container">
        <form action="#" method="post" novalidate="novalidate">
            <div class="row">
                <div class="col-lg-12">
                    <div class="row">
                        <div class="col-lg-3 col-md-3 col-sm-12 p-0">
                            <input type="text" class="form-control search-slt" placeholder="Enter Search">
                        </div>
                        <div class="col-lg-3 col-md-3 col-sm-12 p-0">
                            <select class="form-control search-slt">
                                <option>Choose Rating</option>
<!--                               4 stars and up -->
                                <option>
                                  <a><p>&#9733; &#9733; &#9733; &#9733; &#x2606;</p></a href="#">
                                </option>
<!--                               3 stars and up -->
                                <option>
                                    <a><p>&#9733; &#9733; &#9733; &#x2606; &#x2606;</p></a href="#">
                                </option>
  <!--                               2 stars and up -->
                                <option>
                                    <a><p>&#9733; &#9733; &#x2606; &#x2606; &#x2606;</p></a href="#">
                                </option>
  <!--                               1 star and up -->
                                <option>
                                    <a><p>&#9733; &#x2606; &#x2606; &#x2606; &#x2606;</p></a href="#">
                                </option>
                            </select>
                        </div>
                        <div class="col-lg-3 col-md-3 col-sm-12 p-0">
                            <button type="button" class="btn btn-danger wrn-btn">Search</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</section><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
.search-sec {
    padding: 2rem;
}
.search-slt {
    display: block;
    width: 100%;
    font-size: 0.875rem;
    line-height: 1.5;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    height: calc(3rem + 2px) !important;
    border-radius: 0;
}
.wrn-btn {
    width: 100%;
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
    height: calc(3rem + 2px) !important;
    border-radius: 0;
}
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css'>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" >
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css'>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" >
<style>
.search-sec {
    padding: 2rem;
}
.search-slt {
    display: block;
    width: 100%;
    font-size: 0.875rem;
    line-height: 1.5;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    height: calc(3rem + 2px) !important;
    border-radius: 0;
}
.wrn-btn {
    width: 100%;
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
    height: calc(3rem + 2px) !important;
    border-radius: 0;
}
</style>

</head>
<body>
<section class="search-sec">
    <div class="container">
        <form action="#" method="post" novalidate="novalidate">
            <div class="row">
                <div class="col-lg-12">
                    <div class="row">
                        <div class="col-lg-3 col-md-3 col-sm-12 p-0">
                            <input type="text" class="form-control search-slt" placeholder="Enter Search">
                        </div>
                        <div class="col-lg-3 col-md-3 col-sm-12 p-0">
                            <select class="form-control search-slt">
                                <option>Choose Rating</option>
<!--                               4 stars and up -->
                                <option>
                                  <a><p>&#9733; &#9733; &#9733; &#9733; &#x2606;</p></a href="#">
                                </option>
<!--                               3 stars and up -->
                                <option>
                                    <a><p>&#9733; &#9733; &#9733; &#x2606; &#x2606;</p></a href="#">
                                </option>
  <!--                               2 stars and up -->
                                <option>
                                    <a><p>&#9733; &#9733; &#x2606; &#x2606; &#x2606;</p></a href="#">
                                </option>
  <!--                               1 star and up -->
                                <option>
                                    <a><p>&#9733; &#x2606; &#x2606; &#x2606; &#x2606;</p></a href="#">
                                </option>
                            </select>
                        </div>
                        <div class="col-lg-3 col-md-3 col-sm-12 p-0">
                            <button type="button" class="btn btn-danger wrn-btn">Search</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</section><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>
Preview