I'm learning to work with Bootstrap, I made a menu, but the menu items get added in the right side, vertically, instead of the left side, horizontally. Help me identify my mistake.
Html file:
<html>
<head>
<title>Register</title>
<link rel ="stylesheet" href="css/bootstrap.min.css"/>
<link rel ="stylesheet" href="css/main.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default " id="navbar">
<div class="container-fluid">
<div class = "navbar-header">
Brand
</div>
<ul class = "nav navbar-nav" >
<li> Home <span class="caret"></span></li>
<li>Team</li>
<!-- Gallery
Partners
News
Contact us
Register -->
</ul>
</div>
</nav>
<div></div>
</body>
</html>
main.css:
#navbar{
/*back ground color*/
background-color: #4311dd
}
/*change color to white*/
#text{
color:#FFFFFF;
}
The webpage I see,
Help me find where I have gone wrong.
This is because you are leaving out important components i.e. stuff that's designed to be part of the Bootstrap navbar. Include those components back in and everything will show up as intended.
Bootstrap 4 is designed to be mobile first.
So, if you leave out the navbar-toggler components, then you get what you see because on mobile devices the navigation is stacked vertically.
Use this sample code as a template:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<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 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="#">Link</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">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
P.S. The most recent version of Bootstrap 4 is beta 3. Beta 3 did introduce a few breaking changes as opposed to beta 2. (although none of them affect the navbar components)
You should add navbar-expand-lg class on <nav> and mr-auto in ul like following way:
<nav class="navbar navbar-default navbar-expand-lg " id="navbar">
<div class="container-fluid">
<div class="navbar-header">
Brand
</div>
<ul class="nav navbar-nav mr-auto" >
<li> Home <span class="caret"></span></li>
<li>Team</li>
<!-- Gallery
Partners
News
Contact us
Register -->
</ul>
</div>
</nav>
Related
I'm very new to HTML and have been struggling to get my dropdown to work for a few hours now. I've searched many posts facing similar issues but I still can't find and resolve the issue. I'm unsure if the issue is caused by my scripts as well
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<header class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#" id="logo">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<nav class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item">
<div class="dropdown">
Dropdown
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
Action
Another action
<div class="dropdown-divider"></div>
Something else here
</div>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="#">Disabled</a></li>
</ul>
</nav>
</header>
Thanks in advance!
I tried replacing data-toggle="dropdown" with data-bs-toggle="dropdown" but it didn't work since I'm using bootstrap 4, copied and pasted the codes directly from bootstrap and it still failed
The CDN isn't working for your jQuery. Bootstrap needs this to run. You get a clue for this in your console, there should be an error saying that it needed jQuery. So you can:
Replace this
https://ajax.googleleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js
With this
https://code.jquery.com/jquery-3.6.1.min.js
You need to add bootstrap jQuery
use this code snippet for done
HTML Code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<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 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="#">Link</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">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
I'm trying to use bootstrap with Angular via CDN. This is my index.html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Laboratorio Sigma</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS only -->
<link rel="icon" type="image/x-icon" href="favicon.ico">
<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>
<app-root></app-root>
<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 created a navbar component and just tried to use a navbar from the bootstrap page:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<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 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="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
But first, the navbar has the search bar weirdly position to the left. And more importantly, the dropdown button is not working. I click it, but the list won't show
I've used bootstrap on other angular projects, but never via CDN. I don't know what could possibly be wrong in this one.
I made it work replacing "data-toggle" with "data-bs-toggle". Same with the data target, "data-bs-target"
<nav class="navbar navbar-expand-lg navbar-expand-md sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">Website </a>
<button class="navbar-toggle collapsed " data-toggle="collapse" data-target="#navbarNavDropdown" aria-expanded="false">
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html"> Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="link1.html"> Link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="link2.html"> Link2</a>
</li>
</ul>
</div>
</div>
</nav>
The button which is supposed to show up only when window is resized to small size, is always showing on the right of the Website name. It is looking ugly in fullscreen, that is, while viewing in computer mode. I want to remove it from showing in high resolution devices. Tell me where am I making mistake.
Because the correct class name for the Bootstrap 4 Navbar is navbar-toggler, not navbar-toggle.
<nav class="navbar navbar-light navbar-expand-lg navbar-expand-md sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">Website </a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNavDropdown" aria-expanded="false">
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html"> Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="link1.html"> Link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="link2.html"> Link2</a>
</li>
</ul>
</div>
</div>
</nav>
https://www.codeply.com/go/9uKT2H0EgP
Only use class navbar-expand-sm if you want the icon to show up only on narrow viewports. Find an overview in the documentation. Also you use a wrong class for the hamburger icon: class="navbar-toggler", like
Zim already said.
<!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-sm navbar-dark bg-dark">
<a class="navbar-brand" href="#">Expand at sm</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample03">
<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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown03" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown03">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-md-0">
<input class="form-control" type="text" placeholder="Search">
</form>
</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>
I want to adjust my dropdown position because on my desktop and in mobile the dropdown not showing properly. It is showing half. Kindly check the image below:
Kindly check my code what I am doing:
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light" style="padding-top: 0.15rem"> <!-- style="padding-top: 2.8rem" -->
<a class="navbar-brand" href="index.php">Admin Panel</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb" aria-expanded="true">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navb" class="navbar-collapse collapse hide">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.php">My Dashboard</a> <!-- style="color:#007bff;" -->
</li>
</ul>
<ul class="nav navbar-nav ml-auto">
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Hello rimi!</a>
<div class="dropdown-menu" style="margin-left:-50px;">
<a class="dropdown-item" href="sp.php">My Profile</a>
<a class="dropdown-item" href="cp.php">Change Password</a>
<a class="dropdown-item" href="logout.php">Logout</a>
</div>
</li>
</ul>
</div>
</nav>
My problem is if I add margin-left:30px; then dropdown not visible on mobile. If I add padding-left:30px; same thing happen. In this case padding and margin not working. Also text link also not properly align. And not fixing by margin and padding.
Any idea or suggestion would be welcome.
Please overwrite bootstrap css in your css file.
.dropdown-menu {
left: -90px;
}
Default is left: 0; in Bootstrap.css file. Add negative value what you need.
You'll need to remove the style="margin-left:-50px;" from your dropdown-menu class, and then change ml-auto to mr-auto (margin-left vs margin-right, which is where your menu is defaulting).
Here's a codepen if that works better for you.
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light" style="padding-top: 0.15rem"> <!-- style="padding-top: 2.8rem" -->
<a class="navbar-brand" href="index.php">Admin Panel</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb" aria-expanded="true">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navb" class="navbar-collapse collapse hide">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.php">My Dashboard</a> <!-- style="color:#007bff;" -->
</li>
</ul>
<ul class="nav navbar-nav mr-auto">
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Hello rimi!</a>
<div class="dropdown-menu" style="margin-left:-50px;">
<a class="dropdown-item" href="sp.php">My Profile</a>
<a class="dropdown-item" href="cp.php">Change Password</a>
<a class="dropdown-item" href="logout.php">Logout</a>
</div>
</li>
</ul>
</div>
</nav>
This question already has answers here:
Bootstrap 4 - Toggle button not working [duplicate]
(3 answers)
Closed 4 years ago.
I just created a new file and copy and pasted the Bootstrap Starting Code from its official site.
But the problem is whenever I minimize the browser screen to test how this menu works in small devices, the menu toggle button does not seem to be working.
As in this image shows, when I click on the button, it does not collapse and shows the menu items, somehow:
So what's wrong with this menu?
Code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<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 topMenu" id="navbarSupportedContent">
<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="#">Link</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">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</body>
</html>
Try this code - if you post your code then I can see what your doing. Do you definitely have the class="navigation-toggle" and data-toggle="collapse" and data-target="#navigation-id" (which links to your nav menu - this needs to be done to sync the two up.
Use the CDN
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<header class="navigation navbar" role="navigation">
<div class="container-fluid">
<div class="row">
<header class="navigation navbar" role="navigation">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<img class="navbar-brand contini-logo" src="contini-logo.jpg">
</div>
<nav class="col-sm-8">
<div class="row">
<div class="col-sm-12">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="contini-navigation">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div> <!--Navbar header end - wierd since it is a wrapper -->
<div class="collapse navbar-collapse" id="contini-navigation">
<ul class="nav navbar-nav" id="main-menu">
<li><a>Home</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">Our Restaurants<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Contini George Street</li>
<li>Canonball Restaurant & Bar</li>
<li>The Scottish Cafe</li>
</ul>
</li>
<li><a>About</a></li>
<li><a>Events</a></li>
<li><a>What's On</a></li>
<li><a>News</a></li>
<li><a>Gifts</a></li>
</ul>
</div> <!-- id contini navigation -->
</div> <!-- col-sm-12 -->
</div> <!-- row -->
<!-- <div class="row"> ===== DON"T Understand what they have done on the original site here =====
<div class="col-sm-12">
</div>
</div> -->
</nav>
</div> <!-- row -->
</div> <!-- container -->
</header>