I am facing a issue when trying to create a responsive menu or dropdown button with Bootstrap 5.Everything seems ok.The navigation icon & dropdown icon apears.But its not working.When I clicked the nav icon or dropdown button,no dropdown menu apears.
I want to specially mention that I also included the jquery file. But it didn't work. Can anyone please tell me what is happening here?
One last thing,I faced severel issues with some others bootstrap classes like mr-auto,ml-auto etc.Is it any bug or new classes come with bootstrap 5 for this kind of job?
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous"
/>
</head>
<body>
<nav class="navbar navbar-dark bg-dark navbar-expand-md">
DemoTech
<button
class="navbar-toggler"
data-toggle="collapse"
data-target="#navbar"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbar" navbar>
<ul class="navbar-nav">
<li class="nav-item">Home</li>
<li class="nav-item">About</li>
<li class="nav-item">Contact</li>
</ul>
</div>
</nav>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"
></script>
</body>
</html>
The data-* attributes used in Bootstrap 4 have been replaced with data-bs-* in Bootstrap 5
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
Demo
As explained in the docs, data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. This mean any javascript components (Collapse, Navbar, Carousel, Dropdown, Tabs, Modal, etc..) will only work using data-bs-... attributes.
Bootstrap 5 is a major update with breaking changes. Also see here that ml-auto/mr-auto have changed to ms-auto/me-auto.
Make sure you have added jsDeliver CDN link from bootstrap homepage for Javascript and CSS both in the head tag.
**<!-- CSS only -->**
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">
**<!-- JavaScript Bundle with Popper -->**
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
You have used data-toggle this attribute used in old Bootstrap versions while in Bootstrap 5 you need to use this attribute data-bs-toggle and one other most important things is you have make (aria-expanded="true").
me too is facing same problem first I changed data-target to data-bs-target and data-toggle to data-bs-toggle second I have included bootstrap.bundle.min.js and cdn link of plain bootstrap.min.js adding two same script cause problem
`
<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 id="navbarSupportedContent" class="collapse navbar-collapse" >
<ul class="navbar-nav me-auto">
<li class="nav-item active">
<a class="nav-link" href=#Url.Action("Index","Home")>Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href=#Url.Action("AboutUs","Home")>About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href=#Url.Action("OurTeam","Home")>Our Team</a>
</li>
#*<li class="nav-item">
<a class="nav-link" href=#Url.Action("Blog","Home")>Blog</a>
</li>*#
<li class="nav-item">
<a class="nav-link" href=#Url.Action("ContactUs","Home")>Contact Us</a>
</li>
#*<li class="nav-item">
<a class="nav-link" href=#Url.Action("LoanCalculator","Home")>Loan Calculator</a>
</li>*#
</ul>
</div>
</nav>`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous"
/>
</head>
<body>
<nav class="navbar navbar-dark bg-dark navbar-expand-md">
DemoTech
<button
class="navbar-toggler"
**data-bs-toggle="collapse"
data-bs-target="#navbar"**
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbar" navbar>
<ul class="navbar-nav">
<li class="nav-item">Home</li>
<li class="nav-item">About</li>
<li class="nav-item">Contact</li>
</ul>
</div>
</nav>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"
></script>
</body>
</html>
For me just solve this issue by adding -bs to data-target and data-toggle
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown"
aria-expanded="false"
aria-label="Toggle navigation"
>
Besides including the JS link in the body the buttons and div have same aria-control/data-bs-target and ID :
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" aria-controls='navbarSupportedContent'
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<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">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
You use "data-toggle" this attribute used in Bootstrap 3 you need to use this attribute "data-bs-toggle"
I had issues with dropdown menus in the current site that I'm editing. Tonight I finally have a nav menu with dropdowns that allows the dropdown menu to close after clicking on links! I styled it to look whoo hoo via a different template. However, when I add the menu to the site I'm editing, the mobile toggle menu Isn;t opening. How can I fix that? Thanks! :--)
<!-- ======= Header ======= -->
<header id="header" class="fixed-top d-flex align-items-center">
<div class="container">
<div class="header-container d-flex align-items-center justify-content-between">
<div class="logo">
<!--<h1 class="text-light">LOGO TEXT</h1>-->
<!-- Uncomment below if you prefer to use an image logo -->
<a class="scrollto" href="#intro"><img src="img/UCF-Logo.svg" height="50" alt="U C F" title="U C F" class="img-fluid top-logo wow bounceOut"></a>
<!-- <img src="assets/img/logo.png" alt="" class="img-fluid">-->
</div>
<nav id="navbar" class="navbar">
<ul>
<!--<li><a class="nav-link scrollto active" href="#hero">Home</a></li>
<li><a class="nav-link scrollto" href="#about">About</a></li>
<li><a class="nav-link scrollto" href="#services">Services</a></li>
<li><a class="nav-link scrollto " href="#portfolio">Portfolio</a></li>
<li><a class="nav-link scrollto" href="#team">Team</a></li>-->
<li class="dropdown"><span>About <i class="fas fa-arrow-down"></i></span>
<ul>
<li><a class="scrollto" href="#about">About</a></li>
<li><a class="scrollto" href="#more-about">Detailed Info</a></li>
<li><a class="scrollto" href="#about">DropDown 03</a></li>
<li><a class="scrollto" href="#about">DropDown 04</a></li>
<li><a class="scrollto" href="#about">DropDown 05</a></li>
</ul>
</li>
<li class="dropdown"><span>DropDown <i class="fas fa-arrow-down"></i></span>
<ul>
<li><a class="scrollto" href="#about">DropDown 06</a></li>
<li><a class="scrollto" href="#about">DropDown 07</a></li>
<li><a class="scrollto" href="#about">DropDown 08</a></li>
<li><a class="scrollto" href="#about">DropDown 09</a></li>
<li><a class="scrollto" href="#about">DropDown 10</a></li>
</ul>
</li>
<li class="dropdown"><span>DropDown <i class="fas fa-arrow-down"></i></span>
<ul>
<li><a class="scrollto" href="#contact">Contact Info</a></li>
<li><a class="scrollto" href="#about">DropDown 12</a></li>
<li><a class="scrollto" href="#about">DropDown 13</a></li>
<li><a class="scrollto" href="#about">DropDown 14</a></li>
<li><a class="scrollto" href="#about">DropDown 15</a></li>
</ul>
</li>
<!--<li>Drop Down 2</li>
<li>Drop Down 3</li>
<li>Drop Down 4</li>
</ul>
</li>-->
<!--<li><a class="nav-link scrollto" href="#contact">Contact</a></li>-->
<li><a class="register scrollto" href="#about">REGISTER! <i class="fas fa-smile-beam fa-x2"></i></a></li>
</ul>
<i class="fas fa-bars mobile-nav-toggle"></i>
</nav><!-- .navbar -->
</div><!-- End Header Container -->
</div>
</header><!-- End Header -->
here the 'data-bs-target' id
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#kickMyAss">
and div id must be identical
<div id="kickMyAss" class="collapse navbar-collapse">
Related
I'm using BootStrap 5 to build my page
I have a NavBar Menu with links
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<nav class="navbar navbar-expand-lg navbar-light bg-transparent pt-0 pb-0">
<div class="container">
<a class="navbar-brand pt-0 pb-0 me-0" href="#home">Salimi<span>Me</span></a>
<button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item position-relative">
<a class="nav-link active" aria-current="page" href="#home">Home</a>
</li>
<li class="nav-item position-relative">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item position-relative">
<a class="nav-link" href="#skills">Skills</a>
</li>
<li class="nav-item position-relative">
<a class="nav-link" href="#timeline">Education</a>
</li>
<li class="nav-item position-relative">
<a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item position-relative">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
<a class="top-btn text-decoration-none d-inline-block" href="#">Download CV</a>
</div>
</div>
</nav>
what i try to do is when the user click on the link i want the whole meu to close and the user get the section he want
also if he click outside the menu the menu close if it's open
How to close the whole NavBar Menu when i click on a link inside or i click outside on the page?
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<style></style>
<body>
<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 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>
</ul>
</div>
</div>
</nav>
</body>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
</html>
I'm already stucked at this problem since days. I could not find any solutions anywhere, so I am asking the experts here :-)
I can not open my mobile menu. Nothing is happening.
It looks like:
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand" href="/">
<img src="/static/img/logo.svg" alt="logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
id="toggleMobileNav" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbar-mobile" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link mobile-nav-link"href="/#features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link mobile-nav-link"href="/#download">Download</a>
</li>
<li class="nav-item">
<a class="nav-link mobile-nav-link" href="/about">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/faq">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/blog">Blog</a>
</li>
</ul>
</div>
</div>
</nav>
Meanwhile I already replaced it with the code given at the official docs of bootstraps5 (https://getbootstrap.com/docs/5.0/components/navbar/)
I watched several youtube-videos, where they just paste it and it worked. Not even the example from bootstrap5 docs work.. Can anyone spot a mistake?
Thanks
You might want to start from here;
https://getbootstrap.com/docs/5.0/getting-started/introduction/
The code definitely works if you've incorporated bootstrap properly. It definitely sounds like your missing some essentials, such as the javascript required.
I'd always recommend starting from the beginning than the middle or the end in anything.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand" href="/">
<img src="/static/img/logo.svg" alt="logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
id="toggleMobileNav" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbar-mobile" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link mobile-nav-link"href="/#features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link mobile-nav-link"href="/#download">Download</a>
</li>
<li class="nav-item">
<a class="nav-link mobile-nav-link" href="/about">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/faq">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/blog">Blog</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Option 1: Bootstrap Bundle with Popper -->
<!-- THIS IS AN IMPORTANT PART -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
The videos you might be watching are already assuming you've got the basics done.
Follow the guide I've linked, it even contains a starter template that you can use and build from. It's basically what I did and then copied and pasted your code in the relevant area for it to work.
I am using Bootstrap but don't know why the toggle button is not working I have searched it on the internet but didn't get the right answer there are many similar questions on the StackOverflow but they are not also solving me problem Like Bootstrap toggle button is not working and bootstrap navbar toggle button is not working
So please can anyone tell me why it is happening.
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<title>TutorInet</title>
</head>
<nav class="navbar navbar-expand-lg navbar-light ">
<div class="container-fluid">
<a style="font-weight: 500;">
<h3 style="color:#4A4A4A;text-transform: uppercase;margin-top:8px;"> Tutor<span
style="color:#F97C44;">I</span>net</h3>
</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="navbarNav">
<ul class="navbar-nav">
<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="https://www.tutorinet.com/blog.php">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.tutorinet.com/contact.php">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">How it works</a>
</li>
<li style="color:#1EB909;font-weight: 600;" class="nav-item">
<a style="color:#1EB909;font-weight: 600;" class="nav-link" href="https://www.tutorinet.com/login.php">Log
in</a>
</li>
<button style="color:white;background: #1EB909;border: none;" type="button" class="btn btn-primary"><a
style="color:white;background: #1EB909;" href="https://www.tutorinet.com/signup.php?type=1">Sign
Up</a></button>
</ul>
</div>
</div>
</nav>
You need to remove the bootstrap script you have and include bootstrap.bundle.min.js
<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>
also the id value in your div should be the same with data-bs-target value in your button
<div class="collapse navbar-collapse" id="navbarSupportedContent">
This question already has answers here:
Bootstrap navbar: nothing is displayed on smaller devices
(1 answer)
bootstrap 4 nav doesn't display hamburger on resize
(2 answers)
Closed 1 year ago.
I have html code, when I resize the browser screen I have a problem that the toggle button is not displayed (it is transparent) when I click on it the navigation bar items are not showing at allScreenshot of my web
<html>
<head>
<title>
profile
</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS-->
<link rel="stylesheet" href="../css/bootstrap/bootstrap.css">
<!-- w3 CSS-->
<link rel="stylesheet" href="../css/W3.css">
<!-- profile CSS-->
<link rel="stylesheet" href="../css/accueil.css">
<!-- flaticon CSS-->
<link rel="stylesheet" href="../icons/font/flaticon.css">
<!--Scripts-->
<!-- JQuery script-->
<script src="../js/jQuery.js"></script>
<!-- Bootstrap script-->
<script src="../js/bootstrap/bootstrap.bundle.min.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-expand-md fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="accueil.html">
<h4>LOGO</h4>
</a>
<!--Collapse button -->
<button type="button" class="navbar-toggler"
data-bs-toggle="collapse" data-bs-target="#coll_target"
aria-controls="coll_target" aria-expanded="false"
aria-label="Toggle Navbar" >
<span class="navbar-toggler-icon" ></span>
</button>
<!--Collapse Div -->
<div class="collapse navbar-collapse" id="coll_target">
<div class="mx-auto"></div>
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link"><span><i class="flaticon-ringing" style="color: white;"></i></span></a></li>
<li class="nav-item"><a class="nav-link"><span><i class="flaticon-email" style="color: white;"></i></span></a></li>
<li class="nav-item"><a class="nav-link"><span><i style="color: white;" class="flaticon-down-arrow"></i></span></a></li>
<li class="nav-item"><a class="nav-link"><span><i style="color: white;" class="flaticon-translation"></i></span></a></li>
<li class="nav-item"><a class="nav-link"><span><i class="flaticon-settings" style="color: white;"></i></span></a></li>
</ul>
</div>
</div>
</nav>
</header>
</body>
</html>
You should read the documentation here https://getbootstrap.com/docs/5.0/getting-started/introduction/
I assume you have basic knowledge in CSS and HTML , In order to use Bootstrap, you first need to integrate it into your development environment correctly, Either by loading it remotely or by download and use it locally;
Long story short your pages should look like this:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<!---include navbar components to demonstrate what you need----->
<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.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>
Bootstrap has a lot of responsive classes that suit your need
I have a problem with Bootstrap 4 navbar collapse feature.
I set it so that the navbar collapse in mobile viewport but instead of collapsing, it shows the items as a vertical list.
This is the code:
<html>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-sm navbar-light">
<div class="container">
<button class="navbar-toggler" type="button" aria-label="collapse" data-target="#navbarSupportedContent" aria-controls="#navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggle-icon"></span>
</button>
<div class="collapse navbar-collapse text-center justify-content-center" id="navbarSupportedContent">
<a class="nav-link" href="#"><i class="far fa-dot-circle fa-lg pt-1"></i></a>
<a class="nav-link" href="#">Menu</a>
<a class="nav-link" href="#">Menu</a>
<a class="nav-link" href="#">Menu</a>
<a class="nav-link" href="#">Menu</a>
<a class="nav-link" href="#">Menu</a>
</div>
</div>
</nav>
<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
I'm using a customized version of Bootstrap 4 (compiled from scss). I tried to use the standard version and it does show the button instead of the vertical list, but it doesn't work too. When I click on the list, nothing happens.
I checked the browser console but it doesn't show any error.
If it helps this is the compiled CSS: https://pastebin.com/jKYGC5A7
And this is the SCSS: https://pastebin.com/bbQNCAvh
The navbar work with ul li item, here is a working example
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">MENU <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MENU</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MENU</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
Here is a link in Codepen https://codepen.io/anon/pen/LdZYbP
and here is a screenshot when you're on a mobile view
If you are using scss, make sure to import _transitions.scss.