Bootstrap 5 Navbar Forms
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" > w3wiki </ 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" > w3wiki </ h1 > < h2 >Bootstrap 5 Navbar Forms</ h2 > < nav class = "navbar navbar-light bg-light" > < div class = "container-fluid" > < a class = "navbar-brand" > w3wiki </ a > < form class = "d-flex" > < input type = "search" class = "form-control " placeholder = "Enter email" > < span class = "input-group-text" > @w3wiki.net </ 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