Bootstrap with dropdown menu

Question

I'm writing a simple code using bootstrap for dropdown menu, the code seems fine. However, it doesn't expand when I clicked on the caret. I'm not sure what goes wrong. Can someone help me with this? Thanks for the help.

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>thenewboston</title>
		<meta charset="utf-8">
		<meta name="viewpoint" content="width=device-width, initial-scale=1">
		<!-- Latest compiled and minified CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
		
		<!-- Optional theme -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
		
		<!-- Latest compiled and minified JavaScript -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
	</head>
	
	<body>
		<nav class="navbar navbar-inverse">
			<div class="container-fluid">
				
				<!-- Logo -->
				<div class="navbar-header">
					<a href="navbar.html" class="navbar-brand">ABE TECHNOLOGY</a>
				</div>
				
				<!-- Menu Items -->
				<div>
					<ul class="nav navbar-nav">
						<li class="active"><a href="#">Home</a></li>
						<li><a href="#">About</a></li>
						<li><a href="#">Contact</a></li>
						
						<!-- drop down menu -->
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">My Profile <span class="caret"></span></a>
							<ul class="dropdown-menu">
								<li><a href="#">Friends</a></li>
								<li><a href="#">Photos</a></li>
								<li><a href="#">Settings</a></li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</nav>
	</body>
</html>

Did you try to load the jquery plugin as I mention on my answer below? If Did that help? — BigDropGR
– BigDropGR, Commented Feb 22, 2016 at 10:20
I did added the jQuery in, but when I ran chrome or firefox it didn't work. However, when I ran the same code on jsfiddle.com, it works perfectly fine. — Hachiri
– Hachiri, Commented Feb 22, 2016 at 23:59
Oh, nvm. I used your jQuery and the minified javascript code then it works. — Hachiri
– Hachiri, Commented Feb 23, 2016 at 0:02

marc_s · Accepted Answer · 2016-02-25 21:41:02Z

1

That's because you are not loading the jQuery plugin!!

You need to load this script:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

edited Feb 25, 2016 at 21:41

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Feb 22, 2016 at 9:31

BigDropGR

3452 silver badges11 bronze badges

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

Comments

lorem monkey · Accepted Answer · 2016-02-22 12:37:35Z

0

For Bootstraps javascript components you will need to use jQuery.

You have to include jQuery before the Bootstraps scripts. Best is, you include both scripts at the bottom of your page, right before the closing </body> tag like:

[...your html...]

<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

</body>
</html>

answered Feb 22, 2016 at 12:37

lorem monkey

4,0023 gold badges38 silver badges49 bronze badges

1 Comment

Hachiri Over a year ago

For some reasons, the jQuery you sent is not working, but @BigDropGR works fine. Thanks for the help though.

Collectives™ on Stack Overflow

Bootstrap with dropdown menu

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related