Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update navbars example to include a centered nav with utilities #36523

Merged
merged 4 commits into from
Oct 22, 2022
Merged

Update navbars example to include a centered nav with utilities #36523

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fca49e8
Update navbars example to include a centered nav with utilities
mdo Jun 7, 2022
f3a9782
Update site/content/docs/5.2/examples/navbars/index.html
mdo Jun 17, 2022
79f1681
Merge branch 'main' into examples-navbar-centered
XhmikosR Jul 11, 2022
8d39026
Merge branch 'main' into examples-navbar-centered
XhmikosR Sep 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions site/content/docs/5.2/examples/navbars/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -400,6 +400,40 @@
</div>
</nav>

<nav class="navbar navbar-expand-lg bg-light rounded" aria-label="Thirtheenth navbar example">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample11" aria-controls="navbarsExample11" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse d-lg-flex" id="navbarsExample11">
<a class="navbar-brand col-lg-3 me-0" href="#">Centered nav</a>
<ul class="navbar-nav col-lg-6 justify-content-lg-center">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<div class="d-lg-flex col-lg-3 justify-content-lg-end">
<button class="btn btn-primary">Button</button>
</div>
</div>
</div>
</nav>

<div>
<div class="bg-light p-5 rounded">
<div class="col-sm-8 mx-auto">
Expand Down