Bootstrap / Dropdown Button

Question

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><a href="#">Foo</a></li>
        <li><a href="#">Bar</a></li>
    </ul>
</div>

A jsfiddle is here http://jsfiddle.net/UrgP8/

Any ideas ?

Thanks,

It seems like a javascript problem: for starters you are including bootstrap-dropdown.js and bootstrap.min.js you should only need one, but that doesn't solve the problem in the fiddle... — Agush
– Agush, Commented Dec 22, 2012 at 0:20

mg1075 · Accepted Answer · 2013-07-27 16:03:29Z

7

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><a href="#">Foo</a></li>
        <li><a href="#">Bar</a></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><a href="#">Foo</a></li>
            <li><a href="#">Bar</a></li>
        </ul>
      </div>
    </body>
    </html>

edited Jul 27, 2013 at 16:03

answered Dec 22, 2012 at 0:40

mg1075

18.2k8 gold badges63 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

felix001 Over a year ago

Thanks for your response. It seems to be that they all work in jsfiddle but as soon as I try directly within a browser I get the same issue ?

mg1075 Over a year ago

@felix001 - not quite sure what you mean. I've pasted the code, with a few more items removed, that was in the jsfiddle. What happens when you run that in a browser?

felix001 Over a year ago

Many Thanks, its now working I think it was how I was loading the js scripts.

Agush · Accepted Answer · 2012-12-22 00:55:32Z

4

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.

answered Dec 22, 2012 at 0:55

Agush

5,1061 gold badge22 silver badges32 bronze badges

Collectives™ on Stack Overflow

Bootstrap / Dropdown Button

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related