Jump to content
Please Use CODE Tags

Bootstrap dropdown not working?

ZeferiniX
 Share
Go to solution Solved by Lumi,

Demn, thanks guys! I got it working now. All I needed was JQuery, good lawd why was this not included in the bundle when downloading bootstrap even though there's the js folder which I was hoping should include JQuery(since there are other js scripts there) if we're to work about these stuffs. Maybe because of licensing stuffs?

 

Anyways, thanks!

http://i.imgur.com/2O6E8vu.png

Posted

Bootstrap 3.2.2 - Darkly Theme from http://bootswatch.com/darkly/
 

Seems to work fine on the site but not when used in my files.

 

Here's my code, pretty much similar to the template code provided in the navigation bar but removed the brand and moved the dropdown to the left.

<nav class="navbar navbar-default">	<div class="container-fluid">		<div class="navbar-header">			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">				<span class="sr-only">Toggle navigation</span>				<span class="icon-bar"></span>				<span class="icon-bar"></span>				<span class="icon-bar"></span>			</button>			<!-- <a class="navbar-brand" href="#">Brand</a> -->		</div>				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">			<ul class="nav navbar-nav">				<li class="dropdown">					<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Brands <span class="caret"></span></a>					<ul class="dropdown-menu" role="menu">						<li><a href="#">Action</a></li>						<li><a href="#">Another action</a></li>						<li><a href="#">Something else here</a></li>						<li class="divider"></li>						<li><a href="#">Separated link</a></li>						<li class="divider"></li>						<li><a href="#">One more separated link</a></li>					</ul>				</li>				<li><a href="#">Link</a></li>				<li><a href="#">Link</a></li>			</ul>						<form class="navbar-form navbar-left" role="search">				<div class="form-group">					<input type="text" class="form-control" placeholder="Search">				</div>				<button type="submit" class="btn btn-default">Submit</button>			</form>						<ul class="nav navbar-nav navbar-right">				<li><a href="#">Sign up</a></li>				<li><a href="#">Log-In</a></li>			</ul>		</div>	</div></nav>

Other info if this matters:

<head>	<link href="css/bootstrap.css" rel="stylesheet" />	<script src="js/bootstrap.js"> </script></head>

Tried including <link href="css/bootstrap-theme.css" rel="stylesheet" />, it's not helping either nor the inclusion of the bootstrap.js, has anyone encountered this? How did you get it to work?

| CPU: Ryzen 5 3600 | MoBo: MSI B450 Tomahawk Max | RAM: T-Force Delta RGB (2x8) 16GB 3200MHz (Black) | GPU: Gigabyte GTX 1660 Ti OC | Case: NZXT H500 (Black) | HDD: WD Black 2TB + Seagate Barracuda 4TB | SSD: Crucial MX500 2TB | PSU: Seasonic GX-550 | Monitor: 3x Asus VC239H |

 

 

Link to comment
https://linustechtips.com/topic/318397-bootstrap-dropdown-not-working/
Share on other sites
Link to post
Share on other sites
Posted

Bootstrap 3.2.2 - Darkly Theme from http://bootswatch.com/darkly/

 

Seems to work fine on the site but not when used in my files.

 

Here's my code, pretty much similar to the template code provided in the navigation bar but removed the brand and moved the dropdown to the left.

<nav class="navbar navbar-default">	<div class="container-fluid">		<div class="navbar-header">			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">				<span class="sr-only">Toggle navigation</span>				<span class="icon-bar"></span>				<span class="icon-bar"></span>				<span class="icon-bar"></span>			</button>			<!-- <a class="navbar-brand" href="#">Brand</a> -->		</div>				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">			<ul class="nav navbar-nav">				<li class="dropdown">					<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Brands <span class="caret"></span></a>					<ul class="dropdown-menu" role="menu">						<li><a href="#">Action</a></li>						<li><a href="#">Another action</a></li>						<li><a href="#">Something else here</a></li>						<li class="divider"></li>						<li><a href="#">Separated link</a></li>						<li class="divider"></li>						<li><a href="#">One more separated link</a></li>					</ul>				</li>				<li><a href="#">Link</a></li>				<li><a href="#">Link</a></li>			</ul>						<form class="navbar-form navbar-left" role="search">				<div class="form-group">					<input type="text" class="form-control" placeholder="Search">				</div>				<button type="submit" class="btn btn-default">Submit</button>			</form>						<ul class="nav navbar-nav navbar-right">				<li><a href="#">Sign up</a></li>				<li><a href="#">Log-In</a></li>			</ul>		</div>	</div></nav>

Other info if this matters:

<head>	<link href="css/bootstrap.css" rel="stylesheet" />	<script src="js/bootstrap.js"> </script></head>

Tried including <link href="css/bootstrap-theme.css" rel="stylesheet" />, it's not helping either nor the inclusion of the bootstrap.js, has anyone encountered this? How did you get it to work?

Make sure you include the correct JQuery script/bundle, otherwise it won't work.

Link to post
Share on other sites
Posted
  • Author

Yes, jquery is needed for bootstraps javascript to work.

 

 

Is jQuery needed for this to work?

 

 

Make sure you include the correct JQuery script/bundle, otherwise it won't work.

 

Demn, thanks guys! I got it working now. All I needed was JQuery, good lawd why was this not included in the bundle when downloading bootstrap even though there's the js folder which I was hoping should include JQuery(since there are other js scripts there) if we're to work about these stuffs. Maybe because of licensing stuffs?

 

Anyways, thanks!

| CPU: Ryzen 5 3600 | MoBo: MSI B450 Tomahawk Max | RAM: T-Force Delta RGB (2x8) 16GB 3200MHz (Black) | GPU: Gigabyte GTX 1660 Ti OC | Case: NZXT H500 (Black) | HDD: WD Black 2TB + Seagate Barracuda 4TB | SSD: Crucial MX500 2TB | PSU: Seasonic GX-550 | Monitor: 3x Asus VC239H |

 

 

Link to post
Share on other sites
Posted
  • Solution

Demn, thanks guys! I got it working now. All I needed was JQuery, good lawd why was this not included in the bundle when downloading bootstrap even though there's the js folder which I was hoping should include JQuery(since there are other js scripts there) if we're to work about these stuffs. Maybe because of licensing stuffs?

 

Anyways, thanks!

http://i.imgur.com/2O6E8vu.png

i want to die

Link to post
Share on other sites
Posted
  • Author

 

Can't believe I didn't read that, just went directly on the Download links since I wanted to work on it asap, thanks, my question has been answered xD

| CPU: Ryzen 5 3600 | MoBo: MSI B450 Tomahawk Max | RAM: T-Force Delta RGB (2x8) 16GB 3200MHz (Black) | GPU: Gigabyte GTX 1660 Ti OC | Case: NZXT H500 (Black) | HDD: WD Black 2TB + Seagate Barracuda 4TB | SSD: Crucial MX500 2TB | PSU: Seasonic GX-550 | Monitor: 3x Asus VC239H |

 

 

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×