Why Chrome & Firefox render bootstrap CSS different than Safari - javascript

I am building a static web site with bootstrap. Working on local the layout looks fine, when deployed to the web, Safari OK, but Chrome and Firefox seem like if they dont support several bootstrap CSS rules or I am doing something wrong.
Safari OK
Chrome KO
Live code: (make sure to accept the certificate)
https://canales.paperplane.io/
Code (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Canales Auty</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<!-- #Header -->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10"><img src="img/header.png"></div>
<div class="col-md-1"></div>
</div>
<!--Navbar-->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<div class="navbar navbar-default">
<div class="container">
<div class= "navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>ABOUT THE FIRM</li>
<li>PROFESSIONALS</li>
<li>PRACTICE AREAS</li>
<li>NEWS ROOM</li>
<li>CAREERS</li>
<li>CONTACT US</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-1"></div>
</div>
<!--Mosiaco -->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-4">
<img id="d1" src="img/mosaico_1.png">
<div class="contenthover container">
<h3>Lut</h3>
<p>Hola soy Lut!</p>
<p>Lorem ipsum</p>
</div>
</div>
<div class="col-md-3">
<img id="d2" src="img/mosaico_2.png">
<div class="contenthover container">
<h3>Lut</h3>
<p>Hola soy 2!</p>
<p>Lorem ipsum</p>
</div>
<img src="img/mosaico_3.png">
</div>
<div class="col-md-3"><img src="img/mosaico_4.png"><img src="img/mosaico_5.png"><img src="img/mosaico_6.png"></div>
<div class="col-md-1"></div>
</div>
<div class="row">
<div class="col-md-12 footer">
<p>hola</p>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/contentHover.js"></script>
<script type="text/javascript">
$('document').ready(function(){
$('#myTootTip').tooltip();
$('#myPopOver').popover();
$('#d1').contenthover({
overlay_background:'#000',
overlay_opacity:0.8
});
$('#d2').contenthover({
overlay_background:'#000',
overlay_opacity:0.8
});
});
</script>
</body>
</html>


Chrome won't load non-SSL scripts over a webpage open with https://.
The best way to reference your external scripts is to not specify the protocol.
As in:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
...
<script src="//code.jquery.com/jquery.js"></script>
with //
Because your jQuery etc. is not loading, the site is breaking. Note: you will need to verify that your CDN will serve the files over https.

Related

Onclick function to show specific element from menu

When i click on a element(MMA)in my left navigation bar i want it show up on the page and when i click on a other element(boxing) in my navigation i want that to be shown instead, like tabs.
I have tried but cannot get it to work, heres my code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Startsida</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="jquery.js"></script>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<!-- header -->
<div class="jumbotron">
<h1>Top five facts about different martial arts</h1>
</div>
<!-- Top navigation -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
</div>
<ul class="nav navbar-nav">
<li >Start</li>
<li class="active">Martial arts</li>
</ul>
</div>
</nav>
<!-- side navigation -->
<div class="row" id="row">
<div class="col-sm-3" "col-lg-2" id="menu" >
<div class="sidebar-nav" "list-group">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-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>
<h1 class="head">Martial arts:</h1>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<h3 class="side">Martial arts:</h3>
<ul class="nav navbar-nav" id="ul">
MMA
Boxing
Muay thai
Kickboxing
Takwando
Karate
Braziliansk jijutsu
Wrestling
</ul>
</div>
</div>
</div>
</div>
<!-- Main content -->
<div class=" col-sm-9 menu-tab">
<div class="menu-tab-content ">
<h1>Top 5 fact about MMA</h1>
</div>
<div class="menu-tab-content active">
<h1>Top 5 fact about Boxing</h1>
</div>
</div>
</body>
</html>
jquery:
$(document).ready(function() {
$("div#menu>div.sidebar-nav>a").click(function(e) {
e.preventDefault();
$(this).siblings('a.active').removeClass("active");
$(this).addClass("active");
var index = $(this).index();
$("div.menu-tab>div.menu-tab-content").removeClass("active");
$("div.menu-tab>div.menu-tab-content").eq(index).addClass("active");
});
});

Your selector is wrong. div#menu>div.sidebar-nav>a looks for an a that's an immediate child of div.sidebar-nav. But in your HTML, the a is nested several levels below that, so it should be div#menu>div.sidebar-nav a
$(document).ready(function() {
$("div#menu>div.sidebar-nav a").click(function(e) {
e.preventDefault();
$(this).siblings('a.active').removeClass("active");
$(this).addClass("active");
var index = $(this).index();
$("div.menu-tab>div.menu-tab-content").removeClass("active");
$("div.menu-tab>div.menu-tab-content").eq(index).addClass("active");
});
});
.active {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
v
<!-- header -->
<div class="jumbotron">
<h1>Top five facts about different martial arts</h1>
</div>
<!-- Top navigation -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
</div>
<ul class="nav navbar-nav">
<li>Start</li>
<li class="active">Martial arts</li>
</ul>
</div>
</nav>
<!-- side navigation -->
<div class="row" id="row">
<div class="col-sm-3" "col-lg-2" id="menu">
<div class="sidebar-nav" "list-group">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-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>
<h1 class="head">Martial arts:</h1>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<h3 class="side">Martial arts:</h3>
<ul class="nav navbar-nav" id="ul">
MMA
Boxing
Muay thai
Kickboxing
Takwando
Karate
Braziliansk jijutsu
Wrestling
</ul>
</div>
</div>
</div>
</div>
<!-- Main content -->
<div class=" col-sm-9 menu-tab">
<div class="menu-tab-content ">
<h1>Top 5 fact about MMA</h1>
</div>
<div class="menu-tab-content active">
<h1>Top 5 fact about Boxing</h1>
</div>
</div>

Angular routing for Bootstrap content

I'm trying to use AngularJS mainly for seamless routing of an already functioning webpage. The idea is simple: / stands for the root (index.html), /detail stands for a detailed view (detail_zerohouse.html). However, even with the app and both controllers defined, all I can get is a weirdly layed out index.html and I can't even get to the detail view, all I get is an 404 Not Found. Here's my code:
----------------- main.js ----------------------------
var architectApp = angular.module("architectApp");
architectApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'index.html',
controller: 'indexCtrl'
}).
when('/detail', {
templateUrl: 'detail_zerohouse.html',
controller: 'detailCtrl'
}).
otherwise({
redirectTo: '/'
});
}]);
-------------- indexCtrl.js ----------------------------
architectApp.controller('indexCtrl', function($scope){
});
-------------- detailCtrl.js --------------------------
architectApp.controller('detailCtrl', function($scope){
});
-------------------------- root.html ---------------------
<!DOCTYPE html>
<html lang="en" ng-app="architectApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>AngularJS Root</title>
<!-- AngularJS-->
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<script src="js/main.js"></script>
<script src="js/indexCtrl.js"></script>
<script src="js/detailCtrl.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Google Roboto Font-->
<link href='https://fonts.googleapis.com/css?family=Roboto:700' rel='stylesheet' type='text/css'>
<!-- Main user stylesheet-->
<link rel="stylesheet" href="css/style.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<!-- Media helper Fancybox-->
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<!-- Thumbs helper Fancybox-->
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<!-- Bootstrap JS-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- SmoothScroll JS-->
<script src="js/smooth-scroll.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// initialize SmoothScroll
smoothScroll.init();
// set Fancybox properties
$(".fancybox").fancybox({
// fitToView : false, opens the image already in fullscreen
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
closeClick : true,
hideOnOverlayClick : true,
helpers : {
title : { type : 'inside' },
buttons : {}
}
});
});
</script>
</head>
<body class="container-fluid" ng-view>
</body>
</html>
------------------------ index.html ------------------------
<nav class="nav navbar-default" id="navigation">
<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="#">Peter Danko</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">
architektúra <span class="caret"></span>
<ul class="dropdown-menu">
<li>budova</li>
<li>budova</li>
<li>budova</li>
<li>budova</li>
<li>budova</li>
</ul>
</li>
<li>interiér</li>
<li>o mne</li>
</ul>
</div>
</div>
</nav> <!-- end nav -->
<!--<div id="mainWrap" class="container-fluid">-->
<div class="row tileRow" id="firstRow" style="margin-top: 5px;">
<a href="detail.html">
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
</a>
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
</div> <!-- row end -->
<div class="row tileRow">
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
<div class="col-sm-2 tile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
</div> <!-- row end -->
----------------------- detail.html ------------------------------
<nav class="nav navbar-default navbar-top-offset" id="navigation">
<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="#">Peter Danko</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">
architektúra <span class="caret"></span>
<ul class="dropdown-menu">
<li>budova</li>
<li>budova</li>
<li>budova</li>
<li>budova</li>
<li>budova</li>
</ul>
</li>
<li>interiér</li>
<li>o mne</li>
</ul>
</div>
</div>
</nav> <!-- end nav -->
<!--<div id="mainWrap" class="container-fluid">-->
<div class="row tileRow" id="firstRow" style="margin-top: 5px;">
<a href="index.html#navigation">
<div class="col-md-2 tile logoTile">
<img src="img/dummy.png" class="img-responsive" id="">
</div>
</a>
<div class="col-md-6 doubleTile">
<img src="img/zerohouse/7thumb.png" class="img-responsive" id="">
</div>
<div class="col-md-2 tile">
<img src="img/zerohouse/8text.png" class="img-responsive" id="">
</div>
<div class="col-md-2 tile">
<img src="img/zerohouse/8plan.png" class="img-responsive" id="">
</div>
</div> <!-- row end -->
<div class="row tileRow">
<div class="col-md-2 tile">
<img src="img/zerohouse/11thumb.png" class="img-responsive" id="">
</div>
<div class="col-md-2 tile">
<img src="img/zerohouse/12thumb.png" class="img-responsive" id="">
</div>
<div class="col-md-2 tile">
<img src="img/zerohouse/10thumb.png" class="img-responsive" id="">
</div>
<div class="col-md-6 doubleTile">
<img src="img/zerohouse/9thumb.png" class="img-responsive" id="">
</div>
</div> <!-- row end -->
Thanks for any help, I've tried everything I could think of but got nowhere.
/
-/css
-/fancybox
-/helpers
-/img
-/js
-detailCtrl.js
-indexCtrl.js
-main.js
-detail_zerohouse.html
-index.html
-root.html
All .html files are directly in the root folder

I think that you forgot the ngRoute dependency:
var architectApp = angular.module("architectApp",['ngRoute']);
Also to go to detail you should use
<a href="#/detail">
instead of
<a href="detail.html">
Also what you need to rename your file: root.html should be renamed index.html and index.html to root.html.
You need to have the index.html as your landing main page.

got it working, the links now work like '/#/detail'. Can somebody help where to link the fancybox.js? It does not work now. Missing [ ] braces

jQuery hide() or fadeOut() not working

I'm building a site using a template and I think something is interfering with .hide() or .fadeIn(). When I click the image here.
<div id="menuCover">
<img src="SleepingMoonImages/sleepingmoonmenulogo.png" alt=""/>
</div>
nothing happens. It won't disappear or do anything. Also I know menu.js is being detected because I can document.write() and it works and also console.log works in F12 developer tools
Menu.js
$('#menuCover').click(function () {
$('#menuCover').fadeOut();
});
The image I'm trying to click is under
<div id="page2" class="content">
<div class="container_12">
<div class="grid_12">
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<link rel="icon" href="images/favicon.ico">
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/camera.css">
<link rel="stylesheet" href="css/form.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-migrate-1.1.1.js"></script>
<script src="js/superfish.js"></script>
<script src="js/forms.js"></script>
<script src="js/jquery.ui.totop.js"></script>
<script src="js/jquery.equalheights.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.ui.totop.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<script src="js/tms-0.4.1.js"></script>
<script type="text/javascript" src="/js/jssor.slider.mini.js"></script>
<script>
$(document).ready(function(){
$('.slider_wrapper')._TMS({
show:0,
pauseOnHover:false,
prevBu:'.prev',
nextBu:'.next',
playBu:false,
duration:800,
preset:'fade',
pagination:true,//'.pagination',true,'<ul></ul>'
pagNums:false,
slideshow:8000,
numStatus:false,
banners: 'fade',
waitBannerAnimation:false,
progressBar:false
});
});
$(document).ready(function(){
!function(){
var map=[]
,names=[]
,win=$(window)
,header=$('header')
,currClass
$('.content').each(function(n){
map[n]=this.offsetTop
names[n]=$(this).attr('id')
})
win
.on('scroll',function(){
var i=0
while(map[i++]<=win.scrollTop());
if(currClass!==names[i-2])
currClass=names[i-2]
header.removeAttr("class").addClass(names[i-2])
})
}(); });
function goToByScroll(id){
$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}
$(document).ready(function(){
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<!--[if lt IE 8]>
<div style=' clear: both; text-align:center; position: relative;'>
<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
</a>
</div>
<![endif]-->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<link rel="stylesheet" media="screen" href="css/ie.css">
<![endif]-->
</head>
<body class="">
<!--==============================header=================================-->
<header class="page1">
<div class="container_12">
<div class="grid_12">
<div id="logoImage1"><img src="SleepingMoonImages/sleepingmoonwhite.png" alt=""/></div>
<div id="logoImage"><img src="images/logo.png" alt=""/> </div>
<!--<h1><img src="images/logo.png" alt="Gerald Harris attorney at law" height="50" width="1600"/></h1>-->
<div class="menu_block">
<nav class="">
<ul class="sf-menu">
<li class="current men"><a onClick="goToByScroll('page1'); return false;" href="#">Home </a> <strong class="hover"></strong></li>
<li class="men1"><a onClick="goToByScroll('page2'); return false;" href="#">Menu</a><strong class="hover"></strong></li>
<li class=" men2"><a onClick="goToByScroll('page3'); return false;" href="#">Events</a> <strong class="hover"></strong></li>
<li class=" men3"><a onClick="goToByScroll('page4'); return false;" href="#">Hours & Location</a> <strong class="hover"></strong></li>
<!--<li class=" men4"><a onClick="goToByScroll('page5'); return false;" href="#">Contact Us</a> <strong class="hover"></strong></li>-->
</ul>
</nav>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
</div>
</header>
<!--=======content================================-->
<div id="page1" class="content">
<div class="ic">More Website Templates # TemplateMonster.com - September 9, 2013!</div>
<div class="container_12">
<div class="grid_12">
<div style="min-height: 50px;">
<!-- Jssor Slider Begin -->
<div id="slider1_container" style="display: none; position: relative; margin: 0 auto; width: 980px; height: 380px; overflow: hidden;">
...
</div>
<!-- Jssor Slider End -->
</div>
<div class="slider_wrapper">
<ul class="items">
<li>
<img src="images/spacer.gif" alt="">
<div class="caption banner">
<h2>Let Us Show You the Way to Success</h2>
</div>
</li>
<li>
<img src="images/spacer.gif" alt="">
<div class="caption banner">
<h2>Interminable Energy for Your Project</h2>
</div>
</li>
<li>
<img src="images/spacer.gif" alt="">
<div class="caption banner">
<h2>We know how to solve your problems!</h2>
</div>
</li>
<li>
<img src="images/spacer.gif" alt="">
<div class="caption banner">
<h2>Make your business a booming one!</h2>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="page2" class="content">
<div class="container_12">
<div class="grid_12">
<div class="slogan">
<h3>Our Menu</h3>
</div>
</div>
</div>
<div id="menuCover">
<img src="SleepingMoonImages/sleepingmoonmenulogo.png" alt=""/>
</div>
</div>
<div id="page3" class="content">
<div class="container_12">
<div class="grid_12">
<div class="slogan">
<h3>Upcoming Events</h3>
<div class="text1">
Events Information Text TBA
</div>
</div>
</div>
</div>
</div>
<div id="page4" class="content">
<div class="container_12">
<div class="grid_12">
<h3>Hours & Location</h3>
</div>
<div class="companies">
<div class="clear"></div>
</div>
</div>
</div>
<!--==============================footer=================================-->
<footer>
<div class="container_12">
<div class="grid_12">
<div class="copy">
</div>
</div>
<div class="clear"></div>
</div>
</footer>
</body>
</html>

You need to put your JS code in a Document Ready function because it is executing before the page loads.
The solution:
http://jsfiddle.net/m2sv4t7q/
$("document").ready(function {
$('#menuCover').click(function () {
$('#menuCover').fadeOut();
});
});
Adding that function allows the full html of the page to load before executing your javascript.

Bootstrap/Jquery accordion not working propertly

I've created a simple accordion in JSfiddle (http://jsfiddle.net/Rnpb2/) and it works just fine. However when I try to replicate the result on my site, it just isn't working. Pressing on the elements just adds #first, #second and #third at the end of the URL. Probably because I am a rookie the problem is easily solvable but I cannot find it. Here is the whole code of my page:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="lib/jquery-ui-1.10.4/themes/base/jquery-ui.css"/>
<link rel="stylesheet" href="lib/jquery-ui-1.10.4/themes/base/jquery.ui.accordion.css"/>
<link rel="stylesheet" href="lib/jquery-ui-1.10.4/themes/base/jquery.ui.all.css"/>
<script src="lib/bootstrap.min.js"></script>
<script src="lib/fabric.min.js"></script>
<script src="lib/jquery-ui-1.10.4/jquery-1.10.2.js"></script>
<script src="lib/jquery-ui-1.10.4/ui/minified/jquery-ui.min.js"></script>
<script src="lib/jquery-ui-1.10.4/ui/jquery.ui.core.js"></script>
<script src="lib/jquery-ui-1.10.4/ui/jquery.ui.widget.js"></script>
<script src="lib/jquery-ui-1.10.4/ui/jquery.ui.accordion.js"></script>
</head>
<body>
<div id="page">
<header class="container">
<div id="menu" class="navbar navbar-default">
<ul class="nav navbar-nav">
<li class="nav active">Home</li>
<li class="nav">Login</li>
<li class="nav">About</li>
<li class="nav" >Contact</li>
</ul>
</div>
</header>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div id="accordion" class="panel-group">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">
<a href="#first"
data-toggle="collapse"
data-parent="#accordion">Shape</a>
</div>
</div>
<div class="panel-collapse collapse" id="first">
<div class="panel-body">
<p> First <p/>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">
<a href="#second"
data-toggle="collapse"
data-parent="#accordion">Shape</a>
</div>
</div>
<div class="panel-collapse collapse" id="second">
<div class="panel-body">
<p> Second <p/>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">
<a href="#third"
data-toggle="collapse"
data-parent="#accordion">Shape</a>
</div>
</div>
<div class="panel-collapse collapse" id="third">
<div class="panel-body">
<p> Third <p/>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
</body>
</html>
I have added so many different sources in an attempt to make it work, but to no avail. I was adding them one by one.

You need to load jquery before you load bootstrap. If you look at your console you might see an error. Also you should place your scripts at the bottom of you html so that your scripts don't block the UI from loading.
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="lib/jquery-ui-1.10.4/themes/base/jquery-ui.css"/>
<link rel="stylesheet" href="lib/jquery-ui-1.10.4/themes/base/jquery.ui.accordion.css"/>
<link rel="stylesheet" href="lib/jquery-ui-1.10.4/themes/base/jquery.ui.all.css"/>
</head>
<body>
<div id="page">
<header class="container">
<div id="menu" class="navbar navbar-default">
<ul class="nav navbar-nav">
<li class="nav active">Home</li>
<li class="nav">Login</li>
<li class="nav">About</li>
<li class="nav" >Contact</li>
</ul>
</div>
</header>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div id="accordion" class="panel-group">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">
<a href="#first"
data-toggle="collapse"
data-parent="#accordion">Shape</a>
</div>
</div>
<div class="panel-collapse collapse" id="first">
<div class="panel-body">
<p> First <p/>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">
<a href="#second"
data-toggle="collapse"
data-parent="#accordion">Shape</a>
</div>
</div>
<div class="panel-collapse collapse" id="second">
<div class="panel-body">
<p> Second <p/>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">
<a href="#third"
data-toggle="collapse"
data-parent="#accordion">Shape</a>
</div>
</div>
<div class="panel-collapse collapse" id="third">
<div class="panel-body">
<p> Third <p/>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
<script src="lib/jquery-ui-1.10.4/jquery-1.10.2.js"></script>
<script src="lib/jquery-ui-1.10.4/ui/minified/jquery-ui.min.js"></script>
<script src="lib/jquery-ui-1.10.4/ui/jquery.ui.core.js"></script>
<script src="lib/jquery-ui-1.10.4/ui/jquery.ui.widget.js"></script>
<script src="lib/jquery-ui-1.10.4/ui/jquery.ui.accordion.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="lib/fabric.min.js"></script>
</body>
</html>
In the jsfiddle you posted, if you inspect the results you'll see that bootstrap is loaded after jquery.
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<style type="text/css">
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');
.panel-heading {
cursor: pointer;
}
</style>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
});//]]>
</script>
</head>

Navbar covering text (Bootstrap)

I finally started playing around with twitter bootstrap a little but. Im trying to center some text in the middle of the page, however the Navbar is covering part of it. Can somebody help? Im still new to bootstrap and web design in general.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<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>
<style type="text/css">
.container{
width: 700px ;
margin-left: auto ;
margin-right: auto ;
vertical-align:text-bottom;
}
.starter-template{
}
</style>
<body>
<div class="navbar navbar-inverse 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="#">Me</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

When using .navbar-fixed-top, you have to add padding to the top of the body.
body {
padding-top: 50px;
}

One solution is just to center the text.
text-align:center
Another solution is to center the block.
<!--Stack the columns on mobile by making one full-width and the other half-width-->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop-->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>

Categories