I'm trying to get the collapse button on a navbar to work but i can't seem to. I've checked that the data target is pointing to .navbar-collapse and as far as I can tell my css and javascript are all there. Can't work out what I'm doing wrong.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javasript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javasript" src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title></title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="assets/images/title.png" class="img-responsive" /></a>
<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-header">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-xs-12">
<img src="assets/images/hero-banner.jpg" class="img-responsive" />
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<img src="assets/images/mountains-small.jpg" class="img-responsive" />
<p id="hometext">text goes here</p>
</div>
</div>
</div>
<div class="container">
<div class="container" id="footer">
<div class="row">
<div class="col-xs-12">
<p class="footerheading">Contact Us</p>
<p class="copyright">© 2014 company</p>
</div>
</div>
</div>
</div>
</div>
</body>
Related
I have a click event that goes to a Bootstrap Nav Tab. When I click the button it goes to the tab page but is halfway down. I'm trying to have it when a user clicks on the button they start at the top of the page rather than halfway through it. I have tried a couple things but I can't seem to get it to work. Any help would be appreciated!
$('#gotonew').click(function(){
$('a[href="#whatsNew"]').click();
console.log($('a[href="#whatsNew"]').text() + ' click triggered');
});
<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/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Font Awesome CDN -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body id="learn">
<!-- Nav Bar -->
<nav class="navbar navbar-nav fixed-top fixed-top-1 navbar-expand-sm navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse1 navbar-collapse justify-content-end" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</div>
<!-- container -->
</nav>
<!--First set of Nav Tabs-->
<nav class="navbar navbar-expand bg-inverse navbar-inverse fixed-top fixed-top-2">
<div class="container-fluid">
<div class="navbar-collapse collapse justify-content-left" id="navbar2">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active2" href="#overview" role="tab" data-toggle="tab">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gettingStarted" role="tab" data-toggle="tab">Getting Started</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#whatsNew" role="tab" data-toggle="tab">What's New</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Tab panes -->
<section id="subNavPanes">
<div class="tab-content">
<div role="tabpanel" class="tab-pane show fade active" id="overview">
<header>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="container">
<div class="jumbotron">
<div class="row">
</div>
</div>
</div>
</header>
<div class="container">
<div class="row">
<!---Button I want to Link to What's New Tab-->
<p class="text-center"><button id="gotonew" class="btn btn-primary">See all the new features</button></p>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<p>footer</p>
</footer>
<!--The Nav Tab Page I'm trying to link to from the Overview Tab-->
<div role="tabpanel" class="tab-pane fade in" id="whatsNew">
<header>
<div class="container">
<div class="jumbotron">
<div class="row">
</div>
</div>
</div>
</header>
<section id="section6" class="d-none d-md-block">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center bhoechie-tab-container">
<div class="row">
<div class="col-md-3 bhoechie-tab-menu">
<div class="list-group .d-sm-block">
<a href="#stepOne" class="list-group-item active text-center">
<h4>Objective and quantified</h4>
</a>
<a href="#stepTwo" class="list-group-item text-center">
<h4>Objective and quantified</h4>
</a>
<a href="#stepThree" class="list-group-item text-center">
<h4>Objective and quantified</h4>
</a>
<a href="#stepFour" class="list-group-item text-center">
<h4>Objective and quantified</h4>
</a>
<a href="#stepFive" class="list-group-item text-center">
<h4>Objective and quantified</h4>
</a>
<a href="#stepSix" class="list-group-item text-center">
<h4>Objective and quantified</h4>
</a>
</div>
</div>
<div class="col-md-9 bhoechie-tab text-center">
<!-- flight section -->
<div id="stepOne" class="bhoechie-tab-content active">
<img class="img-fluid " src="" alt="picture">
<div class="tab-text">
<h3>...</h3>
<p>...</p>
</div>
</div>
<!-- train section -->
<div id="stepTwo" class="bhoechie-tab-content">
<img class="img-fluid" src="" alt="figure10">
<div class="tab-text">
<h3>...</h3>
<p>....</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Footer -->
<footer id="footer">
<p>footer...</p>
</footer>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/js/mdb.min.js"></script>
</body>
</html>
I figured out a solution.
`$('#gotonew').click(function(){
$('a[href="#whatsNew"]').click();
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
console.log($('a[href="#whatsNew"]').text() + ' click triggered');
});`
I have a few drop down menus on my pages navbar using bootstrap elements along with my customized javascript. I have made it conditional to only run if the screen width size is greater than 480 (the xs size for bootstrap). Problem is that the script runs when the screen width is at 480, below 480, and of course 480. IN other words my conditional statement surrounding the script running the dropdown on hover script is being ignored by the browser for some reason. MY GOAL is to make it so the hover effect only takes place as long as the navbar is not collapsed.
Javascript
if ( $(window).width() > 480) {
$('ul.nav li.dropdown').hover(function () {
"use strict";
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function () {
"use strict";
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
}
HTML
<!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">
<title>Made with Love and Sarcasm</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<!--Custom theme-->
<link href="css/styles.css" rel="stylesheet">
<link href="css/theme.min.css" rel="stylesheet">
<link href="css/sticky-footer.css" rel="stylesheet">
<script src="https://use.typekit.net/mxj2kia.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</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.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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 href="index.html" class="navbar-brand title">
<h1 class="sr-only">Made With Love and Sarcasm</h1>
<img src="img/ggc_logo_larger.png" alt="logo" class="pushup img-responsive img-rounded"></a> </div>
<div id="navbar" class="navbar-collapse collapse">
<form class="form-inline inline" action="">
<!--Make sure to program a search feature here-->
<div class="input-group navbar-btn">
<input type="text" class="form-control" placeholder="Search For" aria-describedby="Placeholder">
<span class="input-group-btn">
<button type="submit" class="btn btn-default" id="search-button"> <span class="glyphicon glyphicon-search"></span> </button>
</span> </div>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="title dropdown">Admire<span class="caret"></span>
<ul class="dropdown-menu" aria-labelledby="admire menu">
<li><span class="glyphicon glyphicon-scissors"> Outfits</span></li>
<li><span class="glyphicon glyphicon-cutlery"> Foods</span></li>
<li><span class="glyphicon glyphicon-sunglasses"> Props</span></li>
<li><span class="glyphicon glyphicon-star"> Misc</span></li>
</ul>
</li>
<li class="title dropdown">Explore<span class="caret"></span>
<ul class="dropdown-menu" aria-labelledby="admire menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</li>
<li class="title dropdown">Create<span class="caret"></span>
<ul class="dropdown-menu" aria-labelledby="admire menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</li>
</ul>
</div>
<!--/collapse-->
</div>
<!--/container-->
</div>
<!--/navbar-->
<div class="jumbotron placeholder">
<div class="container">
<h1>Place to Put Amazing Photos</h1>
</div>
<!--replace with image-->
</div>
<div class="container">
<div class="row visible-lg visible-md visible-sm">
<div class="col-md-3 visible-md visible-lg"> Incredible Outfits </div>
<div class="col-md-3 visible-md visible-lg"> Wonderful Cooking </div>
<div class="col-md-3 visible-md visible-lg"> Outstanding Props </div>
<div class="col-md-3 visible-md visible-lg"> Amazing Creations </div>
<div class="col-sm-3 visible-sm"> Incredible Outfits </div>
<div class="col-sm-3 visible-sm"> Wonderful Cooking </div>
<div class="col-sm-3 visible-sm"> Outstanding Props </div>
<div class="col-sm-3 visible-sm"> Amazing Creations </div>
</div>
<div class="row visible-xs">
<div class="col-xs-6"><span class="glyphicon glyphicon-scissors"> Outfits</span> </div>
<div class="col-xs-6"><span class="glyphicon glyphicon-cutlery"> Cooking</span> </div>
</div>
<br>
<div class="row visible-xs">
<div class="col-xs-6"><span class="glyphicon glyphicon-sunglasses"> Props</span> </div>
<div class="col-xs-6"><span class="glyphicon glyphicon-star"></span> Creations </div>
</div>
</div>
<div class="footer">
<div class="container">
<p>© 2017 Made With Love and Sarcasm</p>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<script src="js/function.js" type="text/javascript"></script>
</body>
</html>
Customized CSS
#charset "utf-8";
/* CSS Document */
h1, h2, h3, h4, h5, h6, h7 {
font-family: vatican;
}
.title {
font-family: vatican;
}
.pushup {
margin-top: -8px;
}
.placeholder {
height: 500px;
}
div.jumbontron h1 {
color: black;
}
.inline {
display: inline-block;
}
I was using the wrong size. The size should be 767.
I am just trying to have the hamburger icon drop down the navbar when the screen is formatted to iphone size but it will not drop down.
I am also pretty sure that the JS and jquery placement is correct.
<head>
<title>Bootstrap Example</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">
<link rel="stylesheet" type="text/css" href="Portfolio.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- NAVBAR -->
<nav id="myNavbar" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collpase" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
COTO
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Services</li>
<li>Pricing</li>
<li>Team</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<!-- NAVBAR END -->
</body>
</html>
According to Bootstrap (https://getbootstrap.com/docs/4.0/components/navbar/):
You have incorrect data-toggle attribute:
data-toggle="collpase" → data-toggle="collapse"
Change the navbar-toggle button's data-target attribute to ID selector instead of class selector:
data-target=".navbar-collapse" → data-target="#navbar"
Add the ID attribute to navbar:
<div class="navbar-collapse collapse" id="navbar">
You had just a little typo at the data-toggle attribute. Also, you must always use ID selectors when you are trying to select a single element. Here is a working example (tested):
<head>
<title>Bootstrap Example</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">
<link rel="stylesheet" type="text/css" href="Portfolio.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- NAVBAR -->
<nav id="myNavbar" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
COTO
</div>
<div class="navbar-collapse collapse" id="myNav">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Services</li>
<li>Pricing</li>
<li>Team</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<!-- NAVBAR END -->
</body>
</html>
I'm learning bootstrap + asp.net mvc by making portfolio website.
It is based on bootstrap example.
On this example we see one page website. When we click e.g. "about" the site is using javascript and scrolling to about section. I understand that.
but... i want to try this 1 page website, spread on many Controllers (and views), use layout page with RenderBody() in it and keep the same funcionality like before(scrolling).
e.g my views:
About/Index
Portfolio/Index
Contact/Index
and layoutPage:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
<link href="#Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/font-awesome.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css"/>
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<!-- NAVI -->
<div id="Navigation" class="navbar navbar-default navbar-fixed-top navbar-mm">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse">
<span class="sr-only">Toggle navi</span> Menu<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#">Welcome to Site.com</a>
</div>
<div class="collapse navbar-collapse navbar-select">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li class="page-scroll">
Portfolio
</li>
<li class="page-scroll">
About
</li>
<li class="page-scroll">
Contact
</li>
<li class="page-scroll">
Blog
</li>
</ul>
</div>
</div>
</div>
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="~/Img/lawl.png" alt="">
<div class="intro-text">
<span class="name">mySite.com</span>
<hr/>
<span class="skills">Developer</span>
</div>
</div>
</div>
</div>
</header>
<div class="container">
#RenderBody()
</div>
<footer class="footer text-center">
<div class="footer-upp">
<div class="container">
<div class="row">
<div class="footer-col col-lg-4 col-md-4 col-sm-4">
<h3>CONTACT</h3>
tel: 000-000-000 <br />
email: example#gmail.com <br />
City
</div>
<div class="footer-col col-lg-8 col-md-8 col-sm-8">
<h3>MEET ME</h3>
<ul class="list-inline">
<li>
<i class="fa fa-fw fa-facebook"></i>
</li>
<li>
<i class="fa fa-fw fa-linkedin"></i>
</li>
<li>
<i class="fa fa-fw fa-github"></i>
</li>
<li>
<i class="fa fa-fw fa-envelope"></i>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer-down">
<div class="container">
<div class="row">
<div class="col-md-12">
<p>Copyright ©</p>
</div>
</div>
</div>
</div>
</footer>
<script src="~/Scripts/Site.js"></script>
There is anyway to make this?
my Bootstrap slider is not working. I'm not sure why. Here' my HTML where all css and js loading correctly. I get an error in console: slider is not a function. I downloaded the latest version of bootstrap slider (using Chrome). The slider, if triggered from console also doesn't work.
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="/static/css/header.css" />
<script type="text/javascript">
$(document).ready(function() {
$('.slider').slider();
});
</script>
</head>
<body>
<nav class="navbar navbar-default navbar-inverse" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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="#"></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 navbar-right">
<li class="active">How it works</li>
<li>Find Vet</li>
<li class="dropdown">
About<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Company</li>
<li>Team</li>
<li class="divider"></li>
<li>Contact</li>
</ul>
</li>
<li class="dropdown">
<b>Login</b> <span class="caret"></span>
<ul id="login-dp" class="dropdown-menu">
<li>
<div class="row">
<div class="col-md-12">
Login via
<div class="social-buttons">
<i class="fa fa-facebook"></i> Facebook
<i class="fa fa-twitter"></i> Twitter
</div>
or
<form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required>
<div class="help-block text-right">Forget the password ?</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> keep me logged-in
</label>
</div>
</form>
</div>
<div class="bottom text-center">
New here ? <b>Join Us</b>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div id="content">
<input type="text" class="" value="" data-slider-min="2" data-slider-max="25" data-slider-step="1" data-slider-value="25" data-slider-orientation="vertical" data-slider-selection="after" data-slider-tooltip="show">
</div>
<link rel="stylesheet" href="/static/css/bootstrap-min.css"/>
<link rel="stylesheet" href="/static/css/header.css"/>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="/static/css/bootstrap-side-notes.css" />
<link rel="stylesheet" href="/static/css/animate.css"/>
<link rel="stylesheet" href="/static/css/bootstrap-formhelpers-min.css" media="screen"/>
<link rel="stylesheet" href="/static/css/slider.css"/>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap-formhelpers-min.js"></script>
<script type="text/javascript" src="/static/js/validator.min.js"></script>
<script type="text/javasript" src="/static/js/bootstrap-slider.js"></script>
</body>
</html>
<script type="text/javasript" src="/static/js/bootstrap-slider.js"></script>
Typo on the type, missing a 'c' in javascript should be:
<script type="text/javascript" src="/static/js/bootstrap-slider.js"></script>
I'd suggest looking into a good IDE/Editor.