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 =
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 =
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
Last Updated :
05 Dec, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...