I encountered this error while trying to create a navbar with Bootstrap,
the result should be a navbar but it's not, trying to understand the nature of the error I copied W3schools's code( https://www.w3schools.com/bootstrap/bootstrap_navbar.asp )in the editor (Atom). Both my code and W3schools's code aren't working, but they seems to be correctly written. Where am I wrong? May I have your help please?
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<body>
<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>
<nav class=“navbar”>
<nav class="navbar">
<a class="navbar-brand" href=“#”>Something</a>
<ul class="navbar-nav">
<li class="nav-item"><a href="#" class="nav-link">One</li>
</ul>
</nav>
</body>
</html>
Before including bootstrap, you should include jquery...
For example:
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
Change your Text Formatted Quotes from this.
<nav class=“navbar”>
To Non text Formatted quotes.
<nav class="navbar">
In your code you are using Bootstrap 4.x, which is the newest release and is completely different, many things look quite similar between 3.x and 4.x but in short anything that worked in 3.x has more chances to break in 4.x.
So instead of using W3School's code as your reference, use Twitter Bootstrap's documentation for version 4.0 :
https://getbootstrap.com/docs/4.0/getting-started/introduction/
Also, your HTML code doesn't look quite right, for e.g this line
<li class="nav-item"><a href="#" class="nav-link">One</li>
You forgot to close <a>. So it is important you take a look at your code and see if something is being caused by a syntax error. Other than that if fix the code the output is what you will get from the HTML. Nothing sort of a navbar because you have to follow Twitter Bootstrap 4's guideline on lay-outing a navbar
https://getbootstrap.com/docs/4.0/components/navbar/
Another issue is that you have put boostrap.min.js before jQuery, for Bootstrap's JavaScript to work you first have to load jQuery.
Good luck.
Related
So I am working on a website for a school project and am using bootstrap. I downloaded bootstrap js e css files so I could use locally, so even if I don't have internet connection bootstrap would still work.
Everything was working fine, no problem with bootstrap, until I used a carousel.For some reason, my carousel wouldn't work, only the first image would appear. It didn't matter what i changed, nothing would work.
Then I tried changing the bootstrap files to the online links on the bootstrap website, and to my surprise, the carousel started working!
So why does the carousel only work with online bootstrap link and not local bootstrap files?
Below are the bootstrap files, locally and the web link. I am not providing the carousel html code because that is not the problem, seeing as i took it from the bootstrap website, and it is working, just not locally.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!--<link href="css/style.css" rel="stylesheet" type="text/css">-->
<!-- Boostrap Minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Plugin jQuery -->
<!--<script src="js/jquery-3.4.1.slim.min"></script>-->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<!-- Bootstrap JavaScript -->
<!--<script src="js/bootstrap.min.js"></script>-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
If anyone has had the same problem and nows how to solve it, i would apreciate it!
Thank you!
I suspect your calls failed because you did not call bootstrap.bundle.min.js (w/ Popper.js). You called the unbundled version (bootstrap.min.js) which does not include popper.js.
This is discussed in https://getbootstrap.com/docs/4.4/getting-started/contents/#css-files
I was trying to style a php file called dashboard.php with bootstrap. I only wrote some html code in the file to begin. When I test it, I found the styling in 'ul' tag was wrong. However other classes such as 'class="col-sm-2"' 'class="row"' are working as expect.
This is code in the dashboard.php:
<?php ?>
<!DOCTYPE>
<html>
<head>
<title>Dashboard</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
<ul class="nav nav-pills nav-stacked" >
<li><a href="dashboard.php">
<span class="glyphicon glyphicon-th"></span>Dashboard</a></li>
<li><a href="#">
<span class="glyphicon glyphicon--list-alt"></span>Add New Post</a></li>
<li>Categories</li>
<li>Manage Admins</li>
<li>Comments</li>
<li>Live Blog</li>
<li>Logout</li>
</ul>
</div><!-- End of side area-->
<div class="col-sm-10">
</div><!-- End of main area-->
</div><!-- End of raw-->
</div>
</body>
</html>
This is the screen shot I made when testing the dashboard.php:
enter image description here
If you chack the image. The left side with words in blue belongs to 'ul' tag. The style is completely wrong. It also failed to add glyphicon icons. I checked the syntax of my html code , there seems nothing wrong.
I also want to add more information:
the extension of the file is .php
I opened the XAMPP with Apache opened
the url that opens the file dashboard.php is correct:
http://localhost/studyexample/PHPCMS/dashboard.php
Can you help me to find why the styling in 'ul' tag is completely wrong? Thank you so much.
The problem here may be that you are using relative URLs for your assets, but have not used a base tag. The easiest thing to do is just add a forward slash to the path to your assets. When I run your code in CodePen it looks like it should:
https://codepen.io/anon/pen/vpWLqo
So, what I mean is, for the following assets:
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
Add a forward slash so the URLs are absolute:
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
<script src="/js/jquery-3.2.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
Once you do that, I think you'll find that things start looking different for you. If not, you'll need to specify more of a complete path to the assets, meaning you may need to have the full path, like:
<link rel="stylesheet" type="text/css" href="/studyexample/PHPCMS/css/bootstrap.min.css">
<script src="/studyexample/PHPCMS/js/jquery-3.2.1.min.js"></script>
<script src="/studyexample/PHPCMS/js/bootstrap.min.js"></script>
I have my website's html code written by following bootstrap 3.3.6 claases. Now I want to use the features of bootstrap 3.3.7 but it's not straight forward to just change the version of the bootstrap. What's the best way to do this upgrade? Do I need to write all the code again following bootstrap 3.3.7 standards?
the best upgrade to a new version is removes the url of old version and add the new url of a new version . for more help go to NPM documentation https://docs.npmjs.com/cli/update
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--add your css file here -->
<!--you must add the jQuery library here before the url of bootstrap/3.3.7/js/bootstrap.min.js-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
I have made a website in dreamweaver using bootstrap 3 and less.
I have used navbar default and customised it.
I have just added some extra pages to my site, such as about.html and blog.html
however, on these extra pages the dropdown menu doesn't seem to work. It does work fine on the homepage, with exactly the same code.
I have wrapped with a < li > already and just copy and pasted all the html into my new html files as follows, to have the navbar there on each page. Please advise if I have done something wrong, I am pretty much a complete beginner.Thanks!
<div class="header clearfix">
<nav class="text-center">
<ul class="nav nav-pills">
<li role="presentation" class="active">Home</li>
<li>
Our Services <span class="caret"></span>
<ul class="dropdown-menu">
<li>jhdhalbalb</li>
<li>hdjdjjdj</li>
<li>bdjdshbd</li>
</ul>
</li>
<li role="presentation">About us</li>
<li role="presentation">Blog</li>
<li role="presentation">Contact</li>
</ul>
</nav>
</div>
Add this to the head section of all your pages:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
Sometimes bootstrap local files don't work - doing this will let you know if you should re-download them. This is something that has happened to me before.
Also your HTML is very messy, making it hard to really look through. Try cleaning it up a bit and making sure you're following W3 standards so you can follow your code and others can read it.
You should also read this: http://getbootstrap.com/javascript/#dropdowns Bootstrap dropdowns require an extra .js plugin.
Good day to all,
I'm using foundation 5 for my mini project. I want to use the reveal/modal feature of the framework. But it seems it does not work.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Job Posting</title>
<link rel="stylesheet" type="text/css" href="../css/normalize.css">
<link rel="stylesheet" type="text/css" href="../css/foundation.min.css">
<script type="text/javascript" src="../js/vendor/custom.modernizr.js"></script>
</head>
<body>
click
<div class="reveal-modal" id="myNormal">
Modal
<a class="close-reveal-modal">x</a>
</div>
<script src="../js/vendor/jquery.js"></script>
<script src="../js/foundation/foundation.js"></script>
<script src="../js/foundation/foundation.reveal.js"></script>
<script>
$(document).foundation();
</script>
</body>
I'm pretty sure that the browser loaded the js as it does not show any error in the debugger. And I know it's somewhere in the code that I left out but it's been a couple of hours since I ran into this. Any help would be much appreciated.
You might have forgot data-reveal :
<div class="reveal-modal" id="myNormal" data-reveal>