cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Exit
search
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0
Upvote

Can't get bootstrap dropdown to work

duenorth09
Community Beginner ,
Dec 13, 2016 Dec 13, 2016

I always have this issue... I grab a Bootstrap Menu Dropdown Snippet but the dropdown never appears to work? Test file online at http://www.duenorthdesign.com/oconto/test2.html. Still learning Bootstrap and customizing it all, so I'm sure I'm missing something? Thanks in advance!

5.3K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Nancy OShea Community Expert
Community Expert , Dec 13, 2016 Dec 13, 2016

So to get you back on the right path, here's a working document with split button dropdown.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap 3.3.7 Starter</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<!--Bootstrap-->

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

...
Translate
replies 5 Replies 5
latest latest Jump to latest reply
Nancy OShea Community Expert
Community Expert ,
Dec 13, 2016 Dec 13, 2016

You have so many different versions of Bootstrap, it's small wonder it doesn't work right.

Use the latest version of Bootstrap (3.3.7) and don't combine it with older ones.

Remove what you have now and use this in your <head> tag.

<!--Bootstrap- 3.3.7 minified CSS->

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Remove other JS files & put this at page bottom, before your closing </body> tag

<!--latest jQuery-->

<script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous"></script>

<!--Bootstrap 3.3.7 minified JS-->

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
duenorth09
Community Beginner ,
Apr 24, 2017 Apr 24, 2017
In Response To Nancy OShea

A bit late in getting back to this - but anyone who uses the dmxzone bootstrap 3 extension may have the same issue here. Even when you try to delete their css and js code and use the cdn, upon saving it adds it back in. So you need to go into your dmx extension and make sure you have "auto update" turned off. It causes such headaches I feel it's beter to just work on your bootstrap skills and forget the extension!

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
osgood_
LEGEND ,
Apr 24, 2017 Apr 24, 2017
In Response To duenorth09

Hope you had a nice Christmas, anyway?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Nancy OShea Community Expert
Community Expert ,
Apr 24, 2017 Apr 24, 2017
LATEST
In Response To osgood_

And a good Easter!

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Nancy OShea Community Expert
Community Expert ,
Dec 13, 2016 Dec 13, 2016

So to get you back on the right path, here's a working document with split button dropdown.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap 3.3.7 Starter</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<!--Bootstrap-->

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>

<body>

<div class="container">

<div class="row">

<div class="col-sm-10">

<h3>Working Split Button Dropdown</h3>

<!-- Split button dropdown -->

<div class="btn-group">

  <button type="button" class="btn btn-danger">Click Me</button>

  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

    <span class="caret"></span>

    <span class="sr-only">Toggle Dropdown</span>

  </button>

  <ul class="dropdown-menu">

    <li><a href="#">Action</a></li>

    <li><a href="#">Another action</a></li>

    <li><a href="#">Something else here</a></li>

    <li role="separator" class="divider"></li>

    <li><a href="#">Separated link</a></li>

  </ul>

<!--end split button--></div>

<!--end col--></div>

<!--end row--></div>

<!--end container--></div>

<!--latest jQuery-->

<script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous"></script>

<!--Bootstrap-->

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Copyright © 2025 Adobe. All rights reserved.
Using the Community Experience League Terms of Use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices