→ Riz Mohammad
→ Search Bar Examples with Boostrap 5

Search Bar Examples with Boostrap 5

This bootstrap css example is contributed by Riz Mohammad, on 16-Jul-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example is find

Tags: Search Bar

Author Riz Mohammad

5.3k

v.5.3

Fork Fullscreen

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

<div class="container mt-5">
    <h2 class="mb-4">Search Bar Examples</h2>

<div class="mb-4">
        <h4>Basic Search Bar</h4>
        <form class="d-flex">
            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
    </div>

<div class="mb-4">
        <h4>Search Bar with Icon</h4>
        <form class="d-flex">
            <div class="input-group">
                <span class="input-group-text"><i class="fas fa-search"></i></span>
                <input class="form-control" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-primary" type="submit">Search</button>
            </div>
        </form>
    </div>

<div class="mb-4">
        <h4>Rounded Search Bar</h4>
        <form class="d-flex">
            <input class="form-control me-2 rounded-pill" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success rounded-pill" type="submit">Search</button>
        </form>
    </div>

<div class="mb-4">
        <h4>Full-width Search Bar</h4>
        <form>
            <div class="input-group mb-3">
                <input type="text" class="form-control" placeholder="Search" aria-label="Search">
                <button class="btn btn-primary" type="submit">Search</button>
            </div>
        </form>
    </div>

<div>
        <h4>Search Bar with Dropdown</h4>
        <form>
            <div class="input-group mb-3">
                <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Categories</button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Category 1</a></li>
                    <li><a class="dropdown-item" href="#">Category 2</a></li>
                    <li><a class="dropdown-item" href="#">Category 3</a></li>
                </ul>
                <input type="text" class="form-control" placeholder="Search" aria-label="Search">
                <button class="btn btn-primary" type="submit">Search</button>
            </div>
        </form>
    </div>
</div>

More Examples