Skip to main content
D
duenorth09
Participating Frequently
December 13, 2016
Answered

Can't get bootstrap dropdown to work

  • December 13, 2016
  • 2 replies
  • 5292 views

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!

This topic has been closed for replies.
Correct answer Nancy OShea

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

2 replies

Nancy OShea
Nancy OSheaCorrect answer
Community Expert
December 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
Nancy OShea
Nancy OShea
Community Expert
December 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
D
duenorth09Author
Participating Frequently
April 24, 2017

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!

O
osgood_
Brainiac
April 24, 2017

Hope you had a nice Christmas, anyway?

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices