I am trying to get the Bootstrap component Dropdown to work.
<div class="dropdown">
<a data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li>Item</li>
</ul>
</div>
What am I doing wrong?
http://jsfiddle.net/xDUR9/
Add jquery to your code.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Demo
Use this code and don't forget to include jQuery and bootstrap.min.js in your document.
<div class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</div>
You can check out this link for live demo - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-dropdowns.php
Related
I want to create multilevel dropdwon using bootstrap 4 and angular 7.
I could create simple dropdown in navbar using the official documentation of bootstrap.
But when i tried to create multilevel dropdown, it wont working.
Bootstrap 4: Multilevel Dropdown Inside Navigation
using the above link , I could find a solution to make multilevel dropdown.
But it uses some kind of jQuery code for working fine.
Is there any built in method for making multilevel dropdown using bootstrap?
I didn't see anything related to this in official documentation of bootstrap .
I don't know whether I missed any scripts or css in my code.
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/popper.js/dist/popper.min.js"
],
here is my angular.json part for bootstrap css and js.
any kind of Solution will be thankful.
I need the result something like this
Try with this:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="container">
<div class="row">
<h2>Multi level dropdown menu in Bootstrap 3</h2>
<hr>
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li>Some action</li>
<li>Some other action</li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Hover me for more options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level</a></li>
<li class="dropdown-submenu">
Even More..
<ul class="dropdown-menu">
<li>3rd level</li>
<li>3rd level</li>
</ul>
</li>
<li>Second level</li>
<li>Second level</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
See Reference: https://bootsnipp.com/snippets/kM4Q
Bootstrap dropdown code works fine (without angular 2) but same code is integrated with angular 2, it fails to work as expected.
HTML and CSS Code: [Dropdown is working.]
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="ti-user"></i>
<p>You can</p>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Login</li>
<li>Signup</li>
</ul>
</li>
</ul>
</div>
HTML and CSS with Angular 2 [Dropdown is not working.]
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">
<i class="ti-user"></i>
<p>You can</p>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a [routerLink]="['/login']">Login</a></li>
<li><a [routerLink]="['/signup']">Signup</a></li>
</ul>
</li>
</ul>
</div>
<ul class="dropdown-menu">
<li><a routerLink='login'>Login</a></li>
<li><a routerLink='signup'>Signup</a></li>
</ul>
Try this.. with final version, routerLink shouldn't be used as biniding unless you have path params.
Then in router file
RouterModule.forRoot([
{path:"login", component : },
{path: "signup", component: }
])
Certain Bootstrap Elements do not work in Angular2/4. Luckily the Angular UI team has built out Bootstrap 4 Elements in Angular components.
Follow these instructions to install
Documentation for dropdown
Note: this is tested with angular 4.0.3 so you may have to find the version that works with angular 2.
I have several icons in the header that is used from a font and wrapped with
<li style="margin-top: 15px">
<span class="myIcons" id="messages" style="font-size: 5px">m</span>
</li>
I want to use it to trigger bootstrap dropdown however in its documentation, it uses button and div and, I couldn't figure out how to trigger it when clicked on the font.
Should I try using jquery and try to trigger the dropdown to open on click on #messages?
You do not have to use <button>'s and <div>'s - the important thing is to have a data-toggle="dropdown" on the triggering element :
<ul class="dropdown">
<!-- your markup -->
<li style="margin-top: 15px" data-toggle="dropdown">
<span class="myIcons" id="messages" style="font-size:5px">m</span>
</li>
<!--// your markup -->
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</ul>
demo -> http://jsfiddle.net/7ujpzs58/
I have been re-building a site with Bootstrap, but I know that many of the links will change as I build the site. It seems the best plan to use HTML templating to produce the links in the navbar.
However, I just can't get it to work at all. I am guessing there may be some issue with the collapsable navbar using javascript, and when each function runs. This is just a guess, I am a beginner.
This is the HTML - (the handlebars link is in the header)
<script id="some-template" type="text/x-handlebars-template">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-align-justify"></span>
</button>
<nav class="navbar-collapse collapse" role="navigation">
<ul class="navbar-nav nav">
<li><span class="glyphicon glyphicon-home"></span> Home</li>
<li class="dropdown">
About<b class="caret"></b>
<ul class="dropdown-menu">
<li>Intention</li>
<li>Membership</li>
<li>Genealogy</li>
<li>Contact</li>
</ul>
</li>
<li class="dropdown">
Writings<b class="caret"></b>
<ul class="dropdown-menu">
<li>Poetry</li>
<li>Articles</li>
<li>Lectures</li>
<li>Qur’anic Study</li>
<li>Sufi Stories</li>
<li>Thoughts</li>
<li>Book Reviews</li>
<li>Library</li>
</ul>
</li>
<li>Sharib Press</li>
<li>99 Names</li>
<li class="dropdown">
Persian Pages<b class="caret"></b>
<ul class="dropdown-menu">
<li>Hafiz Shirazi</li>
<li>First Line index</li>
<li>Glossary</li>
</ul>
</li>
<li>Ajmer</li>
<li>Konya</li>
<li class="dropdown">
Images<b class="caret"></b>
<ul class="dropdown-menu">
<li>Photos</li>
<li>Art Gallery</li>
<li>Sufi Shrines</li>
</ul>
</li>
</ul>
</nav>
</script>
</div>
<script type="text/javascript" src="script.js"></script>
This is the script file -
var source = $("#some-template").html();
var template = Handlebars.compile(source);
var data = {
home : "/home.html",
etc.
};
$("#content-placeholder").html(template(data));
I copied this from a tutorial mostly, and the parent div has the correct ID.
Is it even possible to use templating in this case?
OK incase anyone stumbles across this having the same issue, there was only a small issue.
The fact that one of the data names in the script began with a number '99' (i didn't show this in my question as I assumend the data was fine). To solve this I simply put it in quotation marks.
I was trying to update my version of bootstrap from 3.1.0 to the currently latests 3.3.0.
But I noticed after upgrading that my dropdown menu's aren't working anymore.
For some reason the javascript doesn't pickup the elements with the .dropdown-toggle css class.
But when I dive into the chrome javascript console and execute the following command:
$('.dropdown-toggle').dropdown()
I notice the dropdown menu's do work. I compared the html of the menu's before and after this command and it remained the same.
I also looked in the release notes from bootstrap and could find any breaking changes regarding dropdown menus. This is a example piece of my code:
<ul>
<li class="dropdown">
<a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#">Customers</a>
</li>
</ul>
<ul aria-labelledby="dLabel" class="dropdown-menu" role="menu">
<li>
Overview
</li>
<li>
Customer form
</li>
</ul>
Does anybody got a tip?
Worked just fine, only thing you must do is to use Jquery latest
Here is working fiddle
http://jsfiddle.net/2qWy8/22/
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>