im trying to create a dropdown button using bootstrap. But it just does not show the list:
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Foo</li>
<li>sad</li>
</ul>
</div>
Bootstrap and css files:
<link href="<?php echo base_url();?>styles/style.css" rel="stylesheet" type="text/css" />
<link href="<?php echo base_url();?>styles/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<link href="<?php echo base_url();?>styles/bootstrap.css" rel="stylesheet" type="text/css" />
Thanks
There are so many ways that dont work well. You can visit and try implementing the code as in http://jsfprimefacesblog.blogspot.com/2012/05/bootstrap-multilevel-dropdown-menu.html
Related
Below is the relevant HTML for my _Layout.cshtml page. My issue is that when you click the dropdown menu, Supporting Tables, nothing happens - nothing drops down. I have even tried many other examples after searching Google, but none worked. Finally, one stylesheet link from an online how-to worked, but it changed the styles of my page, so am looking for a solution that won't do that.
Would appreciate it if someone could take a look and see what I might have wrong/be missing. I think it must be a script src or stylesheet link, but I do not know which one I would need to add or replace. Very new to this, so am sorry for my ignorance. Thank you!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - EmergencyContactsWeb</title>
<link rel="stylesheet" href="~/css/bootswatch_darkly.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.2/font/bootstrap-icons.css">
<!-- JavaScript Bundle with Popper -->
<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>
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Index">PHECWeb</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="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-page="/InfoSites/Index">Site Information</a>
</li>
<!--Dropdown Below-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Supporting Tables</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" asp-area="" asp-page="/MDSpecialties/Index">MD Specialities</a>
<a class="dropdown-item" asp-area="" asp-page="/ResCategories/Index">Residence Categories</a>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">...
Found this on another stackoverflow post (I had searched here prior to posting the question, but must have used other search terms. I found this on Google.)
I needed to include these script srcs under my link rels and in this order:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
The link to the original solution is here:
Bootstrap 4 Dropdown Menu not working?
Hope that can help others! I had no idea there was a particular order.
You are using Bootstrap but cdn of bootstrap CSS is not included in your head tag. The only thing you have to do is to add this to your head tag :
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
I have a dropdown in my webpage. But it shows the menu items only once. ie-It shows the menu items only when I click it for the first time. If I reload the page again then it work again. Following is the code I have written for the dropdown menu.
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Shop
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Shoes</a>
<a class="dropdown-item" href="#">Handbags</a>
</div>
</li>
Thank you.
And this is my header code
<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/bootstrap.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>
<link rel="stylesheet" type="text/css" href="css/main.css">
<title>My title</title>
Add role="button" to your toggle link:
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown" role="button">Shop</a>
Also, make sure you have loaded the Bootstrap JS file in your code.
I just haven't been able to figure out the syntax
I am trying to have a drop-down menu appear when I click on the second button.
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity=
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin=
"anonymous" type="text/css" />
<!-- Font Awesome -->
<script src="https://use.fontawesome.com/926120954b.js" type="text/javascript">
</script>
<!-- My CSS -->
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<ul class="nav nav-tabs">
<li role="presentation"><i class="fa fa-home fa-1g" aria-hidden="true"></i></li>
<!-- ****BEGIN THE DROPDOWN TAB-->
<li role="Presentation" class="dropdown-menu">
<a class="Pet" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Community <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>item</li>
</ul>
</li>
<!-- ***END THE DROPDOWN TAB -->
<li role="presentation">Pet Help</li>
<li role="presentation">Pets for Sale</li>
<li role="presentation">Pet Services</li>
</ul>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type=
"text/javascript">
</script>
</body>
</html>
My first attempt at making a nav menu. (For some reason, I am unable to submit this question without providing "details" so please forgive this meaningless text here)
I think you're missing the call to bootstrap's javascript library which is needed for the hamburger nav. Try adding this after you add the jquery reference (i.e. <script src="...jquery.min.js"...)
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
For more information, see the Bootstrap documentation page: Getting Started, as well as the updated code snippet below.
<link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity=
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin=
"anonymous" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type=
"text/javascript">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Font Awesome -->
<script src="https://use.fontawesome.com/926120954b.js" type="text/javascript">
</script>
<!-- My CSS -- >
<link rel="stylesheet" type="text/css" href="mystyle.css">-->
<!--end head: </head> start body:<body>-->
<ul class="nav nav-tabs">
<li role="presentation"><i class="fa fa-home fa-1g" aria-hidden="true"></i></li>
<!-- ****BEGIN THE DROPDOWN TAB-->
<li role="Presentation" class="dropdown-menu">
<a class="Pet" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Community <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>item</li>
</ul>
</li>
<!-- ***END THE DROPDOWN TAB -->
<li role="presentation">Pet Help</li>
<li role="presentation">Pets for Sale</li>
<li role="presentation">Pet Services</li>
</ul>
I've updated my code to twitter bootstrap version 3 and got the https://github.com/twbs/bootstrap/releases/download/v3.0.0/bootstrap-3.0.0-dist.zip.
Still my dropdown menu's won't work. Code:
<head>
<link href='http://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Libre+Baskerville:400,700,400italic|Titillium+Web' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/Homestyle.css">
<link href="bootstrap3/css/bootstrap.min.css" rel="stylesheet" media="screen">
<title>My Title</title>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
</head>
<body>
....
....
....
<script type="text/javascript" src="bootstrap3/js/bootstrap.min.js"></script>
</body>
Then the actual button dropdowns:
<div class="btn-group">
<button type="button" class="btn btn-danger">Delley Hangs</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Mijn profiel</li>
<li>Mijn vrienden</li>
<li class="divider"></li>
<li>Settings</li>
</ul>
</div>
What's wrong with my code or with the bootstrap? I think it's my fault, but don't know what's wrong!
Edit: Also my <span class="caret"></span> are smaller than the actual buttons?
I have your code working in a jsfiddle using Bootstrap 3 CDN and jQuery 1.9.1. Perhaps you should check your jQuery version? I don't actually see jQuery listed in your <head> or before </body> at all though?
http://jsfiddle.net/remus/VTt7D/
I copied and pasted your code directly, and used this CDN: http://www.bootstrapcdn.com/
Hi Im trying to create a dropdown button using bootstrap. But it just doesnt seem to come out correctly ?
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Foo</li>
<li>Bar</li>
</ul>
</div>
A jsfiddle is here http://jsfiddle.net/UrgP8/
Any ideas ?
Thanks,
You are loading a hefty amount of external resources into jsfiddle by pasting what is practically the full boostrap html source into the html view.
Here is a much more bare-bones version
that loads only three external files.
http://jsfiddle.net/BqKNV/65/
The base html is the same (SO wouldn't let me post without putting in code...)
<div class="dropdown btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Foo</li>
<li>Bar</li>
</ul>
</div>
Note that jQuery is loaded via jsFiddle's Framework panel,
bootstrap css and js are loaded via the BootstrapCDN:
//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css
//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js
What happens if you save this html as a page, and run it in a browser?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<script type='text/javascript' src="http://twitter.github.com/bootstrap/assets/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
</head>
<body>
<div class="dropdown btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Foo</li>
<li>Bar</li>
</ul>
</div>
</body>
</html>
Ok found what seems to be the problem in your fiddle.
It's that you are loading:
<link href="http://flip.hr/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
I changed it to:
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
And that basically solved it.
You can see it here: http://jsfiddle.net/6hPMb/1/
But besides that, the problem I mentioned in the comments still stands, you are loading both bootstrap-dropdown.js and bootstrap.min.js
You should only use one.