Bootstrap 5 Navbar Forms

Last Updated : 5 Dec, 2022

Bootstrap 5 Navbar Forms are used to create the components like a search bar, or login within a navbar.

Bootstrap 5 Navbar Forms Classes: No special classes are used in Navbar Forms. You can customize the form using Navbar and Form classes

Syntax:

<nav class="navbar">
    <form>
      <input class="form-control" type="..." >
      <button class="btn" type="...">...</button>
    </form>
</nav>
Below example illustrate the Bootstrap 5 Navbar Forms:

Example 1: In this example, we will create a search bar in Navbar Forms:

HTML 
<!DOCTYPE html>
<html>

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
</head>

<body>
    <div class="container text-center col-7">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2>Bootstrap 5 Navbar Forms</h2>
        <nav class="navbar navbar-light bg-light">
            <div class="container-fluid">
                <form class="input-group">
                    <input type="search"
                           class="form-control"
                           placeholder="I am a Search Box">
                    <button type="submit"
                            class="btn btn-outline-danger" >
                        Search
                    </button>
                </form>
            </div>
        </nav>
    </div>
</body>
</html>

Output:

Example 2: In this example, we will use the Navbar form with other nav elements.

HTML 
<!DOCTYPE html>
<html>
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
</head>

<body>
    <div class="container text-center col-7">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2>Bootstrap 5 Navbar Forms</h2>
        <nav class="navbar navbar-light bg-light">
            <div class="container-fluid">
                <a class="navbar-brand">
                    GeeksforGeeks
                </a>
                <form class="d-flex">
                    <input type="search" 
                           class="form-control " 
                           placeholder="Enter email">
                    <span class="input-group-text">
                        @geeksforgeeks.org
                    </span>
                    <button class="btn btn-outline-success" 
                            type="submit">
                            Search
                    </button>
                </form>
            </div>
        </nav>
    </div>
</body>
</html>

Output:

Reference: https://getbootstrap.com/docs/5.0/components/navbar/#forms

Comment

Explore