diff options
Diffstat (limited to 'site/content/docs/5.1/components/navbar.md')
| -rw-r--r-- | site/content/docs/5.1/components/navbar.md | 24 |
1 files changed, 12 insertions, 12 deletions
diff --git a/site/content/docs/5.1/components/navbar.md b/site/content/docs/5.1/components/navbar.md index f6dbb8e612..8d245d10f9 100644 --- a/site/content/docs/5.1/components/navbar.md +++ b/site/content/docs/5.1/components/navbar.md @@ -65,7 +65,7 @@ Here's an example of all the sub-components included in a responsive light-theme <a class="nav-link disabled">Disabled</a> </li> </ul> - <form class="d-flex"> + <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> @@ -74,7 +74,7 @@ Here's an example of all the sub-components included in a responsive light-theme </nav> {{< /example >}} -This example uses [background]({{< docsref "/utilities/background" >}}) (`bg-light`) and [spacing]({{< docsref "/utilities/spacing" >}}) (`my-2`, `my-lg-0`, `me-sm-0`, `my-sm-0`) utility classes. +This example uses [background]({{< docsref "/utilities/background" >}}) (`bg-light`) and [spacing]({{< docsref "/utilities/spacing" >}}) (`me-auto`, `mb-2`, `mb-lg-0`, `me-2`) utility classes. ### Brand @@ -228,7 +228,7 @@ Place various form controls and components within a navbar: {{< example >}} <nav class="navbar navbar-light bg-light"> <div class="container-fluid"> - <form class="d-flex"> + <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> @@ -242,7 +242,7 @@ Immediate child elements of `.navbar` use flex layout and will default to `justi <nav class="navbar navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand">Navbar</a> - <form class="d-flex"> + <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> @@ -343,7 +343,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl <a class="nav-link" href="#">About</a> </li> </ul> - <form class="d-flex"> + <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-light" type="submit">Search</button> </form> @@ -372,7 +372,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl <a class="nav-link" href="#">About</a> </li> </ul> - <form class="d-flex"> + <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-light" type="submit">Search</button> </form> @@ -401,7 +401,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl <a class="nav-link" href="#">About</a> </li> </ul> - <form class="d-flex"> + <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-primary" type="submit">Search</button> </form> @@ -524,7 +524,7 @@ Here's an example navbar using `.navbar-nav-scroll` with `style="--bs-scroll-hei <a class="nav-link disabled">Link</a> </li> </ul> - <form class="d-flex"> + <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> @@ -564,7 +564,7 @@ With no `.navbar-brand` shown at the smallest breakpoint: <a class="nav-link disabled">Disabled</a> </li> </ul> - <form class="d-flex"> + <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> @@ -594,7 +594,7 @@ With a brand name shown on the left and toggler on the right: <a class="nav-link disabled">Disabled</a> </li> </ul> - <form class="d-flex"> + <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> @@ -624,7 +624,7 @@ With a toggler on the left and brand name on the right: <a class="nav-link disabled">Disabled</a> </li> </ul> - <form class="d-flex"> + <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> @@ -695,7 +695,7 @@ In the example below, to create an offcanvas navbar that is always collapsed acr </ul> </li> </ul> - <form class="d-flex"> + <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> |