Why my boostrap 4.0 beta is not working properly? - html

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.

Related

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.

Issue with Bootstraps Navbar, doesn't open [duplicate]

This question already has an answer here:
bootsrap nav-bar collapsable cannot make it work
(1 answer)
Closed 6 years ago.
Basicly my problem is, I can't open the navbar if it gets collapsed (small window) and can't spot the misstake.
What i want is this http://getbootstrap.com/examples/navbar-fixed-top/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Fixed Top Navbar Example for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="navbar-fixed-top.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[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>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Default</li>
<li>Static top</li>
<li class="active">Fixed top <span class="sr-only">(current)</span></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a>
</p>
</div>
</div> <!-- /container -->
<!-- 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.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</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>
But no matter what i try it doesn't work on my Page http://myschooldesk.de/index.php?id=5#
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--
This website is powered by TYPO3 - inspiring people to share!
TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL.
TYPO3 is copyright 1998-2016 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
Information and contribution at http://typo3.org/
-->
<title>TITE: Home</title>
<meta name="generator" content="TYPO3 CMS">
<link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_a490dd7cbb.css?1483100214" media="all">
<link rel="stylesheet" type="text/css" href="typo3conf/ext/myschooldesk_dis/Resources/Public/Bootstrap/css/bootstrap.min.css?1483097509" media="all">
<link rel="stylesheet" type="text/css" href="typo3conf/ext/myschooldesk_dis/Resources/Public/Bootstrap/css/bootstrap-theme.min.css?1483097509" media="all">
<link rel="stylesheet" type="text/css" href="typo3conf/ext/myschooldesk_dis/Resources/Public/Css/basicLayout.css?1483313684" media="all">
<script src="uploads/tx_t3jquery/jquery-1.8.x-1.9.x.js?1483135375" type="text/javascript"></script>
<script src="typo3conf/ext/myschooldesk_dis/Resources/Public/Bootstrap/js/bootstrap.min.js?1483097509" type="text/javascript"></script>
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 0.8px;">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Default</li>
<li>Static top</li>
<li class="active">Fixed top <span class="sr-only">(current)</span></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a>
</p>
</div>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
Actualy i have the same problem with the dropdown menue and that might be related. On the Serverside I use Typo 3 6.2 what limits me a bit in just copying everithing, as far as i know. Can it be a version problem or did i overlocked something.
So far I've ckecked:
All imports are the same or doesn't matter in this context
I tryed diffrent browsers
Restart
Clearing Cache both mine and typo 3's
I am new to Stack Overflow and tryed my best if i still missed anything feel free to ask.
Thanks everyone. :)
You have a javascript error on a page:
Uncaught Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 4
To fix it you should use jQuery version 1.9.1 or higher. Or just use the CDN:
<script src="https://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="./TITE_ Home_files/bootstrap.min.js.download" type="text/javascript"></script>
You need jQuery in order to use Bootstrap Javascript. Include this line of code before you load in your Bootstrap:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Your HTML <head> section should now look like this:
<head>
<meta charset="utf-8">
<!--
This website is powered by TYPO3 - inspiring people to share!
TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL.
TYPO3 is copyright 1998-2016 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
Information and contribution at http://typo3.org/
-->
<title>TITE: Home</title>
<meta name="generator" content="TYPO3 CMS">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <!-- This was changed -->
<link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_a490dd7cbb.css?1483100214" media="all">
<link rel="stylesheet" type="text/css" href="typo3conf/ext/myschooldesk_dis/Resources/Public/Bootstrap/css/bootstrap.min.css?1483097509" media="all">
<link rel="stylesheet" type="text/css" href="typo3conf/ext/myschooldesk_dis/Resources/Public/Bootstrap/css/bootstrap-theme.min.css?1483097509" media="all">
<link rel="stylesheet" type="text/css" href="typo3conf/ext/myschooldesk_dis/Resources/Public/Css/basicLayout.css?1483313684" media="all">
<script src="uploads/tx_t3jquery/jquery-1.8.x-1.9.x.js?1483135375" type="text/javascript"></script>
<script src="typo3conf/ext/myschooldesk_dis/Resources/Public/Bootstrap/js/bootstrap.min.js?1483097509" type="text/javascript"></script>
</head>

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>

My dropdown isn't coming down

HTML:-
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="js/jquery-2.2.0.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<title>AIT Project</title>
</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>
<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>
</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>
</nav>
</body>
I am making a simple bootstrap responsive navbar but the dropdown isn't dropping and showing the content .I am not able to figure out the issue. There are no errors in the console
Okay. You mean the 3-bar navbar-toggle on the right-hand side?
You have an extraneous space in your data-target attribute. It says data- target="#myNavbar" instead of data-target="#myNavbar".
Edit in response to comment:
So you don't see this drop-down? This is the one that I was initailly looking at when I said that it worked for me.
Try replaced your <head> with this code:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<title>AIT Project</title>
</head>
Then it will be exactly the same as the code I'm using. I've replaced the links to local files with links to files from a CDN. That means you'll need to be connected to the internet. Does it work now?
Make sure you are linking properly to your js files.
Try to add this code in the end of your html file
<script src="https://ajax.googleapis.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>
if it works it means that you are not properly linking to the bootstrap.min.js file.

Twitter bootstrap top menu is not displaying as strip

I just started using twitter bootstrap. Trying each example in their site. However I couldn't succeed in most cases. For instance, the top navigation bar. I just copied into a html file. Changed some reference paths for css, js. When browsed in IE8/Chrome, it shows a weird result.
=== source copied from: http://getbootstrap.com/examples/navbar-fixed-top/
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="favicon.png">
<title>Fixed Top Navbar Example for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
<!-- Custom styles for this template -->
<link href="Scripts/navbar-fixed-top.css" rel="stylesheet" />
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[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]-->
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Default</li>
<li>Static top</li>
<li class="active">Fixed top</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a>
</p>
</div>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
===
Note: There is a head closing tag body open tag that I couldn't insert
(here) right before fixed nav bar
the outcome on my browser:
Am I missing anything?
The issue is not in the HTML
Check this fiddle
Copy the js and css from this example and it will work
or include this 2 libs
//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css
//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js