I realize this question has been asked multiple times before, but unfortunately, I am unable to find a solution from the existing questions & answers. I have created an html file which I think will have bootstrap functionality by linking to the CDN. It has a link to the JQuery CDN as well.
Well ... I just noticed that the Bootstrap styles are not loading at all. I am not sure why.
Nonetheless, I am assuming that fix will be relatively minor, but I have been struggling for much longer than that to figure out why the Popover is not working.
Please, if you are answering, make sure you are referencing the Bootstrap 3 rules.
note: the structure of the below code was taken straight from the Bootstrap website.
Without further ado !
Here's the code.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="btn-group-vertical">
1
2
3
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script>
$('.btn').popover();
</script>
</body>
</html>
You need to add http: to this link -
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
So this is the answer:
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
Related
I've been trying to install Bootstrap into a project that I'm working on, but I'm being hit with Uncaught Error: Bootstrap's JavaScript requires jQuery. I've installed both through Bower, so I'm not sure whether that's related, but it's not having issues finding the files, so I don't think it is. Upon Googling the issue, I realized that the order in which I reference the script files matters, so I changed it to reflect what I had read, but that didn't fix the issue. When I looked into the directories in the file explorer, I saw a file called core.js, but including that didn't help either. I fairly certain that it's something to do with the way I reference files, so I'll provide that code, but feel free to ask if anything more is required.
index.html (root folder, following text is in body):
<script src="./bower_components/jquery/dist/jquery.js"></script>
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-route/angular-route.js"></script>
<script src="./bower_components/angular-animate/angular-animate.js"></script>
<script src="./bower_components/angular-aria/angular-aria.js"></script>
<script src="./bower_components/angular-material/angular-material.js"></script>
<script src="angulator.js"></script>
<script src="./components/calculator/calculator.controller.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.js"></script>
I think you might have confused jQuery with angular. You are not including jQuery, but you are including angular (including angular-material, which is a competing framework to bootstrap).
If you want to use bootstrap with angular, you probably want to use ng-bootstrap instead of the standard Bootstrap JS, since it allows you to interact with Bootstrap components from inside your angular components. If you do this via the "standard" (non ng-bootstrap) JavaScript, things will start falling apart as soon as the Bootstrap JS mutates the DOM. You would also be unable to infer the view state from your component state (since you would need to call the functions of the bootstrap JS instead of data binding), which is pretty much the whole idea of angular.
You need jquery to remove the error
bower install jquery
I don't see you referencing jQuery in the code you provided. You've installed it via Bower, but you will still need to add a reference to it.
<script src="./bower_components/jquery/jquery.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-route/angular-route.js"></script>
<script src="./bower_components/angular-animate/angular-animate.js"></script>
<script src="./bower_components/angular-aria/angular-aria.js"></script>
<script src="./bower_components/angular-material/angular-material.js"></script>
<script src="angulator.js"></script>
<script src="./components/calculator/calculator.controller.js"></script>
Import jQuery script before, like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-route/angular-route.js"></script>
<script src="./bower_components/angular-animate/angular-animate.js"></script>
<script src="./bower_components/angular-aria/angular-aria.js"></script>
...
Bootstrap needs jQuery to work properly
Here is how you should include them both
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.min.css"> <!--Bootstrap CSS-->
<link rel="stylesheet" href="css/main.css"> <!--Your custom css file-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Your content goes here -->
<script src="js/jquery-1.12.4.min.js"></script><!--jQuery -->
<script src="js/bootstrap.min.js"></script><!--Bootstrap js-->
<script src="js/main.js"></script> <!--Your custom javascript file-->
</body>
</html>
I think you have made a mistake while referencing JQuery.
It should be like :
<script src="bower_components/jquery/dist/jquery.min.js"></script>
and also make sure that you have included it before any other script file.
The correct way to include JQuery is also given on bower.io under Use Packages https://bower.io/
I'm building a basic front-end website in HTML and CSS. It consists of multiple web pages, each sharing the same JS and CSS files. My <head> tag therefore contains about 45 lines of code. I'm just wondering if this is "best practice?" Is there a way to have one file with all the shared links to various stylesheets and scripts so that I can reduce the 45 lined header tags in all of my pages to maybe just 3 or 4.
Also, if I have to change my custom CSS location or add a new custom JS file, then that means adding to each of my webpages. This becomes cumbersome and I'd just like to know if there's anything that can be done about it. I might end up with a dozen or so pages when I'm done so that sounds like a lot of unnecessary code.
Thanks!
EDIT:
My code:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicons generated using realfavicongenerator.net -->
<link rel="apple-touch-icon" sizes="180x180" href="img/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicons/favicon-16x16.png">
<link rel="manifest" href="img/favicons/manifest.json">
<link rel="mask-icon" href="img/favicons/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
<!-- Bootstrap Core CSS -->
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
<!-- Plugin CSS -->
<link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="lib/simple-line-icons/css/simple-line-icons.css">
<link rel="stylesheet" href="lib/device-mockups/device-mockups.min.css">
<!-- Theme CSS -->
<link href="css/new-age.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- jQuery -->
<script src="lib/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="bower_components/riot/riot.js"></script>
<script src="bower_components/riot-route/dist/route+tag.js"></script>
<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<!-- Theme JavaScript -->
<script src="js/new-age.min.js"></script>
That is a lot of code to have in each of my dozen or so web pages. Is there a way to avoid this?
For example if your file name is index.html rename it to index.php and then cut your head section and create a new file named head.php and do like for footer also.for the new pages you create just include these references like below
<!DOCTYPE hml>
<html>
<?php include 'head.php' ?>
<body>
<?php include 'footer.php' ?>
</body>
</html>
The short answer is that every page that you send to the browser must contain the full <head> and so you must include it.
The longer answer is that there are several ways to avoid having to copy paste all the content every time. For instance, if you have a php server you could have a separate head.html file that contains your head and you would include in every page like this:
<?php include('head.html'); ?>
Or, if you're using a web framework like express.js, Flask or Symfony (just to name a few, there are many more) you would have templates where you can extend one base. You would define one base template and all other templates are based off that template, allowing you to avoid duplicate code.
If you're not using a webserver at all, you could introduce a build pipeline like Gulp for instance. Gulp can take all your html files and optimise / manipulate them before you deploy them. You could inject all the head contents using a plugin gulp-inject-html for example.
Hope this provides you with plenty of options to decide how you'd like to proceed :)
You can create a new file and past all the head codes in it. Save as either .php or .html. e.g saved in filePath/headings.html;
inside the main page which must be a php file, do this:
<?php include('filePath/headings.html');?>
OR USE
<?php require_once('filePath/headings.html')?>
include is built in function allows you add a file to the page, and if the file is not found it will show some warnings and continue is execution WHILE require or require_once will throw an error and halt code execution if the file is not found.
You can also use
<?php require('filePath/headings.html')?>
You can have this in any part of your code, e.g sidebar, header, navigation, etc.
Please don't save your include or require file name as header.php, instead use heading.php or head.php
I hope this help
Since your using a lot of external libraries for your page adding another one will not hurt. This is straight from W3school, here
header.html (Content)
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css">
</head>
<body>
Content.html (Content)
<h1>Header1</h1>
footer.html (Content)
</body>
</html>
Then on index.html (content)
<script src="https://www.w3schools.com/lib/w3.js"></script>
<div w3-include-html="header.html"></div>
<div w3-include-html="content.html"></div>
<div w3-include-html="footer.html"></div>
<script>
w3.includeHTML();
</script>
This is just only using HTML and JavaScript the most effective way is using a server side language like PHP.
I see you are using jQuery:
So this would help you:
$(document).ready(function() {
$('head').load('pathToCommonCode/head.html');
});
place all your redundant code in head.html and provide the path to it.
For example head.html would contain the following:
<!-- jQuery -->
<script src="lib/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="bower_components/riot/riot.js"></script>
<script src="bower_components/riot-route/dist/route+tag.js"></script>
<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<!-- Theme JavaScript -->
Note: This method will work with files in the same domain.
As mentioned in comments:
From documentation:
Due to browser security restrictions, most "Ajax" requests are
subject to the same origin policy; the request can not successfully
retrieve data from a different domain, subdomain, port, or protocol.
I am designing a site on local host using php,bootstrap , html , jquery everything was working fine until i added bootstrap less its still working but now if i refresh the page or go another page its like a flash before the page loads like it shows a blank screen and then loads the content, before i added less everything was cool it loaded just like any other site now its like a delay , anything that can help me with this issue?
when i use regular twitter bootstrap the page loads fine its just with bootstrap less
<!-- Bootstrap -->
<link rel="stylesheet" href="css/style_template.css?v=2" type='text/css'>
<link href="../bootstrap/less/bootstrap.less" rel="stylesheet/less">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="http://js.pusher.com/3.0/pusher.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="../bootstrap/js/less.min.js"></script>
<script src="js/custom.js" type="text/javascript">
</script>
So I have a landing page up at http://mytestosteronekit.com. Im using Leadpages to create the page. I have an index.html file that pulls in the leadpage with script in the head. I am also including bootstrap CSS, a custom stylesheet for style overrides, bootstrap JS, and a custom JS file. The css links are loading just fine and work on the page. Mainly have this for the navbar. But the js files are not firing and I can't figure out why.
I have them included right before the closing body tag. They show while inspecting, but they don't load in the sources. I was using relative url paths originally but switched to an absolute path just for security. Still no go.
I need this navbar to be working on mobile, please help me!
Bootstrap requires jQuery to be loaded before firing. All I needed to do to fix this problem was call to jQuery before calling the other scripts. Problem solved. No interference with Leadpages scripts.
Try put <script> tags lines before the closing tag </body>. I did it for you below:
<html>
<head>
<meta charset="UTF-8">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="leadpages-meta-id" content="144ccecf3f72a2:1696aa1f6b46dc" /><meta name="leadpages-serving-domain" content="https://crawfordobrien.leadpages.co" /><meta name="leadpages-served-by" content="html" />
</head>
<body>
<script src="http://mytestosteronekit.com/js/bootstrap.min.js" type="text/javascript"></script>
<script src="http://mytestosteronekit.com/js/custom.js" type="text/javascript"></script>
<!-- Leadpage -->
<script type="text/javascript" src="https://my.leadpages.net/template/load-144cc5ec6639c5-1696a36f6639c5-dnoeNG8gtnHtHMXGoqpWmbNBhgtazHED.js"></script>
</body>
</html>
My toggle javascript buttons worked initially - however I have now found that my toggle button including navbar collapsing toggle and accordion panels.
I have included my header and footer. From what I have researched I cant see why it has stopped working.
Any help would be appreciated.
Header:
WEBSITE TITLE
<!-- Bootstrap -->
<link href="style/css/bootstrap.min.css" rel="stylesheet">
<!--load font awesome-->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
Footer:
<footer>
<div class="container">
<p>© Company 2015</p>
</footer>
</div> <!-- /container -->
</div>
</body>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
I guess you just copied what was said on the bootstrap side for example:
<script src="../../dist/js/bootstrap.min.js"></script>
If you have the js bootstrap file in one of your folders in the root, you might want to make sure it is the path is right. For example if your html file is in the same directory as your bootstrap.min.js it should be
<script src="bootstrap.min.js"></script>.
The quick fix you just did which is simply changing it to
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
Might solve the problem now but it will render your local bootstrap file useless which you can make useful by using a bootstrap cdn fallback.
Which is basically loading your local bootstap files if you fail to load remote bootstrap files. This is how to make a bootstrap cdn callback
If you are using bootstap 3.x then you need at least jquery 1.9.1 version library.First download the jquery library and bootstrap js and include in your application and then register both in your application page.First register the jquery library and then bootsrap js as mentioned below.
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
So, i did faced this problem and there are 2 main steps in this,
Number1: You need to include 3 files or links, 1 for Bootstrap CSS, 1 for bootstrap js and 1 for jquery.
You can include like this:
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" integrity="sha512-T584yQ/tdRR5QwOpfvDfVQUidzfgc2339Lc8uBDtcp/wYu80d7jwBgAxbyMh0a9YM9F8N3tdErpFI8iaGx6x5g==" crossorigin="anonymous" referrerpolicy="no-referrer">
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.min.js" integrity="sha512-UR25UO94eTnCVwjbXozyeVd6ZqpaAE9naiEUBK/A+QDbfSTQFhPGj5lOR6d8tsgbBk84Ggb5A3EkjsOgPRPcKA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Number 2: Now make sure that when you include these files, you include them in this order, First CSS, then JQUERY, then JS.
This is because css is loaded first, then jquery and jquery is needed to be loaded before JS, this is because the JS used in bootstrap is written in Jquery so we need to load Jquery before JS.
And you will be good to go. Thanks
I changed the javascript tag displayed in my footer example from:
<script src="../../dist/js/bootstrap.min.js"></script>
to
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
This has resolved the problem.
if you check the console of the page, it should show a notice that jquery is not seen by javascript. so, you can solve this by downloading the jquery source code from the jquery site and then you can add the following line of code before the end of your footer:
<script>window.jQuery || document.write('<script src="assets/js/jquery.min.js"><\/script>')</script>