<!DOCTYPE html>
<html>
<head>
<title>Dropdown</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Article<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Technology</li>
<li>Technology 2</li>
<li>Technology 3</li>
</ul>
</div>
</body>
</html>
this code is not working properly on my Browser(firefox),the dropdown-list is not apearing when I click the button.. Please help
Please try this.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Article
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Technology 1</li>
<li>Technology 2</li>
<li>Technology 3</li>
</ul>
</div>
When using Bootstrap, always make sure that head section contains:
jquery script
bootstrap javascript
bootstrap css file
This has to be the order, otherwise it won't work.
D Sai Krishna's code (especially first three rows) is how it is supposed to be. I always find it better to use external link to .js and .css files than to use local files. To conclude, in head section paste external links (these one's are current as of this writing):
1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> //This will initialize jQuery and enable it to work properly//
2. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> //This will implement Javascript whenever Bootstrap is being used (if applicable). //
3. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> //This will enable Bootstrap styles to be applied to your HTML//
For reference, visit W3schools.com/bootstrap where you can find how to implement above mentioned lines and where. You will also find current external links of bootstrap .js and .css
Related
I cannot find out why the dropdown menu does not work. I am completely new in web dev
enter image description here
Make sure you have added bootstrap CDN link like:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
Check this link for navbar with dropdown menu:
https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_navbar_dropdown&stacked=h
Post your html and css here. I can see only html code in image
Make the dropdown-menu class div tag a ul tag and all the links that need to be dropdown-items in li tags. That should work I guess.
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Categories
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-item">Item 1</li>
<li class="dropdown-item">Item 2</li>
<li class="dropdown-item">Item 3</li>
</ul>
</li>
I am using a Bootstrap Pill Navigation (Bootstrap 4). Code is as below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="bootstrap-4.5.0-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="bootstrap-4.5.0-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<ul class="nav nav-pills">
<li class="nav-item"><a id="homeMenu" class="nav-link active" data-toggle="pill" href="#home">HOME</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="pill" href="#about">ABOUT</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="pill" href="#contact">CONTACT</a></li>
</ul>
<div class="tab-content container-fluid">
<div id="home" class="tab-pane fade show active" style="background-color:yellow">
<h1>Home</h1>
</div>
<div id="about" class="tab-pane fade" style="background-color:red">
<h1>About</h1>
</div>
<div id="contact" class="tab-pane fade" style="background-color:orange">
<h1>Contact</h1>
</div>
</div>
</div>
</body>
</html>
This code works perfectly on localhost. But when it goes live, the links do not redirect to the respective id. Instead, the domain just shows as www.xyz.com/#(id) (when respective links are clicked) and stays on the initial view (which is the home tab). I am a newbie, so not really sure where I have gone wrong! Please help!
Try using a CDN version of jquery and bootstrap, i.e. replace these lines
<link href="bootstrap-4.5.0-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="bootstrap-4.5.0-dist/js/bootstrap.min.js"></script>
with
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
This is usually caused by Javascript, bootstrap and jquery files not being referenced properly from their respective folders since you are using them locally, make sure they are being targeted properly or use their direct CDN links to reference them.
Possible solutions are:
Add "../" to your script src links
This depends on the level or hierarchy of your folders.
Use the CDN versions of bootsrap files.
Put scripts at the bottom of your page instead of header area.
To create an anchor link you must name the target. You can use plain HTML.
Without href attribute, which indicates the hyperlink, the anchors are not seen as links, but their formatting is indistinguishable from "normal" text.
W3C explanation
So:
This is the link
<a name="home">This is the target</a>
In your case:
<!-- Links -->
<ul class="nav nav-pills">
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
<!-- Sections -->
<div id="home">
<a name="home"><h1>Home</h1></a>
</div>
<div id="about">
<a name="about"><h1>About</h1></a>
</div>
<div id="contact">
<a name="contact"><h1>Contact</h1></a>
</div>
Try Bootstrap CDN from https://www.bootstrapcdn.com/ for {CSS, JS...} without any hesitation.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Sometimes when we are working on the local machine, we just give a static path based on our OS, but when we deploy the website, the local development OS and Deployment OS differs from each other sometimes. So if we use CDN then the problem will solve with ease.
Easiest Solution is using a CDN (Manual approach also)
You can just plug the below snippet, and it should be working for you!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
</script>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="container-fluid py-2">
<ul class="nav nav-pills">
<li class="nav-item mr-2"><a id="homeMenu" class="nav-link active bg-primary text-white" data-toggle="pill" href="#home">HOME</a></li>
<li class="nav-item mr-2"><a class="nav-link bg-danger text-white" data-toggle="pill" href="#about">ABOUT</a></li>
<li class="nav-item mr-2"><a class="nav-link bg-warning text-white" data-toggle="pill" href="#contact">CONTACT</a></li>
</ul>
<div class="tab-content mt-2">
<div id="home" class="tab-pane fade show active bg-primary my-5 p-5">
<h1>Home</h1>
</div>
<div id="about" class="tab-pane fade bg-danger my-5 p-5">
<h1>About</h1>
</div>
<div id="contact" class="tab-pane fade bg-warning my-5 p-5">
<h1>Contact</h1>
</div>
</div>
</div>
</body>
</html>
You may try out this snippet directly from here JSFiddle Link
If you still wish to use relative paths:
Manual Approach (In Windows):
Create a folder called as libraries in the same directory as your index.html with the above code
Download the files using this link. Unzip it
Copy the bootstrap.min.css file from bootstrap-4.5.2-dist\css to the libraries directory
Copy the bootstrap.bundle.min.js from bootstrap-4.1.3-dist\js to the libraries directory
Download jquery files using this link. Copy the contents into a jquery-3.5.1.min.js file in the libraries directory
Update the HTML code as below:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./libraries/bootstrap.min.css">
<script src="./libraries/jquery-3.5.1.min.js"></script>
<script src="./libraries/bootstrap.bundle.min.js"></script></script>
</head>
PS: I know it is verbose, but just to be absolutely certain!
Hello my bootstrap nav is not dropping down into different sections like I've seen it in examples on multiple sites. I've tried moving things around but to no avail. I feel like I'm missing something very simple though so any input would be much obliged :D
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/styles/style.css">
<link rel=stylesheet type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<title>Personal Portfolio</title>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<footer>
</footer>
</body>
</html>
AN EXAMPLE :D
https://jsfiddle.net/pajdnLwv/
You missed loading the following JS libraries to make the dropdown menu work:
jQuery library (to get the Bootstrap JS work)
Bootstrap JS (to get the dropdown work)
See a working solution: JSFiddle
Add this to your <head> to get it working:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
You just need to include the javascript files in your head tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
You can try it here
Updated answer for anyone using Bootstrap 4.
Please note that in Bootstrap 4, dropdown menus depend on the popper.js library as well (the umd version specifically). So to get them to work, you need jquery, popper, and bootstrap loaded, in that order. As of today, that looks like this:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
Source: Bootstrap Docs > Introduction > Quick Start
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/
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.