→ Mateo Rojas
→ modern search bar with autocompletion

modern search bar with autocompletion

click to see effect

This bootstrap css example is contributed by Mateo Rojas, on 21-Dec-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example is find

Tags: Search Bar

Author Mateo Rojas

4.4k

v.5.3

Fork Fullscreen

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">

<div class="bg-light">
    <div class="container py-5">
        <div class="search-wrapper">
            <div class="search-box">
                <input type="text" class="search-input form-control" placeholder="Search anything...">
                <i class="fas fa-search search-icon"></i>

<div class="suggestions">
                    <div class="recent-searches">Recent Searches</div>
                    <div class="suggestion-item">
                        <i class="fas fa-history"></i>
                        Wireless Headphones
                    </div>
                    <div class="suggestion-item">
                        <i class="fas fa-history"></i>
                        Smart Watches
                    </div>
                    <div class="suggestion-item">
                        <i class="fas fa-search"></i>
                        Popular: Latest Smartphones
                    </div>
                    <div class="suggestion-item">
                        <i class="fas fa-fire"></i>
                        Trending: Fitness Trackers
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

More Examples

Search bar
Search bar with icon

Author:
Anonymous

1 year ago

46.8k

v.5.3
Modern Bootstrap Search Bar

Author:
Anonymous

10 months ago

5.1k

v.5.3
Search bar with search icon in bootstrap 5

Author:
Anonymous

10 months ago

2.6k

v.5.3
Search section

Author:
M Rashid

4 months ago

799

v.5.3
Navbar
a responsive navbar with search

Author:
Prajwal Hallale

1 year ago

6.8k

v.5.3
Search section

Author:
Ankit khedkar

11 months ago

2k

v.5.3
Expanding Search Bar - Bootstrap 5
Expand search bar on click

Author:
Andreas Müller

1 year ago

5k

v.5.3
Search section with category filter

Author:
Mateo Rojas

10 months ago

4.8k

v.5.3
Simple search bar

Author:
Reza Farhadi

1 year ago

4.2k

v.5.3
Search with Select using Bootstrap 5
Category filter with search bar

Author:
Omar Khaled

1 year ago

4.4k

v.5.3
Navbar
a responsive navbar with search and sticky ans Header

Author:
almounkez

10 months ago

3.2k

v.5.3
bootstrap 5 search box with icon Example
Dark Theme Search Bar Light Theme Search Bar Simple Iconic Search Bar

Author:
Arturo

10 months ago

3.6k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent

BootstrapExamples From the makers of tailwindflex.com

BootstrapExamples is a free library offering a diverse range of Bootstrap CSS components. Developed by the community, it's open for anyone to use.

Contacts

Email:

[email protected]

Links

Search

Resources

Free Tailwind CSS Components Free CSS Components

© 2025 BootstrapExamples. All Rights Reserved.

v1.3