Creating visually appealing search bars is essential for enhancing the overall user experience on a website. Bootstrap 5, a powerful front-end framework, makes it easier than ever to design and implement a search bar with icons inside.
Step 1: Set Up Your HTML Structure
Before we start coding, make sure you have the Bootstrap 5 CSS and JavaScript libraries included in your project. You should also have an icon library, such as Font Awesome, ready for use. Here’s how you can structure your HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Search Bar with Icons</title> <!-- Include Bootstrap CSS (Replace with your CDN) --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Include Font Awesome CSS (Replace with your CDN) --> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet"> </head> <body> <!-- Your search bar will go here --> </body> </html>
Step 2: Create the Search Bar
Now, let’s create the search bar inside the <body> tag of your HTML. We’ll use Bootstrap’s input group component:
<div class="container mt-5"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search..."> <div class="input-group-append"> <button class="btn btn-outline-secondary" type="button"> <i class="fas fa-search"></i> </button> </div> </div> </div>
Step 3: Customize and Style
This CSS code customizes the appearance of a search bar created with Bootstrap. It defines styles for the search bar’s container, input field, search button, and the search icon, including adjustments to borders, shadows, and colors to create a clean and minimalist design.
/* Add custom styles to the search bar */
.container {
max-width: 400px; /* Adjust the maximum width as needed */
margin: 0 auto;
}
.input-group {
border: 2px solid #ccc; /* Add a border for the search bar */
border-radius: 5px; /* Round the corners */
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
}
.form-control {
border: none; /* Remove input border */
border-radius: 0; /* Remove input border radius */
box-shadow: none; /* Remove input box shadow */
}
.btn-outline-secondary {
border: none; /* Remove button border */
background-color: transparent; /* Make the button background transparent */
color: #333; /* Set the button text color */
}
/* Style the search icon */
.fa-search {
font-size: 20px; /* Adjust the icon size */
color: #555; /* Set the icon color */
}Step 4: CDNs For Resources
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css https://code.jquery.com/jquery-3.6.0.min.js https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js
Bootstrap 5 Search Bar with Icons DEMO
Here successfully created a stylish and functional Bootstrap 5 search bar with icons inside, enhancing the search experience for your website’s users.
