Bootstrap 5 Search Box with Options

Bootstrap Search Boxes: Bootstrap 5 Search Box with Options

An efficient search tool is a need in websites that deal with different services, products, articles, etc. But why do you use a simple box only? You can easily improve the search box view with the aid of Bootstrap and make it responsive. Besides, it is a good idea to add some extra buttons below the box to help users categorize or filter their search results more easily.

#CSS Search Box #Bootstrap Search Code #Graphical Search Box

<!-- this script got from www.frontendfreecode.com -->
<div class="container-fluid mt-4 m-0 " >
    <div class="row d-flex justify-content-center">
        <div class="col-12">
            <div class="card p-4 mt-3 bg-light">
                <h3 class="heading mt-5 text-center">Hi! How can we help You?</h3>
                <div class="d-flex justify-content-center px-5">
                    <div class="search"> <input type="text" class="search-input" placeholder="Search..." name=""> <a href="#" class="search-icon"> <i class="fa fa-search"></i> </a> </div>
                </div>
                <div class="row mt-4 g-1 px-4 mb-5">
                    <div class="col-sm-2">
                        <div class="card-inner p-3 d-flex flex-column align-items-center"> <img src="https://i.imgur.com/Mb8kaPV.png" width="50">
                            <div class="text-center mg-text"> <span class="mg-text">Account</span> </div>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <div class="card-inner p-3 d-flex flex-column align-items-center"> <img src="https://i.imgur.com/ueLEPGq.png" width="50">
                            <div class="text-center mg-text"> <span class="mg-text">Payments</span> </div>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <div class="card-inner p-3 d-flex flex-column align-items-center"> <img src="https://i.imgur.com/tmqv0Eq.png" width="50">
                            <div class="text-center mg-text"> <span class="mg-text">Delivery</span> </div>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <div class="card-inner p-3 d-flex flex-column align-items-center"> <img src="https://i.imgur.com/D0Sm15i.png" width="50">
                            <div class="text-center mg-text"> <span class="mg-text">Product</span> </div>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <div class="card-inner p-3 d-flex flex-column align-items-center"> <img src="https://i.imgur.com/Z7BJ8Po.png" width="50">
                            <div class="text-center mg-text"> <span class="mg-text">Return</span> </div>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <div class="card-inner p-3 d-flex flex-column align-items-center"> <img src="https://i.imgur.com/YLsQrn3.png" width="50">
                            <div class="text-center mg-text"> <span class="mg-text">Guarantee</span> </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a>

body {
    background-color: blue
}

.card {
    border: none;
    background: #eee
}

.search {
    width: 100%;
    margin-bottom: auto;
    margin-top: 20px;
    height: 50px;
    background-color: #fff;
    padding: 10px;
    border-radius: 5px
}

.search-input {
    color: white;
    border: 0;
    outline: 0;
    background: none;
    width: 0;
    margin-top: 5px;
    caret-color: transparent;
    line-height: 20px;
    transition: width 0.4s linear
}

.search .search-input {
    padding: 0 10px;
    width: 100%;
    caret-color: #536bf6;
    font-size: 19px;
    font-weight: 300;
    color: black;
    transition: width 0.4s linear
}

.search-icon {
    height: 34px;
    width: 34px;
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    background-color: #536bf6;
    font-size: 10px;
    bottom: 30px;
    position: relative;
    border-radius: 5px
}

.search-icon:hover {
    color: #fff !important
}

a:link {
    text-decoration: none
}

.card-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: .25rem;
    border: none;
    cursor: pointer;
    transition: all 2s
}

.card-inner:hover {
    transform: scale(1.1)
}

.mg-text span {
    font-size: 12px
}

.mg-text {
    line-height: 14px
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- this script got from www.frontendfreecode.com -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<style>
body {
    background-color: blue
}

.card {
    border: none;
    background: #eee
}

.search {
    width: 100%;
    margin-bottom: auto;
    margin-top: 20px;
    height: 50px;
    background-color: #fff;
    padding: 10px;
    border-radius: 5px
}

.search-input {
    color: white;
    border: 0;
    outline: 0;
    background: none;
    width: 0;
    margin-top: 5px;
    caret-color: transparent;
    line-height: 20px;
    transition: width 0.4s linear
}

.search .search-input {
    padding: 0 10px;
    width: 100%;
    caret-color: #536bf6;
    font-size: 19px;
    font-weight: 300;
    color: black;
    transition: width 0.4s linear
}

.search-icon {
    height: 34px;
    width: 34px;
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    background-color: #536bf6;
    font-size: 10px;
    bottom: 30px;
    position: relative;
    border-radius: 5px
}

.search-icon:hover {
    color: #fff !important
}

a:link {
    text-decoration: none
}

.card-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: .25rem;
    border: none;
    cursor: pointer;
    transition: all 2s
}

.card-inner:hover {
    transform: scale(1.1)
}

.mg-text span {
    font-size: 12px
}

.mg-text {
    line-height: 14px
}
</style>

</head>
<body>
<div class="container-fluid mt-4 m-0 " >
    <div class="row d-flex justify-content-center">
        <div class="col-12">
            <div class="card p-4 mt-3 bg-light">
                <h3 class="heading mt-5 text-center">Hi! How can we help You?</h3>
                <div class="d-flex justify-content-center px-5">
                    <div class="search"> <input type="text" class="search-input" placeholder="Search..." name=""> <a href="#" class="search-icon"> <i class="fa fa-search"></i> </a> </div>
                </div>
                <div class="row mt-4 g-1 px-4 mb-5">
                    <div class="col-sm-2">
                        <div class="card-inner p-3 d-flex flex-column align-items-center"> <img src="https://i.imgur.com/Mb8kaPV.png" width="50">
                            <div class="text-center mg-text"> <span class="mg-text">Account</span> </div>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <div class="card-inner p-3 d-flex flex-column align-items-center"> <img src="https://i.imgur.com/ueLEPGq.png" width="50">
                            <div class="text-center mg-text"> <span class="mg-text">Payments</span> </div>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <div class="card-inner p-3 d-flex flex-column align-items-center"> <img src="https://i.imgur.com/tmqv0Eq.png" width="50">
                            <div class="text-center mg-text"> <span class="mg-text">Delivery</span> </div>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <div class="card-inner p-3 d-flex flex-column align-items-center"> <img src="https://i.imgur.com/D0Sm15i.png" width="50">
                            <div class="text-center mg-text"> <span class="mg-text">Product</span> </div>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <div class="card-inner p-3 d-flex flex-column align-items-center"> <img src="https://i.imgur.com/Z7BJ8Po.png" width="50">
                            <div class="text-center mg-text"> <span class="mg-text">Return</span> </div>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <div class="card-inner p-3 d-flex flex-column align-items-center"> <img src="https://i.imgur.com/YLsQrn3.png" width="50">
                            <div class="text-center mg-text"> <span class="mg-text">Guarantee</span> </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="bcl"><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a></div>

</body>
</html>

Preview

RECENT CODES

Bootstrap Header Menu with Dynamic Height

Bootstrap Pricing Table with Color Change

Bootstrap Assigning Project List

Bootstrap Accordion Form Wizard

Bootstrap Grids with Various Hover Effect

Bootstrap Image Gallery with Zoom Effect

Bootstrap Users Profile with Tabs

Bootstrap Pricing Table with Zoom Effect

Bootstrap Shopping Cart Table

Bootstrap Dark/Light Switching Header Menu

Feel The Power

Bootstrap Search Boxes: Bootstrap 5 Search Box with Options

What are You Looking for?

Watch how to Create the Tool!

The Tool Demo