data toggle and data target not working BootStrap 3 - html

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>

Related

Failed to compile Vue project and getting "Mixed spaces and tabs no-mixed-spaces-and-tabs" error

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.

Can't figure out how to make my collapsible navbar button not always visible (Bootstrap v.3)

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.

Bootstrap 4 navbar toggle not working

I have searched this problem in multiple threads here on SO and it is a real head-scratcher as to why this isn't working. The below example (which is from a SO thread on this issue) works when it is in jsFiddler, but doesn't work when I serve it from my local machine.
So, I literally copy-pasted the code from jsFiddler to my own file and loaded that file in the same browser that rendered it correctly in the fiddler preview window.
I have tried adding the !doctype html tag and I have tried it with and without head tags around the title/link rel sections, with no change. The navbar is rendered with the brand name and globe on the left, then "link 1 link 2 link3", then a gap, then sign in/register/log out renders on the right side of the navbar. I have also tried serving this as a django page from the dev server and I have tried putting it in a flat HTML file and drag-dropping it from the filesystem. I have also tried several very similar examples from SO with the same basic result.
Here is the page on my server:
http://www.walesdata.com/test.html
Here is a screen shot of how it is rendering for me:
http://www.walesdata.com/Screen.png
I like the look and function of this when I see the working example, but I have not gotten it to work locally.
<!DOCTYPE html>
<html lang="en">
<title>
Site title
</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">
<i class="fa fa-globe" aria-hidden="true"></i> Brand Name
</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-angle-double-down"></i>
</button>
<div class="navbar-collapse collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">Link 1</li>
<li class="nav-item">Link 2</li>
<li class="nav-item">Link 3</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">Sign In</li>
<li class="nav-item">Register</li>
<li class="nav-item">Log Out</li>
</ul>
</div>
</nav>
</div>
<div class="container">
<nav class="navbar navbar-inverse fixed-bottom text-center">
<!--<a class="navbar-brand" href="#">Fixed bottom</a>-->
<h6 class="text-center">Footer</h6>
</nav>
</div>
<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.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</html>
System info: Mint Linux and Mozilla Firefox. Served from django 2.0 and also from a flat HTML file on the file system.
In Bootstrap 4.1, I fix this issue by manually invoking the JS to toggle with an onclick handler in a button:
<button onclick="$('#navbar-main-collapse-1').toggleClass('collapse')" type="button">
<i aria-hidden="true" class="fa fa-bars"/>
</button>
Example here: https://www.xn--javiercaon-09a.com/2018/01/servicio-atencion-cliente-social-crm-scrm.html
The result of this was that the navbar-collapse will render as a regular navbar on a laptop, and then become the collapsed version on a smaller screen. So if you go into mobile view (Ctl+Shift+M in firefox) you'll see the collapse correctly.

Why my boostrap 4.0 beta is not working properly?

I downloaded bootstrap 4.0 beta from getbootstrap.com, I included CSS & js from dist folder, but my styles are incomplete (navbar, hidden, visible are not working) do I need any extra stuff to include for my bootstrap folder,(do i need sass folder).
I included my css, js & jquery with correct path.
Can anyone help me with answer.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<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>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
</body>
</html>
You mentioned that you downloaded Bootstrap 4.0 beta, so I'm assuming you're trying to use the file path to use it. You do not need to download SASS. If you don't really need all its features then you can just follow Bootstraps 'quick start guide', https://getbootstrap.com/docs/4.0/getting-started/introduction/.
<!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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</body>
</html>
Just to get you started, try that. Then maybe later you can pick specific components.

How to create responsive navbar in bootstrap

Below is my code where I intend to have a responsive navbar. It displays properly in big screens but for some reason is not collapsing in small screens.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleanalytics.com/ajax/libs/jquery/1.11.3.jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
How can I make the toggle button collapse?
https://jsfiddle.net/Wosley_Alarico/8wncr2dm/
You Just used incorrect version for jQuery Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3
try to include https://code.jquery.com/jquery-2.2.4.min.js
You're not calling jQuery correctly. Inspecting your Fiddle shows this:
Error: Bootstrap's JavaScript requires jQuery
It looks like the domain you're using is incorrect, and you're misplacing a slash for a dot. Try this instead:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Not a problem in your bootstrap code. Just the jquery cdn that you are using in script tag of your code is not working. Use a different cdn instead.
https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js
Edit your script tag as
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>