Search Bar Bootstrap
Introduction
The search box is a crucial element in any website or application that allows users to quickly find relevant information. So In this article, we will see how to create an attractive search box in Bootstrap with examples.
Why search box?
The search box is used to search for a specific piece of information from a collection of information. If we enter a specific keyword in the search box, it will filter and display relevant information.
Examples:
In this example, we will create ‘ionicons‘ cdn link to create a search icon.
<!DOCTYPE html>
<html>
<head>
<title>Create search box</title>
<!--Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<!--Icnicons-->
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
</head>
<style type="text/css">
.h-search-form{
position: relative;
padding: 100px;
background: skyblue;
}
.h-search-form input{
width: 70%;
padding: 0 30px;
border-radius: 50px;
border: none;
font-weight: 600;
font-size: 16px;
text-transform: capitalize;
position: relative;
color: #333;
height: 70px;
}
.h-search-form button{
position: relative;
right: 110px;
height: 60px;
color: #fff;
background: blue;
top: px;
border-radius: 50px;
border: none;
width: 100px;
}
.h-search-form button:hover{
background: darkblue;
}
</style>
<body>
<div class="h-search-form text-center">
<form action="#">
<input type="search" name="search" placeholder="Search..">
<button><ion-icon class="bi bi-search" name="search-outline"></ion-icon></button>
</form>
</div>
</body>
</html>Output:
See the Pen
Bootstrap Search box by Wonderdevelop (@wonderdevelop)
on CodePen.
Example 2:
In this example code, we will create the search bar using bootstrap classes.
<form>
<div class="input-group">
<input type="text" id="searchBox" name="searchBox" class="form-control form-control-lg" placeholder="Search...">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</form>Output:
