Develop Reference

This bootstrap button dropdown is not working. But why?

At first I was using regular html but the dropdown button wasn't working so I changed to jsfiddle to test it out. I saw that the dropwdown still didn't work.
Here's the jsfiddle: https://jsfiddle.net/ugpqxpn6/2/
<div>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</div>
I don't understand why it wouldn't work. I took a look at some similar questions and saw that maybe not including jquery was my problem so I added it but it still seems to malfunction. Can anybody help?

Here is a working fiddle with bootstrap.min.js and jquery.min
https://jsfiddle.net/nrgxh5rr/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Hit F12 on your keyboard to see the developer console, you have a Javascript error:
Error: Bootstrap's JavaScript requires jQuery
Make sure you're including jQuery before bootstrap's js files.

Using Span for Triggering Bootstrap Dropdown

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/

Configuring angular material with rails

I am trying to build my first api in Rails. And for that I want to use angular for front-end and ruby for back-end . I managed to get angular working but for some reason I can't get angular-material to work. I tried using this gem and followed the instructions written there.
The problem I am facing with it that frankly it doesn't work, nor do I get a meaningful error from the web console.
The project I am trying to make can be found here . I know it needs a lot of code refactoring and so on, I am just trying to configure things at the moment.
On the web page this is the only thing that get displayed :
Primary (md-noink)
Disabled
from this command:
<section layout="row" layout-sm="column" layout-align="center center">
<md-button>{{title1}}</md-button>
<md-button md-no-ink class="md-primary">Primary (md-noink)</md-button>
<md-button ng-disabled="true" class="md-primary">Disabled</md-button>
<md-button class="md-warn">{{title4}}</md-button>
<div class="label">Flat</div>
</section>
which makes me believe it doesn't work...
also this is a navbar that has to be green but is not:
<div class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="javascript:void(0)">Brand</a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active">Active</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdown header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<input type="text" class="form-control col-lg-8" placeholder="Search">
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
</div>

when you make your backend with the rails-api, a view is not created, so you don't have to worry about which angular gem to pick from. You can create another directory (and repository) for the client (your angular frontend) and generate the frontend there. Now all you have to worry about is getting data, whether JSON or XML, traveling between the API and your client.
You can find a step by step tutorial here.
Hope it works out!

Bootstrap Dropdown doesn't work after upgrade

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>

Bootstrap dropdown - can't get it to work

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