CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Kurtiss
Kurtiss

Reputation: 525

Trying to use Bootstrap via Dropdowns

I'm trying to use Bootstrap in my website by referring to it's examples, except, for some reason, the dropdown examples it provides don't work; it just displays a blank page. What I did, in order to make sure I wasn't missing anything, was I went to the Bootstrap website, went to customise, and ensured that I downloaded all possible CSS/Javascript files, ensuring that all possible functions/features were included.

Here is a basic example of what I'm trying to do.

<html>
 <head>
  <title></title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href=".../assets/bs/css/bootstrap-theme.min.css">
  <link rel="stylesheet" href=".../assets/bs/css/bootstrap.min.css">
 </head>
 <body>

  <div class="dropdown">
   <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
   </button>
   <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
   </ul>
  </div>

  <!-- jQuery -->
  <script src=".../assets/js/jquery-2.1.0.min.js"></script>
  <!-- Bootstrap Javascript -->
  <script src=".../assets/bs/js/bootstrap.min.js"></script>

 </body>
</html>

The page is connecting to the scripts, I confirmed this through Google Chrome's inspector. What is more confusing is that I am able to implement SOME of Bootstrap's features, but not all, for example I can create buttons with icons it provides, but I can't create dropdowns.

I've researched this issue, but none of the solutions it provides resolves it. Does anyone know what I'm missing?

Please reply soon, many thanks.

After several checks, I should clarify that yes, I'm using the most up to date Bootstrap, that I should of mentioned that I'm displaying the page through CodeIgniter, and at the moment I am still having difficulty getting it to work, but I will be working on it until I do.

Thank you for your replies.

Upvotes: 0

Views: 169

Answers (3)

Kurtiss
Kurtiss

Reputation: 525

It seems that the Bootstrap tutorials are not fully compatible with the Bootstrap files, in this case, the drop-downs. Specifically the CSS files provided cannot display drop-downs through the examples that the website has provided, so either the tutorial requires updating or the CSS files do.

Currently, v2.3.2 can display drop-downs through the examples given, which could be accessed like this.

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">

Also by referring to other examples, I was able to get this feature to work to an extent, even while using v3.1.0.

<div class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials<b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li><a href="#">PHP</a></li>
        <li><a href="#">MySQL</a></li>
        <li class="divider"></li>
        <li><a href="#">JavaScript</a></li>
        <li><a href="#">HTML5</a></li>
    </ul>
</div>

So in short, either the CSS files requires updating, or the tutorials do.

Many thanks to those who replied and assisted me in allocating the problem.

Upvotes: 1

lozadaOmr
lozadaOmr

Reputation: 2655

I tried recreating your code using Bootply,

this is with Bootstrap 2.3.1 and jQuery 2.0.2

It seems to work fine. It might be because of the version of jQuery you are using

Demo here

EDIT

I have noticed that in your code, you did not indicate the doctype.

This one is stated on the Bootstrap docs:

HTML5 doctype

Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

source : http://getbootstrap.com/css/#overview

<!DOCTYPE html>
<html lang="en">
  ...
</html>

Upvotes: 1

Paul Grimshaw
Paul Grimshaw

Reputation: 21044

You could be using an older version of Bootstrap.

If I remember correctly, you need to add the "dropdown" javascript file separately in the old versions.

I would upgrade to 2.3.1, failing that find the dropdown javascript file and add that too.

2.3.1 docs can be found here:

http://bootstrapdocs.com/v2.3.1/docs/

Otherwise, what errors do you see in the Firebug / Chrome Console window?

Upvotes: 0

Related Questions