Can someone help me with a code inside bootstrap (html and css)???
In bootstrap Documentation i try to get dropdown menu (burger menu) but it wont let me expand the burger menu (Dropdown)
I have try it on Firefox and Google Chrome
I have some code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
<script src="bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Demo BootStrap</title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Demo</a>
<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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Desk</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Create</a>
</li>
</ul>
</div>
</nav>
</div>
</body>
</html>
What i need help to, is to expand the bruger menu and dropdown menu.
Thank you !
Best Reagrds
Frederik / 007fred
Change Data-Toggle to Data-Bs-Toggle,
Change Data-Target to Data-Bs-Target.
<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>
Try this
<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>
Related
I recently set up my bootstrap navbar but when I go down to moblie size and click the expand button it does nothing. Any ideas on why this is? I used to make this navbar with bootstrap 4 maybe I have the wrong classes for boostrap 5.
<nav class="navpaddingy navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img class="navimage" src="images/logo.png" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 ms-auto navpaddingx">
<li class="nav-item">
<a class="nav-link" href="#">Ceramic Coatings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Exterior Wash</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
you can try
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg 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="#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">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
check out the docs for more info :] https://getbootstrap.com/docs/5.2/components/navbar/
I am trying to implement a Navbar toggler referring the Bootstrap v5.1 documentation. I want to display the brand name on the left and the toggler on the right. Though this code is displaying the same but when I click the toggler the drop down menu is not showing and I am unable to figure out where the problem lies. How can I fix this?
Here's the code:
<head>
<meta charset="utf-8">
<title></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="">Navbar</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 ms-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>
Here's the image of the working of the code
Your code is perfect. But you forget to connect JavaScript in your code.That's why the Navbar toggler isn't working perfectly.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="">Navbar</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 ms-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>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>
i am trying to make a nav bar with its contents collapsable when turned to md size and, when collapsed the contents should be on the right side but am not able to do so someone help me, i also attached the code.
<nav class="navbar navbar-expand-md navbar-dark bg-warning">
PUbG Lite Reborn
<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 ms-md-auto me-4">
<li class="nav-item">
Contact-Us
</li >
<li class="nav-item">
Pricing
</li>
<li class="nav-item">
Downloads
</li>
</ul>
</div>
</nav>
If you want the link text to be right aligned, just add .text-end to your .navbar-collapse:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.css">
<nav class="navbar navbar-expand-md navbar-dark bg-warning">
PUbG Lite Reborn
<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 text-end" id="navbarSupportedContent">
<ul class="navbar-nav ms-md-auto me-4">
<li class="nav-item">
Contact-Us
</li>
<li class="nav-item">
Pricing
</li>
<li class="nav-item">
Downloads
</li>
</ul>
</div>
</nav>
<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>
If you want the ul.navbar-nav to be positioned on the right side (not 100% width and left aligned text), you can wrap the element with a flex container:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.css">
<nav class="navbar navbar-expand-md navbar-dark bg-warning">
PUbG Lite Reborn
<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">
<div class="d-flex justify-content-end ms-auto">
<ul class="navbar-nav me-4">
<li class="nav-item">
Contact-Us
</li>
<li class="nav-item">
Pricing
</li>
<li class="nav-item">
Downloads
</li>
</ul>
</div>
</div>
</nav>
<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>
I can't get the bootstrap toggle button to work on the browser, how can I identify the problem?
PS I have already added the Bootstrap CDN in my head tag and have added the jQuery and JavaScript in the body.
<nav class="navbar navbar-dark bg-dark navbar-expand-md">
NAVBAR
<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">
<li class="nav-item">
HOME
</li>
<li class="nav-item">
ABOUT
</li>
<li class="nav-item">
TICKETS
</li>
</ul>
</div>
</nav>
The id attribute should not start with #. It should just be: id="navbarSupportedContent"
<nav class="navbar navbar-dark bg-dark navbar-expand-md">
NAVBAR
<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">
<li class="nav-item">
HOME
</li>
<li class="nav-item">
ABOUT
</li>
<li class="nav-item">
TICKETS
</li>
</ul>
</div>
</nav>
https://www.codeply.com/p/xYH3DTrwlt
Try this
remove .navbar-expand-md class to ALWAYS hide navbar links and display the toggler button.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<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">
<li class="nav-item">
HOME
</li>
<li class="nav-item">
ABOUT
</li>
<li class="nav-item">
TICKETS
</li>
</ul>
</div>
</nav>
</body>
</html>
Dropdowns are built on a third party library, Popper.js, which provides dynamic positioning and viewport detection. Be sure to include popper.min.js before Bootstrap’s JavaScript or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper.js.
popper.js.org
This is written in the Bootstrap documentation)))
data-target="#navbarSupportedContent"
The # sign stands for the id.
The issue is here:
id="#navbarSupportedContent"
This should be
id="navbarSupportedContent"
I'm using a Bootstrap navbar and have customised it but when the responsive size moves to mobile the burger menu opens on the left side but I would like it on the right. Can anyone help?
http://stajniazkopyta.x10host.com/test.html
Html -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/navbar.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Caveat">
<title>Stajnia Z Zopyta</title>
<style>body {background-color: black;}</style>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-none">
<button class="navbar-toggler navbar-toggler-right" 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>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="nav navbar-nav navbar-right">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active nav-link-camps">
<a class="nav-link" href="#">Camps</a>
</li>
<li class="nav-item active nav-link-sales">
<a class="nav-link" href="#">Sales</a>
</li>
<li class="nav-item active nav-link-gallery">
<a class="nav-link" href="#">Gallery</a>
</li>
<li class="nav-item active nav-link-contact">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Css -
.navbar{
border-bottom: $lobster-yellow 3px solid;
}
Just change the order of the navbar-brand and collapse button. In Bootstrap V4 for navbar, they have used display: flex; property. By using this content may align like a table-cell. When the device size below 768px, collapse menu gets visible, so the content aligns in order.
Another way is to apply flex-direction: row-reverse; to the navbar when it is below 768px using Media Queries. By this method, you are not needed to change the order from your code, which is in your question.
My Suggestion
My suggestion is to re-order the HTML lines as I give in the Updated Code. Because we don't need to add custom CSS to override the default Bootstrap framework.
Your Code
//Collapse Button
<button class="navbar-toggler navbar-toggler-right" 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>
//Nav brand
<a class="navbar-brand" href="#">Navbar</a>
Updated Code
//Nav brand
<a class="navbar-brand" href="#">Navbar</a>
//Collapse Button
<button class="navbar-toggler navbar-toggler-right" 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>
Image For Reference