I'm trying bootstrap but the js isn't working in nav (dropdown + mobile icon)
This is my html:
<div class="collapse navbar-collapse" id="navbarColor02">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">TEST <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="download">Pulse <span class="caret"></span></a>
<div class="dropdown-menu" aria-labelledby="download">
<a class="dropdown-item" href="https://jsfiddle.net/bootswatch/0mb9487u/">Open in JSFiddle</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="../4/pulse/bootstrap.min.css">bootstrap.min.css</a>
<a class="dropdown-item" href="../4/pulse/bootstrap.css">bootstrap.css</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="../4/pulse/_variables.scss">_variables.scss</a>
<a class="dropdown-item" href="../4/pulse/_bootswatch.scss">_bootswatch.scss</a>
</div>
</li>
</ul>
</div>
</nav>
Others topics for js issue with bootstrap don't help me...
Make Sure that you have to add all these cdn in your head section
MaxCDN provides CDN support for Bootstrap's CSS and JavaScript. You must also include jQuery:
MaxCDN:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
Don't know what files you've imported in your html, but if you didn't imported bundle js file, then you need to import popper.js file too. in total you need following 4 files for the bootstrap to work:
bootstrap.min.css
jquery (latest is recommended, check bootstrap doc)
popper.js
bootstrap.min.js
number 2, 3, 4 - order matters
Hope that helps...
I've never seen something like this and i'm wondering how did you come up to use bootstrap in such way. You are doing it completely wrong, you do not import .css/.js file directly in html tag, you specify these libraries in proper places in code. You need to start from beginning and read about how to use bootstrap, example good source for it is in here:
https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp
Related
I am trying to learn some bootstrap and while creating a Drop down, I see a Popper.js is required in the console,
Here is the HTML script,
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Select the Database</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
Thanks
If you read the error, dropdown.js has a dependency which is Popper.js. Simply include the script on your project
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
As stated in the console error, Bootstrap's dropdowns require Popper.js.
So add this in the head and it will work just fine
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
Also, add jQuery if not added already
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I am making a website using bootstrap. I have made a nav bar where I want the menu items to link to the different sites. However it is not working at all - it is usually never a problem getting links to work, but I am new in using Bootstrap and i feel like I'm missing something - do you need to have a js code to get your links to work? Normally I just write something like I have put all the sites in the same folder and I have tried so many things now. I have also tried giving the items and ID and then adding a js code, but nothing happens.
$(document).ready(function() {
$('#aboutus').on('click', function() {
location.href = "About kopi.html";
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container-fluid">
<nav class="row navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Name</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="Portfolio.html">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="About kopi.html" id="aboutus">About</a>
</li>
</ul>
</div>
</nav>
</div>
Hi Maria and welcome to Stack Overflow.
The syntax for your a tag is correct. And thus it should work.
Saying that your link doesn't work, is extremely vague. What you could try:
Make sure all your styles and scripts from Bootstrap are loaded. (This includes dependencies such as jQuery and Popper.js)
Make sure the pages you're referring actually exist. (Does this file: Portfolio.html exist?)
It looks like you're using some classes that are specific to Bootstrap 4 in your markup, but including the Bootstrap 3 JS and CSS.
Try using the Bootstrap 4 files instead:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"/>
Here's a fiddle I created to try to reproduce your problem. It seems to work with the Bootstrap 4 files:
https://jsfiddle.net/bbz0t198/
Faily new to the angular scene.
I have a toggle done in bootstrap below.
The toggle does not work when angular is simply added to the header with the <script src> tag
<li class="dropdown dropdown-quick-sidebar-toggler">
<a href="javascript:;" class="dropdown-toggle">
<i class="icon-logout"></i>
</a>
</li>
<div class="page-quick-sidebar-wrapper" data-close-on-body-click="false">
<div class="page-quick-sidebar">
<ul class="nav nav-tabs">
<li class="active">
Modules
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active page-quick-sidebar-chat" id="quick_sidebar_tab_1">
<div class="page-quick-sidebar-chat-users" data-rail-color="#ddd" data-wrapper-class="page-quick-sidebar-list">
<ul class="media-list list-items">
<li class="media">
<div class="media-body">
<h4 class="media-heading"><i class="fa fa-bank" aria-hidden="true"></i> Cash & Banking</h4>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Above works when angular is not introduced..but doesn't work when angular is included.
Any idea?
I also had the same problem when starting with angular, what fixed my problem was simply including a newer version of jquery.
Originally was using jquery 2.x and just changed it in my bower to 3.1.x
Apparently jquery was being loaded after angular was.
Loading jquery before angular simply corrected it.
The toggle button is not working to reveal the collapsed elements and I do not know why. When the window is resized the toggle button is displayed but upon pressing, nothing happens. This is my first time using Bootstrap so I may have made some very obvious and ridiculous mistakes. Any help is appreciated.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="boostrap-iso">
<div class="page">
<div class="nav navbar-default">
<div class="container"></div>
<li>
<a class="logo" href="#1"></a>
</li>
<li>
<a class="cart" href="#7"></a>
</li>
<button class="navbar-toggle" data-toggle="dropdown" data-target="navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul>
<li class="products">Products
</li>
<li class="store">Store
</li>
<li class="about">About Us
</li>
<li class="discover">Discover
</li>
<li class="support">Support
</li>
</ul>
</div>
</div>
</div>
</div>
<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>
You have at least a few problems: See the docs for the Navbar.
data-toggle="dropdown" should be data-toggle="collapse"
data-target="navHeaderCollapse" should be data-target=".navHeaderCollapse"
Fixing these two issues should allow the menu to open and close. You may want to utilize the default structure to avoid (or at least be aware of) additional issues live enclosing your toggle button inside the navbar-header class as well as the .nav & .navbar-nav classes on your menu list items. Also your container isn't doing anything currently, it should surround the navbar-header / list items.
Working Example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="boostrap-iso">
<div class="page">
<div class="nav navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
LOGO
<span class="glyphicon glyphicon-shopping-cart"></span>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li class="products">Products
</li>
<li class="store">Store
</li>
<li class="about">About Us
</li>
<li class="discover">Discover
</li>
<li class="support">Support
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<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>
The reason that your navbar toggle button isn't working is that you've missed 3 things.
You need to change data-toggle="dropdown" to data-toggle="collapse".
You need to change data-target="navHeaderCollapse" to data-target="#navHeaderCollapse".
You need to add id="navHeaderCollapse" to the div with the collapse css class.
Once you have all these elements the toggle will work. There are some other things missing like the navbar-header div, your container being closed in the wrong spot and the first <li> elements not being within an <ul> tag.
Here is a jsfiddle with your code working: https://jsfiddle.net/4syh8nth/9/
Try using the # symbol in data-target attribute to refer on an element whose using this ID.
<button class="navbar-toggle" data-toggle="dropdown" data-target="#navHeaderCollapse">
And add an ID attribute to your .navbar-collapse element
<div id="navHeaderCollapse" class="collapse navbar-collapse">
Refer to the docs
The responsive navbar requires the collapse plugin to be included in your version of Bootstrap
Collapse plugin
You may make this as like i did by bootstrap. some classes in your code i didn't recognize its bootstrap included or not. thanks
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body >
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="collapse navbar-collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="products">Products</li>
<li class="store">Store</li>
<li class="about">About Us</li>
<li class="discover">Discover</li>
<li class="support">Support</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
I had faced the same issue.
I used data-toggle cdn in the head section and it worked in my case. For more info check the link.
Use https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css in head part of HTML.
Check whether you have used all related CDNs.
I'm quite new to Angular/Bootstrap and I downloaded a template that I'm trying to modify and add features to go about learning.
I'm trying to have a collapsible sub-menu as such
<ul class="nav nav-sidebar">
<li ng-class="{active: $state.includes('overview')}"><a ui-sref="overview">Overview <span class="sr-only">(current)</span></a></li>
<li>Products</li> <!-- a click on this should expand the div below... -->
<div class="collapse" id="products">
<ul>
<div ng-repeat="itemType in itemTypes">
<li>{{itemType.Description}}</li>
</div>
</ul>
</div>
</ul>
My attempt is from this example.
Instead of a button, I want the animation to be triggered by a click on an anchor.
I read a version of Bootstrap had problems with animation so I upgraded to bootstrap#3.3.6
Any ideas ?
Thanks.
EDIT: By not working I mean, nothing is happening. I can use an ng-show directive, but there's no smooth animation.
As the docs says,
You can use a link with the href attribute, or a button with the data-target attribute. In both cases, the data-toggle="collapse" is required.
Change the anchor tag to use the href attribute instead of data-target.
Products
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<ul class="nav nav-sidebar">
<li ng-class="{active: $state.includes('overview')}"><a ui-sref="overview">Overview <span class="sr-only">(current)</span></a></li>
<li>Products</li> <!-- a click on this should expand the div below... -->
<div class="collapse" id="products">
<ul>
<div ng-repeat="itemType in itemTypes">
<li>{{itemType.Description}}</li>
</div>
</ul>
</div>
</ul>
I ended up adding jQuery and bootstrap to my 'serve' gulp task and this works, without changing the view's code at all.