diff options
Diffstat (limited to 'site/content/docs/5.0/components/navbar.md')
| -rw-r--r-- | site/content/docs/5.0/components/navbar.md | 38 |
1 files changed, 19 insertions, 19 deletions
diff --git a/site/content/docs/5.0/components/navbar.md b/site/content/docs/5.0/components/navbar.md index da231888fb..87d2a653a9 100644 --- a/site/content/docs/5.0/components/navbar.md +++ b/site/content/docs/5.0/components/navbar.md @@ -42,7 +42,7 @@ Here's an example of all the sub-components included in a responsive light-theme <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> - <ul class="navbar-nav mr-auto mb-2 mb-lg-0"> + <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> @@ -65,7 +65,7 @@ Here's an example of all the sub-components included in a responsive light-theme </li> </ul> <form class="d-flex"> - <input class="form-control mr-2" type="search" placeholder="Search" aria-label="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> </div> @@ -73,7 +73,7 @@ Here's an example of all the sub-components included in a responsive light-theme </nav> {{< /example >}} -This example uses [color]({{< docsref "/utilities/colors" >}}) (`bg-light`) and [spacing]({{< docsref "/utilities/spacing" >}}) (`my-2`, `my-lg-0`, `mr-sm-0`, `my-sm-0`) utility classes. +This example uses [color]({{< docsref "/utilities/colors" >}}) (`bg-light`) and [spacing]({{< docsref "/utilities/spacing" >}}) (`my-2`, `my-lg-0`, `me-sm-0`, `my-sm-0`) utility classes. ### Brand @@ -220,7 +220,7 @@ Place various form controls and components within a navbar: <nav class="navbar navbar-light bg-light"> <div class="container-fluid"> <form class="d-flex"> - <input class="form-control mr-2" type="search" placeholder="Search" aria-label="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> </div> @@ -234,7 +234,7 @@ Immediate child elements of `.navbar` use flex layout and will default to `justi <div class="container-fluid"> <a class="navbar-brand">Navbar</a> <form class="d-flex"> - <input class="form-control mr-2" type="search" placeholder="Search" aria-label="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> </div> @@ -259,7 +259,7 @@ Various buttons are supported as part of these navbar forms, too. This is also a {{< example >}} <nav class="navbar navbar-light bg-light"> <form class="container-fluid justify-content-start"> - <button class="btn btn-outline-success mr-2" type="button">Main button</button> + <button class="btn btn-outline-success me-2" type="button">Main button</button> <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button> </form> </nav> @@ -289,7 +289,7 @@ Mix and match with other components and utilities as needed. <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarText"> - <ul class="navbar-nav mr-auto mb-2 mb-lg-0"> + <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> @@ -320,7 +320,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarColor01"> - <ul class="navbar-nav mr-auto mb-2 mb-lg-0"> + <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> @@ -335,7 +335,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl </li> </ul> <form class="d-flex"> - <input class="form-control mr-2" type="search" placeholder="Search" aria-label="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> </div> @@ -349,7 +349,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarColor02"> - <ul class="navbar-nav mr-auto mb-2 mb-lg-0"> + <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> @@ -364,7 +364,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl </li> </ul> <form class="d-flex"> - <input class="form-control mr-2" type="search" placeholder="Search" aria-label="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> </div> @@ -378,7 +378,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarColor03"> - <ul class="navbar-nav mr-auto mb-2 mb-lg-0"> + <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> @@ -393,7 +393,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl </li> </ul> <form class="d-flex"> - <input class="form-control mr-2" type="search" placeholder="Search" aria-label="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> </div> @@ -497,7 +497,7 @@ With no `.navbar-brand` shown at the smallest breakpoint: </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo01"> <a class="navbar-brand" href="#">Hidden brand</a> - <ul class="navbar-nav mr-auto mb-2 mb-lg-0"> + <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> @@ -509,7 +509,7 @@ With no `.navbar-brand` shown at the smallest breakpoint: </li> </ul> <form class="d-flex"> - <input class="form-control mr-2" type="search" placeholder="Search" aria-label="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> </div> @@ -527,7 +527,7 @@ With a brand name shown on the left and toggler on the right: <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo02"> - <ul class="navbar-nav mr-auto mb-2 mb-lg-0"> + <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> @@ -539,7 +539,7 @@ With a brand name shown on the left and toggler on the right: </li> </ul> <form class="d-flex"> - <input class="form-control mr-2" type="search" placeholder="Search" aria-label="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> </div> @@ -557,7 +557,7 @@ With a toggler on the left and brand name on the right: </button> <a class="navbar-brand" href="#">Navbar</a> <div class="collapse navbar-collapse" id="navbarTogglerDemo03"> - <ul class="navbar-nav mr-auto mb-2 mb-lg-0"> + <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> @@ -569,7 +569,7 @@ With a toggler on the left and brand name on the right: </li> </ul> <form class="d-flex"> - <input class="form-control mr-2" type="search" placeholder="Search" aria-label="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> </div> |