CODEWITHSUNDEEP
twitter-bootstrapmenudropdown
Hachiri
Hachiri

Reputation: 13

Bootstrap with dropdown menu

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>

Upvotes: 1

Views: 205

Answers (2)

BigDropGR
BigDropGR

Reputation: 345

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>

Upvotes: 1

lorem monkey
lorem monkey

Reputation: 3992

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>

Upvotes: 0

Related Questions