Toggler and Dropdown not workin - html

I'm learning to use Bootstrap and neither the Toggler nor the Dropdown expand, I honestly don't know if I'm doing something wrong
I'm learning to use Bootstrap and neither the Toggler nor the Dropdown expand, I honestly don't know if I'm doing something wrong.
Here is the navbar code (It's a partial, I'm using Handlebars)
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03"
aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Titleee</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Withepaper</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Community
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Discord</a></li>
<li><a class="dropdown-item" href="#">Telegram</a></li>
<li><a class="dropdown-item" href="#">Twitter</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>

you have to import bootstrap.js file also to make togglers and dropdowns, work,
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

Related

How do I center navbar link items using Bootstrap?

I followed the w3schools documentation page for bootstrap navbars, which said to add justify-content-center to my navbar to center links. In addition, I followed a YouTube video which said to do the same thing, with the caveat of adding that Bootstrap class to the div class which has <div class="collapse navbar-collapse" however, when I add it to my code, it does not center any of the items. I only want to center the nav links and not the brand logo.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<header class="header">
<nav class="navbar navbar-colour navbar-expand-lg navbar-dark_disabled">
<div class="container-fluid">
<a class="navbar-brand" href="index.php">BRAND</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
<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>
<li class=" nav-item">
<a class="navolour nav-link" href="#">About</a>
</li>
<li class=" nav-item dropdown">
<a class="navolour nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Drop Down
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Nav Item 1</a></li>
<li><a class="dropdown-item" href="#">Nav Item 2</a></li>
<li><a class="dropdown-item" href="#">Nav Item 3</a></li>
</ul>
</li>
<li class=" nav-item">
<a class="navolour nav-link" href="search.php">Nav Link</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
jsfiddle: https://jsfiddle.net/eagucmh0/
The bootstrap documentation indicates the justify-content-center should be on the <ul> element - <ul class="nav justify-content-center">
https://getbootstrap.com/docs/5.1/components/navs-tabs/
Update
Try this...
<!-- ======= Header ======= -->
<header class="header">
<nav class="navbar navbar-colour navbar-expand-lg navbar-dark ">
<div class="container-fluid">
<a class="navbar-brand" href="index.php">BRAND</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- <div class="collapse navbar-collapse" id="navbarSupportedContent"> -->
<ul class="navbar-nav mb-2 mb-lg-0 justify-content-center collapse navbar-collapse" id="navbarSupportedContent">
<li class=" nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class=" nav-item">
<a class="navolour nav-link" href="#">About</a>
</li>
<li class=" nav-item dropdown">
<a class="navolour nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Drop Down
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Nav Item 1</a></li>
<li><a class="dropdown-item" href="#">Nav Item 2</a></li>
<li><a class="dropdown-item" href="#">Nav Item 3</a></li>
</ul>
</li>
<li class=" nav-item">
<a class="navolour nav-link" href="search.php">Nav Link</a>
</li>
</ul>
<!-- </div> -->
</div>
</nav>
</header><!-- End Header -->
Commented out the inner <div> and moved its classes and the id to the <ul> element.
jsfiddle: https://jsfiddle.net/0vm29bah/
You need to take the me-auto class off the list. That pushes it over even if you use centering classes on the parent element.
See the full page demo.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<header class="header">
<nav class="navbar navbar-colour navbar-expand-lg navbar-dark_disabled">
<div class="container-fluid">
<a class="navbar-brand" href="index.php">BRAND</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
<ul class="navbar-nav mb-2 mb-lg-0">
<li class=" nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class=" nav-item">
<a class="navolour nav-link" href="#">About</a>
</li>
<li class=" nav-item dropdown">
<a class="navolour nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Drop Down
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Nav Item 1</a></li>
<li><a class="dropdown-item" href="#">Nav Item 2</a></li>
<li><a class="dropdown-item" href="#">Nav Item 3</a></li>
</ul>
</li>
<li class=" nav-item">
<a class="navolour nav-link" href="search.php">Nav Link</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Bootstrap submenu not working when linked externally

I have a bootstrap 4.3.1 navbar with a submenu and it works fine when I include it in the navbar. However, according to the documentation, I should be able to link it externally. When I do that, the general toggle button works, but the submenu no longer works. Any ideas why this is happening?
Here's my navbar:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<nav class="navbar sticky-top navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="">Brand Logo</a>
<!--NAV BAR -->
<div class="collapse navbar-collapse bg-dark" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-expanded="false">
<i class="far fa-circle"></i> Dropdown Title
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Product 1</a>
<a class="dropdown-item" href="#">Product 2</a>
<a class="dropdown-item" href="#">Product 3</a>
</div>
</li>
</ul>
</div><!-- tag added by community -->
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
I'm trying to move the entire #navbarCollapse div into a different page and still have the submenu function properly.

navbar don't close using bootstrap v5

i'm using Bootstrap v5 and i found a problem with navbar. I copied the code from here but this navbar don't work. My navbar open, but when i click again on button the navbar don't close. My source code is here.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<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>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<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>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
How can i solve this problem?
Thanks
There's no reason to use popper.js, bootstrap.min.js and bootstrap.bundle.min.js
Just use bootstrap.bundle.min.js alone

Bootstrap navbar collapse not working correctly || navbar collapse not showing links on clicking

I am building navbar using bootstrap 5 in Angular 11
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
<a class="navbar-brand" routerLink="/">O$hop</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" routerLink="/shopping-cart">Shopping Cart</a>
</li>
<ng-template #anonymousUser>
<li class="nav-item">
<a class="nav-link" routerLink="/login">Login</a>
</li>
</ng-template>
<li
ngbDropdown
*ngIf="appUser; else anonymousUser"
class="nav-item dropdown"
>
<a
ngbDropdownToggle
class="nav-link dropdown-toggle"
id="dropdown01"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>{{ appUser.name }}</a
>
<div ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" routerLink="/my/orders">My Orders</a>
<ng-container *ngIf="appUser.isAdmin">
<a class="dropdown-item" routerLink="/admin/orders"
>Manage Orders</a
>
<a class="dropdown-item" routerLink="/admin/products"
>Manage Products</a
></ng-container
>
<a class="dropdown-item" (click)="logout()">Log Out</a>
</div>
</li>
</ul>
</div>
</nav>
But on mobile screen, collpase button is not showing Shopping cart and dropdown toggle links..Any help ..I am new to Bootstrap....Attaching ss..
Fullscreen on desktop
When viewing on small screen
I think you are missing the JS that is needed for bootstrap 5 for it to work.
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
You can read more about it here:
Bootstrap Introduction

Bootstrap 4 - How to re-position some navbar elements for different screen sizes

So using bootstrap 4 I've created a navbar that collapses into a button when the screen gets too small. When it isn't collapsed, the navbar is setup in the perfect order. However, when it does collapse behind a button, one item (the icon image) is centered while the rest of the items are to the left. How can I make the icon go to the left ONLY when the navbar has collapsed (like the rest of the items).
I've tried doing "float-md-left" on the icon image, however that made no changes.
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mx-auto">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="#">The Party<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Current Stadium</a>
</li>
<a class="navbar-brand mx-auto float-sm-left" href="#"><i class="fas fa-football-ball"></i></a>
<li class="nav-item">
<a class="nav-link" href="#">RSVP</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Stadium History
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">2017 Stadium</a>
<a class="dropdown-item" href="#">2018 Stadium</a>
<a class="dropdown-item" href="#">2019 Stadium</a>
</div>
</li>
</ul>
</div>
</nav>
I got you point. this is happing due to mx-auto class.
Is there any specific reason for applying mx-auto class? Otherwise, you can remove itself.
Also, please remove float class.
Please have a look on below code.
<a class="navbar-brand mx-lg-auto" href="#"><i class="fas fa-football-ball"></i></a>
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mx-auto">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="#">The Party<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Current Stadium</a>
</li>
<a class="navbar-brand mx-lg-auto" href="#"><i class="fas fa-football-ball"></i></a>
<li class="nav-item">
<a class="nav-link" href="#">RSVP</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Stadium History
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">2017 Stadium</a>
<a class="dropdown-item" href="#">2018 Stadium</a>
<a class="dropdown-item" href="#">2019 Stadium</a>
</div>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>