I've updated my code to twitter bootstrap version 3 and got the https://github.com/twbs/bootstrap/releases/download/v3.0.0/bootstrap-3.0.0-dist.zip.
Still my dropdown menu's won't work. Code:
<head>
<link href='http://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Libre+Baskerville:400,700,400italic|Titillium+Web' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/Homestyle.css">
<link href="bootstrap3/css/bootstrap.min.css" rel="stylesheet" media="screen">
<title>My Title</title>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
</head>
<body>
....
....
....
<script type="text/javascript" src="bootstrap3/js/bootstrap.min.js"></script>
</body>
Then the actual button dropdowns:
<div class="btn-group">
<button type="button" class="btn btn-danger">Delley Hangs</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Mijn profiel</li>
<li>Mijn vrienden</li>
<li class="divider"></li>
<li>Settings</li>
</ul>
</div>
What's wrong with my code or with the bootstrap? I think it's my fault, but don't know what's wrong!
Edit: Also my <span class="caret"></span> are smaller than the actual buttons?
I have your code working in a jsfiddle using Bootstrap 3 CDN and jQuery 1.9.1. Perhaps you should check your jQuery version? I don't actually see jQuery listed in your <head> or before </body> at all though?
http://jsfiddle.net/remus/VTt7D/
I copied and pasted your code directly, and used this CDN: http://www.bootstrapcdn.com/
Related
When I pressed the dropdown button, the links were supposed to be sorted one after the other. But I could not. I am using Bootstrap. I'm almost new to software by the way. It may be an easy question.
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
Link 1
Link 2
Link 3
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js"
integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.min.js"
integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"
crossorigin="anonymous"></script>
You need to include "popper.js" library. It's what bootstrap uses for dropdown mechanism if i've researched correct. So this code works;
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
Link 1
Link 2
Link 3
</div>
</div>
</body>
<script
src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js"
integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.min.js"
integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"
crossorigin="anonymous"
></script>
</html>
Just add the data-bs-toggle="dropdown" attribute to dropdown-toggle button.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-bs-toggle="dropdown">Dropdown button</button>
<div class="dropdown-menu">
Link 1
Link 2
Link 3
</div>
</div>
Codepen live :
https://codepen.io/Superawdi/pen/jOzYrvX
I cannot figure out how to get my button for my collapsible navbar not to appear all the time. I have followed various online tutorials with almost the exact same code as mine however I am not achieving the same result.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pentakill - About</title>
<link rel="icon" href="images/pentakilllogo.ico">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Metal Mania' rel='stylesheet'>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<nav class="navbar navbar-expand-sm sticky-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#myCollapsibleNavbar">
<span class="icon-bar metal">Options</span>
</button>
<a class="navbar-brand pentaicon"><img src="images/pentakilllogo.ico"></a>
<span class="navbar-brand metal">Pentakill</span>
</div>
<div class="collapse navbar-collapse" id="myCollapsibleNavbar">
<ul class="nav navbar-nav">
<li>
<a class="metal" href="index.php">Home</a>
</li>
<li>
<a class="metal" href="about.php">About</a>
</li>
<li>
<a class="metal" href="music.php">Music</a>
</li>
<li class="active">
<a class="metal" href="tour.php">Tour</a>
</li>
<li class="nav-item">
<a class="metal" href="members.php">Members</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a class="metal" href="login.php"><span class="glyphicon glyphicon-user"></span>Login/Sign Up</a></li>
</ul>
</div>
</div>
</nav>
I have tried adding and removing various divs but nothing seems to make a difference.
I also tried removing the word "Options" in case that was the culprit, but with no luck.
Are you intentionally using the Bootstrap 3.4 CDN instead of the most recent version? Following along on a tutorial such as https://getbootstrap.com/docs/4.0/components/navbar/ may cause issues. I placed your code into a codepen linked to the latest version and don't see the button, just spacing issues then.
I have a dropdown in my webpage. But it shows the menu items only once. ie-It shows the menu items only when I click it for the first time. If I reload the page again then it work again. Following is the code I have written for the dropdown menu.
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Shop
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Shoes</a>
<a class="dropdown-item" href="#">Handbags</a>
</div>
</li>
Thank you.
And this is my header code
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css">
<title>My title</title>
Add role="button" to your toggle link:
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown" role="button">Shop</a>
Also, make sure you have loaded the Bootstrap JS file in your code.
im trying to create a dropdown button using bootstrap. But it just does not show the list:
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Foo</li>
<li>sad</li>
</ul>
</div>
Bootstrap and css files:
<link href="<?php echo base_url();?>styles/style.css" rel="stylesheet" type="text/css" />
<link href="<?php echo base_url();?>styles/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<link href="<?php echo base_url();?>styles/bootstrap.css" rel="stylesheet" type="text/css" />
Thanks
There are so many ways that dont work well. You can visit and try implementing the code as in http://jsfprimefacesblog.blogspot.com/2012/05/bootstrap-multilevel-dropdown-menu.html
Hi Im trying to create a dropdown button using bootstrap. But it just doesnt seem to come out correctly ?
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Foo</li>
<li>Bar</li>
</ul>
</div>
A jsfiddle is here http://jsfiddle.net/UrgP8/
Any ideas ?
Thanks,
You are loading a hefty amount of external resources into jsfiddle by pasting what is practically the full boostrap html source into the html view.
Here is a much more bare-bones version
that loads only three external files.
http://jsfiddle.net/BqKNV/65/
The base html is the same (SO wouldn't let me post without putting in code...)
<div class="dropdown btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Foo</li>
<li>Bar</li>
</ul>
</div>
Note that jQuery is loaded via jsFiddle's Framework panel,
bootstrap css and js are loaded via the BootstrapCDN:
//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css
//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js
What happens if you save this html as a page, and run it in a browser?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<script type='text/javascript' src="http://twitter.github.com/bootstrap/assets/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
</head>
<body>
<div class="dropdown btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Foo</li>
<li>Bar</li>
</ul>
</div>
</body>
</html>
Ok found what seems to be the problem in your fiddle.
It's that you are loading:
<link href="http://flip.hr/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
I changed it to:
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
And that basically solved it.
You can see it here: http://jsfiddle.net/6hPMb/1/
But besides that, the problem I mentioned in the comments still stands, you are loading both bootstrap-dropdown.js and bootstrap.min.js
You should only use one.