1

I downloaded the Bootstrap code from their site. I wrote following HTML file in the bootstrap directory (so that the relative paths are correct)

<!DOCTYPE html> <html lang = "en"> <head> <title>Test</title> <link href="css/bootstrap.css" rel="stylesheet" type="text/css" /> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> Hello world <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> <li><a tabindex="-1" href="#">Action</a></li> <li><a tabindex="-1" href="#">Another action</a></li> <li><a tabindex="-1" href="#">Something else here</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">Separated link</a></li> </ul> </body> </html>

When I open that file in chrome, I do not see anything else except "Hello World". I have seen another question Why is my Bootstrap code not working? I have taken care that relative paths are correct, but code is still not working. I am sure its something very silly. Can anyone help me spot it?

Improve this question
2
  • I know you think you have the correct paths, but open your console and make sure. Wrong paths are the most likely cause of this problem, I don't see anything else that would cause it in this case. You have valid html, all of the attributes are in place, leaving missing includes as the only possible cause. Commented Dec 18, 2012 at 16:47
  • @KevinB, I did that. I opened the console(in chrome) and under "Resources" tab, I can see "bootstrap.min.js" and "bootstrap.css" Commented Dec 18, 2012 at 16:52

1 Answer 1

Reset to default
2

Bootstrap will be working fine, your problem is that you've copied and pasted the wrong bit of code from the bootstrap documentation.

It looks like you've just copied and pasted the code found at the top of the components.html page here.

This is done purely illustratively of what is possible. If you were wanting just this to show up, you'd want to change it too:

<ul class='dropdown-menu' role='menu' aria-labelledby='dropdownMenu' style='display: block; position: static'>

For actual useful-ness though, you want to read this section of the documentation which will tell you how to use it usefully.

JSFiddle of it correctly working

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

2 Comments

Cool, that certainly did the trick. Since the documentation is non-linear, I was not sure what is the starting point. I just picked up the first thing and wanted to try it.
BTW, the three <div> in your jsfiddle are not necessary. Code works fine without them. Although I do understand why you have put them there. I just wanted to clarify to anyone else who takes a look at it in future.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.