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.
Related
Please find the below details with error.
Error Details:
Failed to compile.
./src/components/Header.vue
Module Error (from ./node_modules/eslint-loader/index.js):
H:\project\VueProjects\stock-trader\src\components\Header.vue
27:2 error Mixed spaces and tabs no-mixed-spaces-and-tabs
✖ 1 problem (1 error, 0 warnings)
Header.vue
<template>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<router-link to="/" class="navbar-brand">Stock Trader</router-link>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<router-link to="/portfolio" activeClass="active" tag="li"
><a>Portfolio</a></router-link
>
<router-link to="/stocks" activeClass="active" tag="li"
><a>Stocks</a></router-link
>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>End day</li>
<li class="dropdown">
<a
href="#"
class="dropdown-toggle"
data-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false"
>Save & Load <span class="caret"></span
></a>
<ul class="dropdown-menu">
<li>Save Data</li>
<li>Load Data</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</template>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Stock Trader</title>
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
-->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
crossorigin="anonymous"/>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
enter image description here
Please advise.
Edited part after resolution of first query.
Desired result screenshot
enter image description here
Result getting screenshot
enter image description here
Editors like VS code have an option to convert all whitespace to tabs or spaces which will prevent your node package manager build from complaining about mixed whitespace encodings (tabs vs spaces). Try clicking 'Select Indentation' located in the bottom right corner in VS code, or look for (or Google) an option for whatever editor you are using, to convert all the whitespace to spaces or tabs.
I am using BootStrap 3.4.1 and collapse is not working. I am using PHPStorm and it is not recognizing data-toggle and data-target. Although no typo on them.
I am learning bootstrap from PluralSight. Tried solution from different websites including w3schools and stackoverflow.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width , initial-scale=1" />
<title>TESTING</title>
<script src="../js/bootstrap.js"></script>
<script src="../js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/bootstrap-theme.css">
</head>
<body>
<div class="navbar navbar-default">
<div class="navbar-header">
<button class="btn btn-success navbar-toggle collapsed"
data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
</div>
<div id="MINE" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="nav"> Home </li>
<li class="nav"> About</li>
<li class="nav"> Books</li>
<li class="nav"> Films</li>
<li class="nav"> Contact</li>
</ul>
</div>
</div>
</body>
</html>
the button should be able to show and collapse class navbar-collapse. but is not responding.
before Clicking the button
After Clicking
This is the Navigation bar
Working code Demo
Just went through your question. I've found a few unconventional things in your code that put me into unease. Mentioning them below. First point will solve your issue while others are hopefully for your knowledge.
Bootstrap needs jquery to be loaded first to perform almost all of it's dynamic activities (in your case it's triggering a toogle event).
It is a good practice to load css files in header and javascripts down in the body (usually before closing tag of body) untill and unless specific purpose is required. It makes your page loading into client's browser faster.
I noticed you're linking two js files. "bootstrap.js" and "bootstrap.min.js". Both files have same javascript code but later one is just minified version. So just include one of them.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width , initial-scale=1" />
<title>TESTING</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" />
</head>
<body>
<div class="navbar navbar-inverse">
<div class="navbar-header">
<button class="btn btn-success navbar-toggle collapsed"
data-toggle="collapse" data-target="#MINE">
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
</div>
<div id="MINE" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="nav"> Home </li>
<li class="nav"> About</li>
<li class="nav"> Books</li>
<li class="nav"> Films</li>
<li class="nav"> Contact</li>
</ul>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.js"></script>
</body>
</html>
<!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
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/
I am using bootstrap framework and tried to replicate http://twitter.github.com/bootstrap/examples/hero.html
can any one please tell me why the dropdown-menu is not working.
the drop down menu which works in the example is not working with my code and i have included proper styles and js ! and one other styles are working so thinking its not a prob with the style any help ll be greatly appreciated
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<meta charset="utf-8">
<title> The first step</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form pull-right">
<input class="span2" type="text" placeholder="Email">
<input class="span2" type="password" placeholder="Password">
<button type="submit" class="btn">Sign in</button>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<hr>
<footer>
<p>© Company 2013</p>
</footer
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
#bana close the footer close tag
Edit your Script Reference like this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
I have used the below online utility before and it has worked for me. It is free and quick. I created a sample dropdown menu and then examined the code to apply to my website. Good luck.
CSS Menu Maker
Use the css and js file the following way: Check Jsfiddle Example with cloud hosted bootstrap css and js
Also you are using wrong version of Jquery in your page it has to be
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
The html should like below :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<meta charset="utf-8">
<title> The first step</title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
</head>
And in footer :
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>