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>
Related
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.
I am receiving the error:
To help protect the security of information you enter into this website, the publisher of this content does not allow it to be displayed in a frame. I just want to embed a YouTube video to my site and I've added the tags
<meta http-equiv="X-Frame-Options" content="allow">
But the error is still occurring. Here is the entire code down to where I added the iframe tags.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" href="/img/favicon.jpg">
<meta charset="utf-8">
<meta http-equiv="X-Frame-Options" content="allow">
<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="">
<title>DroneDaddy</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/business-casual.css" rel="stylesheet">
<!-- Fonts -->
<link href="http://fonts.googleapis.com/css? family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,7 00,800" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css? family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic, 700italic" rel="stylesheet" type="text/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.4.2/respond.min.js"></script>
<![endif]-->
<body>
<p> </p>
<p> </p>
</body>
</head>
<body>
<div class="brand">Welcome to DroneDaddy</div>
<div class="address-bar">Lawton, Ok</div>
<!-- Navigation -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- navbar-brand is hidden on larger screens, but visible when the menu is collapsed -->
<a class="navbar-brand" href="index.html">DroneDaddy</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -- >
<div class="collapse navbar-collapse" id="bs-example-navbar- collapse-1">
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
<a href="realestate.html" class="dropdown-toggle" data- toggle="dropdown">services
<b class="caret"> </b>
</a>
<ul class="dropdown-menu">
<li>Real Estate</li>
<li class="divider"></li>
<li>Aerial Inspection</li>
<li class="divider"></li>
<li>Advertisement</li>
<li class="divider"></li>
<li>Aerial Photography</li>
<li class="divider"></li>
<li>Police/Tactical Response </li>
</ul>
</li>
<li>
News
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="container">
<div class="row">
<div class="box">
<div class="col-lg-12 text-center">
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators hidden-xs">
<li data-target="#carousel-example-generic" data- slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data- slide-to="1"></li>
<li data-target="#carousel-example-generic" data- slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="jumbotron col-lg-12">
<h1>Featured Video</h1>
<p>
Hello, Ok.
</p>
<iframe width="420" height="315"
src="https://www.youtube.com/watch?v=e2od1FBOCU8">
</iframe>
</div>
To embed with Iframe, you need to use different url for your video - https://www.youtube.com/embed/e2od1FBOCU8
More info on how to embed a YouTube video to your site - http://www.w3schools.com/html/html_youtube.asp
The X-FRAME-OPTIONS is not to be defined by you, but YouTube sends it in video viewing page HTML response header and denies any page from embedding it. When you define the header on your page, it means your page cannot be embedded.
More on the X-FRAME-OPTIONS - https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Hi so im creating a Bootstrap 3 website but my dropdown dosnt seem to be working on my navbar, Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Joosh - Welcome</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Linking CSS Stylesheets -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/customStyle.css" rel="stylesheet">
</head>
<body>
<!-- Navigation Bar Top - Open -->
<nav class="navbar navbar-default">
<div class="container">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Joosh</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>News</li>
<li class="dropdown">
Social Media <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<!-- Navigation Bar Top - Closed -->
<!-- Linking JavaScript Resources -->
<script src="js/jquery-1.11.2.min.js"</script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Ive tried placeing the JavaScript into the head but that still dosnt seem to work. Any ideas on what the problem is, i also tried getting the jquery from the googleapi's website and jquerys website.
This may be the issue:
You're missing a ">"
<script src="js/jquery-1.11.2.min.js"</script>
<script src="js/bootstrap.min.js"></script>
To
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
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
i'm updating my site to bootstrap 3 and i have a problem i have added my navbar and header but when i try to add a jumbotron it appears under the bs-header dono why it does that i check every thing if my div are closed and they are sow if some one can tel me what i'm doing wrong ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="HyperGainZ">
<title> My Mod Pack · MMP </title>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap-simplex.css" rel="stylesheet">
<link href="assets/css/bootstrap-simplex.min.css" rel="stylesheet">
<!-- Documentation extras -->
<link href="assets/css/docs-index.css" rel="stylesheet">
<link href="assets/css/pygments-manni.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
<!-- Favicons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
MMP
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="download">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="download">
<li><a tabindex="-1" href="#">1</a></li>
<li><a tabindex="-1" href="#">2</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">3</a></li>
<li><a tabindex="-1" href="#">4</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Sign Up</li>
<li class="divider"></li>
<li>Sign In</li>
</ul>
</div>
</div>
<div class="bs-header" id="content">
<div class="container">
<br />
<img src="assets/img/index.jpeg" class="img-circle" width="125px" height="125px"alt="Sevadus" align="left">
<h1>MMP</h1>
<p class="lead">My Mod Pack</p></img>
<div id="carbonads-container">
<div class="carbonad">
<div id="azcarbon">
<h4>Site Version : <span class="badge badge-success">Alpha</span></h4>
<h4>Head Of Project : <span class="badge badge-info">HyperGainZ</span></h4>
<h4>acepting Beta's : <span class="badge badge-success">Yes</span></h4>
<h4>Public Launcher : <span class="badge badge-primary">Not Yet</span></h4>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 jumbotron">
<h1>Pack Assembler</h1>
<p>Managing Mods, Packs, and Servers easily and efficiently.</p>
<p>
Get Started <i class="icon-double-angle-right"></i>
</p>
</div>
</div>
</div>
<!-- Placed at the end of the document so the pages load faster -->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</body>
Because you're containing .bs-header within .navbar-fixed-top you'll need to use top padding equal to the static height of your navbar, on the body.
From the bootstrap documentation:
The fixed navbar will overlay your other content, unless you add
padding to the top of the . Tip: By default, the navbar is 50px
high.