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">
Related
I trying to create navigation bar with bootstrap.
I read the docs from here, but my drop down not working.
I attached everything in the <head> <head/> section but dropdown not worked for me.
This is my code:
<!DOCTYPE html>
<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>НИМХ - АС и БД, Филиал - Пловдив</title>
<!-- index.css -->
<link rel="stylesheet" href="./css/index.css">
<!-- CSS Leaflet-->
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.9.3/dist/leaflet.css"
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
crossorigin=""/>
<!-- JS Leaflet -->
<script src="https://unpkg.com/leaflet#1.9.3/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
crossorigin=""></script>
<!-- CSS Bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<!-- JS Bootstrap-->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<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="#" role="button" 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><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">Disabled</a>
</li>
</ul>
<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>
</div>
</div>
</nav>
<div id="map">
<!-- Load map -->
<script src="./js/leaflet.js"></script>
</div>
</body>
</html>
Can I get example with worked dropdown on bootstrap 5.3 ?
I think I have attached all the necessary libraries for the dropdown menu to work ?
You have to add Bootstrap's JavaScript as well:
// Add this line before the closing </body> tag
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
i.e.
<div id="map">
<!-- Load map -->
<script src="./js/leaflet.js"></script>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
You have included BOOTSTRAP twice!
delete this row from your head tag
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
Working example without it: https://jsfiddle.net/MarinHTML/8kscdbn9/11/
------EDIT----- depricated old answer: ---
you're gonna need some JS to do the job here, because what you did is NEST a dropdown into another dropdown. Not sure if possible by simple bootstrap means. You can, but it must be on hover, and I presume you don't want that.
Here is a quick example of what I think you want:
https://jsfiddle.net/MarinHTML/t7zmqcd9/
And here is the JS to use it:
let dds = document.querySelectorAll('.dropdown-toggle')
dds.forEach((dd)=>{
dd.addEventListener('click', function (e) {
var el = this.nextElementSibling
el.style.display = el.style.display==='block'?'none':'block'
})
})
Bootstrap provides you with several stackblitz links to check their templates, like this: https://stackblitz.com/run?file=index.html
Used on your code would be something like this:
<!DOCTYPE html>
<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>НИМХ - АС и БД, Филиал - Пловдив</title>
<!-- index.css -->
<link rel="stylesheet" href="./css/index.css">
<!-- CSS Leaflet-->
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.9.3/dist/leaflet.css"
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
crossorigin=""/>
<!-- JS Leaflet -->
<script src="https://unpkg.com/leaflet#1.9.3/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
crossorigin=""></script>
<!-- CSS Bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<!-- JS Bootstrap-->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<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="#" role="button" 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><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">Disabled</a>
</li>
</ul>
<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>
</div>
</div>
</nav>
<div id="map">
<script src="./js/leaflet.js"></script>
</div>
<!--here -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"> </script>
<!-- here -->
</body>
</html>
So all that you are missing is the:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
before the body close tag
I have used the toggler button using bootstrap 5 in the navbar but it is not displaying the navbar items that are collapsed on minimizing browser screen. Why is it not working properly? and how to resolve it?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title>
bootstrap installation
</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="">tindog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav m-lg-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
The code you provided works fine for me. Are you sure you included the Bootstrap JS file?
You are missing a bootstrap JS CDN link, Add this inside your head element
<head>
...
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</head>
so basically when I try to open my website on a small device, I have the bootstrap navbar set to collapse but the button does not work. I would highly appreciate some help. Everything else is working but this is the one thing I can't get to work. I've tried everything I could think of.
HTML
<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>Impressions</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav id="navbar" class="navbar fixed-top navbar-custom navbar-expand-sm">
<div class="container-fluid">
<button class="navbar-toggler" 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" id="navbarNav">
<ul class="navbar-nav mx-auto mr-auto">
<li class="nav-item">
<a class="nav-link py-1 d-none d-md-inline-block active" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link py-1 d-none d-md-inline-block" href="#skills">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link py-1 d-none d-md-inline-block" href="#projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link py-1 d-none d-md-inline-block" href="#about">About</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- JavaScript Bundle with Popper -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="index.js"charset="UTF-8"></script>
</body>
</html>
it is probably due to d-none class which is an abreviation for display: none;.
Change it to display: flex; for example. You may refer to the documentation of flexbox to get more info.
Best.
Your menu items are not showing due to the d-none class
<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>Impressions</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav id="navbar" class="navbar fixed-top navbar-custom navbar-expand-sm">
<div class="container-fluid">
<button class="navbar-toggler" 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" id="navbarNav">
<ul class="navbar-nav mx-auto mr-auto">
<li class="nav-item">
<a class="nav-link py-1 d-md-inline-block active" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link py-1 d-md-inline-block" href="#skills">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link py-1 d-md-inline-block" href="#projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link py-1 d-md-inline-block" href="#about">About</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- JavaScript Bundle with Popper -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="index.js"charset="UTF-8"></script>
</body>
</html>
my toggle navbar is not working, can anyone tell me why and how to fix it? I looked at it online but Im still not sure what is the issue in mine.
<!DOCTYPE html>
<html lang="en">
{% load static %}
<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.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><style>
<title>homepage</title>
</head>
<body>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#MyMenu" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="MyMenu">
<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="/sentiment/type">Input Text</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/sentiment/import">Import Tweets</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/feedback">Feedback</a>
</li>
</ul>
</div>
<span class="hello-msg"><strong>Hello, {{request.user}}</strong></span>
<button class="btn btn-danger navbar-btn" ><h7 class="white-text" color=white;>Logout</h7></button>
</nav>
<!-- END nav -->
<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>
</body>
</html>
Im using navbar from here: https://getbootstrap.com/docs/4.0/components/navbar/
Your syntax is wrong. You have a double body label and double head label.
you have some syntax errors, just simply copy this and replace it with your code:
<!DOCTYPE html>
<html lang="en">
{% load static %}
<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.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>homepage</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#MyMenu" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="MyMenu">
<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="/sentiment/type">Input Text</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/sentiment/import">Import Tweets</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/feedback">Feedback</a>
</li>
</ul>
</div>
<span class="hello-msg"><strong>Hello, {{request.user}}</strong></span>
<button class="btn btn-danger navbar-btn" ><h7 class="white-text" color=white;>Logout</h7></button>
</nav>
<!-- END nav -->
<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>
</body>
</html>
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