Why my dropdown menu is not working in bootstrap? - html

Code(In head):
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" media="all" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" media="all" />
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<script type="text/javascript" src="js/boootstrap.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<title></title>
</head>
Code(In body):
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="d" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown Menu
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="d">
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
</ul>
</div>
I looked and tried in many way from stackoverflow to solve this problem.But nothing worked for me.This code is working in https://jsfiddle.net/DTcHh/10972/ but when i open it with browser it is not working.

#AlexG's answer is correct (i haven't enough reputation to comment).
The very first line in the bootstrap.js is to check for jquery
if(typeof jQuery==='undefined'){throw new Error('Bootstrap\'s JavaScript requires jQuery')}
Because you load jquery after bootstrap, it will throw an exception. So even if this doesn't solve your problem with the drop down, you still must include it first.

<script type="text/javascript" src="js/boootstrap.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
here seems to be the problem. include jquery before bootstrap
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/boootstrap.min.js"></script>
jQuery after Bootstrap
jQuery before Bootstrap

Problem solved:
1)There was a console error.(Solved by Abhishek Ghosh)
2)The jquery script should be before bootstrap(Solved by AlexG)

I tested your code and found a console error. Then i tried with below CDN'S and it worked. Use these CDN and it would work fine
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>

Related

JQuery with conflicting datetimepicker and navabr

I have a basic CRUD web app with Spring and thymeleaf, I have a fragmented navbar that I use in each page but whenever I have a page with a datetimepicker the navbar is conflicted (basically navbar parts are mixed up and don't work). So below is my home page, which works fine (no datetimepicker), but in my newEmployees page I have the same bootstrap, jQuery etc links and sources as 'home' but as soon as I add the datetimepicker code the navbar is wrong, also I have to remove:
<script type="text/javascript" src="/js/jquery-3.6.0.js"></script>
<script type="text/javascript" src="/js/bootstrap/bootstrap.min.js"></script>
for the datetimeicker to work, but with my minimal jquery understanding, isn't that whats is needed for the navbar? Is something conflicting here?
home.html works fine.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="/css/fontawesome/css/all.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/css/bootstrap/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/css/navbar.css" >
<link rel="stylesheet" type="text/css" href="/css/ines.css" >
<title>InES Employee</title>
</head>
<body>
<div th:replace="/fragments/chartNavbar :: navbar"></div>
<div class="container">
//all code in the page
</div>
<div th:replace="/fragments/deleteModal :: deleteModal"></div>
<script type="text/javascript" src="/js/jquery-3.6.0.js"></script>
<script type="text/javascript" src="/js/bootstrap/bootstrap.min.js"></script>
<script th:src="#{/js/home.js}"></script>
</body>
</html>
home.js
$(' #deleteButton').on('click', function(event) {
event.preventDefault();
var href = $(this).attr('href');
$('#deleteModal #delRef').attr('href', href);
$('#deleteModal').modal();
});
setInterval(function(){ $(".alert").fadeOut(); }, 3000);
newEmployee.html cant get navbar to work
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>InES Employee</title>
<link href="/css/fontawesome/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/css/navbar.css">
<link rel="stylesheet" type="text/css" href="/css/newEmployee.css">
<!--datetimepicker code-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.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.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div th:replace="/fragments/chartNavbar :: navbar"></div>
<div class="container">
//all code in the page
</div>
<!-- <script type="text/javascript" src="/js/jquery-3.6.0.js"></script>-->
<!-- <script type="text/javascript" src="/js/bootstrap/bootstrap.min.js"></script>-->
<script th:src="#{/js/newEmployee.js}"></script>
</body>
</html>
newEmployee.js
$('#datetimepicker1').datetimepicker({
format: 'DD/MM/YYYY h:mm A'
});
$('#datetimepicker2').datetimepicker({
format: 'DD/MM/YYYY h:mm A'
});
correct navbar
incorrect navbar
Thanks in advance!

Bootstrap tabs feature not working

I'm trying to use Bootstrap's navigation tab feature, but I can't seem to get it working.
What am I doing (or not doing) wrong?
<!DOCTYPE html>
<html>
<head>
<title>Luis Gonzalez's portfolio</title>
<link rel="stylesheet" type="text/css" href="portstyle.css"/>
</head>
<body>
<div class="header">
<div class="navi">
<ul class="nav nav-tabs">
<li class="active">Creations</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
you'll need to reference the bootstrap files.
for now you can use these links:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Example:
<!DOCTYPE html>
<html>
<head>
<title>Luis Gonzalez's portfolio</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<link rel="stylesheet" type="text/css" href="portstyle.css"/>
</head>
<body>
<div class="header">
<div class="navi">
<ul class="nav nav-tabs">
<li class="active">Creations</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
If you want to download and host Bootstrap yourself, go to getbootstrap.com, and follow the instructions there.
If you don't want to download and host Bootstrap yourself, you can include it from a CDN (Content Delivery Network).
MaxCDN provides CDN support for Bootstrap's, CSS and JavaScript. Though you must also include jQuery:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
side note - ensure that you link to your own stylesheet last, meaning after you've linked to all the bootstrap files. Otherwise, you might get some unexpected behaviours as in bootstrap CSS overriding your own CSS etc.

FontAwesome images appear as squares

Just started using font-awesome and all my images appear as squares if I use the font-awesome css locally. My code is straightforward:
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="moment.js"></script>
<script type="text/javascript" src="daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="daterangepicker-bs3.css" />
<link rel="stylesheet" type="text/css" href="font-awesome.css"/>
</head>
<i class="fa fa-truck"></i>truck
I put the font files in ../fonts/ as it says in the font-awesome.css. I also put the fa which is particular to version 4.0, and I also tried the CDN. However, with the CDN, I don't even get a square, I just get a blank. Anyone have any idea?
Thanks!

Cannot close bootstrap tags

I'm facing a weird problem in which I'm unable to close bootstrap tags.
Below is my html code,
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-tagsinput.min.js"></script>
</head>
<body>
<input type="text" id="searchTags" data-role="tagsinput"/>
</body>
</html>
I'm using Bootstrap V3.0.
Below is the screen shot of the tags,
As you can see from the image that 'x' used to close the tags is not displayed. Any idea why??
Thanks in advance.
You're probably missing this css file:
<link href="bootstrap-tagsinput.css" rel="stylesheet">
This is my Source and it works with the closing x:
<html>
<head>
<link href="bootstrap-tagsinput.css" rel="stylesheet">
<link href="bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-tagsinput.js"></script>
</head>
<body>
<input type="text" id="searchTags" data-role="tagsinput"/>
</body>
</html>
(I didn't took care of nice use of js/css folders)
Let me know if this helps

How to find address of css and js files?

I'm sure this is a really simple question, but I'm a noob and can't figure it out. I'm trying to mess around with the Twitter-Bootstrap starter template to help myself learn HTML, CSS, and JS. I copied and pasted the source code into TextWrangler and opened the html file in Firefox. No bootstrap functionality.
I'm almost certain it's because lines like <link href="../assets/css/bootstrap.css" rel="stylesheet"> need to be altered to reflect the css/js files' addresses on my own computer. If that's the problem, how do I do this?
Here is the source code:
<!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">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</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>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<h1>Bootstrap starter template</h1>
<p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-alert.js"></script>
<script src="../assets/js/bootstrap-modal.js"></script>
<script src="../assets/js/bootstrap-dropdown.js"></script>
<script src="../assets/js/bootstrap-scrollspy.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/bootstrap-tooltip.js"></script>
<script src="../assets/js/bootstrap-popover.js"></script>
<script src="../assets/js/bootstrap-button.js"></script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-carousel.js"></script>
<script src="../assets/js/bootstrap-typeahead.js"></script>
</body>
</html>
You're right in your assumption that it's because of the <link href="../assets/css/bootstrap.css" rel="stylesheet"> line.
This line is a reference to the css file. What you will need to do is save the bootstrap files to your computer in folder somewhere.
To do this, download bootstrap from http://twitter.github.io/bootstrap/ and copy the css, img and js folders into your folder.
Now in your file in TextWrangler change the href attribute to "css/bootstrap.css" it will look like this <link href="css/bootstrap.css" rel="stylesheet">.
Now save your file as index.html in the same directory as the other folders you copied in.
You will want to do the same for all other references like this one for instance <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">.
You will also see at the bottom there are references to some JavaScript files. Change those too.
Good luck!