I recently started fiddling around with Bootstrap modals on a site I'm working on, and they won't seem to show up at all on my site. I read some of the other posts and tried what they said to try, and none of it worked. Here's the site itself The only active modal is the launch demo modal button, so try that one
Here's my <head> portion:
<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="assets/images/favicon.ico">
<title>#OnlyAtLSA</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$("#button").click(function(){
$('#modal').modal('show');
});
});
</script>
<!-- Bootstrap core CSS -->
<link href="assets/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="assets/css/cover.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/css/ie-emulation-modes-warning.js"></script>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<!-- 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]-->
<link href="//cdn.rawgit.com/noelboss/featherlight/1.4.0/release/featherlight.min.css" type="text/css" rel="stylesheet" />
</head>
and here is my trigger button:
<button type="button" class="btn btn-primary btn-xlarge" data-toggle="modal" data-target="#mission">
Launch demo modal
</button>
And here is my modal itself:
<!-- Our Mission -->
<div class="modal fade" id="mission" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Our Mission</h4>
</div>
<div class="modal-body">
<p>The Legal Studies Academy is welcome to all students who have a deep interest in and curiosity about the law, law-related fields, and legal and ethical issues. The First Colonial Legal Studies Academy functions as a school-within-a-school to offer students the opportunity to not only embrace an academic curriculum that will fully prepare them for post-secondary education, but will also allow career exploration within the area of legal studies. Students enrolled in the Legal Studies Academy will receive a solid foundation in core subjects as well as practice and experience in a work-site learning component.<br>
The Academy curriculum goes beyond the basic four-year high school requirement by infusing law-related units into the core subject areas of English, science, and social studies and by providing students with specialized coursework. The program of studies is extended through seminars and field trips on law-related subjects. In addition, they Academy offers students the opportunity to experience the reality of law careers by emphasizing active learning in criminal investigations and Mock Trials in our courtroom.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End of Our Mission -->
Anybody see anything wrong??
If you don't mind using the bootstrap js CDN then it is probably the easist option:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
This will load all of the bootstrap JS functionality into your site. It will make it easier to use other bootstrap JS as well if you want to.
Otherwise, you can download the file locally and serve it like you are serving the bootstrap css.
Then, I would just build around this code
http://getbootstrap.com/javascript/#live-demo
Which I think is where you got your current code.
Related
Really nooby question, but couldn't find it on this site, and just can't get it to work.
How can I get javascript and jquery to work when putting CDN into headers / footers?
My javascript is working when I include the CDN and the tags right in with the HTML, but I want to have my javascript on other pages, rather than in with the HTML view pages.
I can't see what is wrong. Maybe you can help?
this is working
<div class="form-group">
<label for="caption">Event Description</label>
<script src="https://cdn.ckeditor.com/ckeditor5/12.3.1/classic/ckeditor.js"></script>
<textarea class="form-control" name="event_description" id="body" cols="30" rows="20"></textarea>
<script>
ClassicEditor
.create( document.querySelector( '#body' ) )
.catch( error => {
console.error( error );
} );
</script>
</div>
However this is not
I have
<?php require_once("includes/header.php"); ?>
<?php require_once("includes/footer.php"); ?>
on all tops and bottom of HTML view pages.
Here are my headers and footers
<?php ob_start(); ?>
<?php require_once("init.php"); ?>
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin - Bootstrap Admin Template</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/sb-admin.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" 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]-->
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
footer
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="js/scripts.js"></script>
<!-- Bootstrap Core JavaScript -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- WYSIWYG -->
<script src="https://cdn.ckeditor.com/ckeditor5/12.1.0/classic/ckeditor.js"></script>
</body>
</html>
here is the scripts.js page
ClassicEditor
.create( document.querySelector( '#body' ) )
.catch( error => {
console.error( error );
} );
$(document).ready(function(){
alert('hello');
});
not sure why nothing works from the scripts.js page. The alert is not working. I have JQuery.js referenced also..
Thank you
You should put <script src="js/scripts.js"></script> after JQuery and other dependencies. Because your script.js is using JQuery before you imported it.
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- WYSIWYG -->
<script src="https://cdn.ckeditor.com/ckeditor5/12.1.0/classic/ckeditor.js"></script>
<!-- MY JS -->
<script src="js/scripts.js"></script>
</body>
</html>
Just make the following changes in your footer and everything will work fine.
Regarding to keep JS in header and footer
<script>-tag over the closing </body>-Tag, this will prevent that the page is loading endless for the Javascript file, before the page is actually loaded.
It was trends before to put JavaScript code in the header but now because of SEO and site performance, it is better to put JavaScripts in the footer. yes, that means all the js code.
How to avoid such issues in future?
you first need to include the dependencies required by your code and other libraries. like jQuery is required by most of the libraries bootstraps, fancybox, jQuery full calendar and so on. so first include jQuery library then other js libraries if they have any other dependencies than include them before your custom javascript. it is just same as in your code you define something above. what if you try to use it before defining it? no way it will never work...
Now what about CSS dependencies?
always include them in the header inside tags.
<!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>Bootstrap Glyphicons</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="bootstrap-4.0.0-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<!-- 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="container">
<div class="page-header">
<h1>Bootstrap Glyphicons</h1>
<p class="lead">Icons that are actual, real-life fonts! This means no Photoshopping required :)</p>
</div><!-- page-header -->
<p><span class="glyphicon glyphicon-circle-arrow-right"></span></p>
<h3><span class="glyphicon glyphicon-music"></span> An icon in a header!</h3>
<p><span class="glyphicon glyphicon-trash"></span> There's an icon for just about anything you can think of!</p>
<p>You can link an icon like so: <span class="glyphicon glyphicon-cog"></span></p>
<button type="button" class="btn btn-default btn-lg btn-info">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> A button with an icon
</button>
<br><br>
<div class="alert alert-warning">
<span class="glyphicon glyphicon-exclamation-sign"></span>
You may use icons in alert messages, too!
</div>
<br>
<h4>Use icons for User Interface design</h4>
<div class="btn-toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-play"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-pause"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-stop"></span></button>
</div>
</div>
<hr>
</div><!-- container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.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>
</body>
</html>
hey I am trying to show icon in the browser but it is not showing in the browser while I am using proper bootstrap tags but didn't find any icon in the browser
is it any tag error or something please help me to understand it
** is it necessary ** to use all the cdn links like jQuery javascript are use or choose manually which one is the better decision.
That's because you're using Bootstrap 4, and according to its documentation, in that version they dropped the Glyphicons icon font, that means, from v4.0, Bootstrap won't offer Glyphicon support.
If you need to use icons in Bootstrap 4, you need to search alternatives like Font Awesome and add it by yourself, or get down to Bootstrap 3.3.7 and use it.
You have to include the glyphicons. Put this after importing bootstrap
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
Replacing your line
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
with
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
solved the issue for me.
You are also trying to reference a local version of the 4.0.0 css, you probably don't need that line.
So I'm trying to get full calendar installed on my website, and after a few issues, I managed to get to a point where I have no errors but the calendar itself isn't displaying correctly (like it doesn't have css).
I checked, and as far as I can tell, all of the files that need to be referenced are.
Any help would be greatly appreciated!
<!DOCTYPE html><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="">
<!-- Bootstrap core CSS -->
<link href="src/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- FullCalender files references -->
<script src="src/jquery.js"></script>
<script src='src/moment.min.js'></script>
<script src='src/fullcalendar.min.js'></script>
<script src="src/gcal.js"></script>
<!-- Custom styles for this template -->
<link href="components/style.css" rel="stylesheet">
<link src="src/fullcalendar.min.css" rel="stylesheet">
<link src="src/fullcalendar.print.css" rel="stylesheet">ipt>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
googleCalendarApiKey: 'KEY',
events: {
googleCalendarId: 'ID#group.calendar.google.com'
}
});
});
</script><title>Western PA ARML</title></head> <nav class="navbar navbar-inverse">
<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="index.html">Western PA ARML</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<!--<li>Home</li> -->
<li>Calendar</li>
<li>Join the Team</li>
<li>People</li>
<li>Archive</li>
<li>Links</li>
<li>About</li>
<!--<li>Photos</li>-->
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<body>
<div id="content"><div class="section">
<h1>Calendar</h1>
<div id='calendar'></div>
</div> </div> <!--Content-->
<div class="footer">
Ⓒ 2017 Western Pennsylvania ARML Team
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="src/bootstrap/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>
This is how it looks -
A few things which are issues with your code (starting from the original edit up to the current version):
1) You need to make sure your CSS and JS files are all based on the same version of fullCalendar, and also that your jQuery and momentJS files are compatible versions, and loaded in the correct order (see https://fullcalendar.io/support/ and https://fullcalendar.io/docs/usage/ respectively).
2) Don't use fullCalendar.io as a CDN. Either use the recommended CDNJS site (as per https://fullcalendar.io/download/) or download and host the files yourself.
3) <script>window.jQuery || document.write('<script src="src/jquery.js"><\/script>')</script> seems to be redundant, since you already included jQuery just above.
4) gcal.js needs to be loaded after fullCalendar.js, because it depends on it in order to work properly.
5) I realised your <link> tags are specified incorrectly. You need to put the URL in a "href" attribute, not a "src" (that's used for script tags). See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link fpr the spec.
6) You're loading the "print" CSS and the regular CSS both into the code, but the "print" style will override the regular style (because it's loaded later). You need to put a media query in the "print" one to ensure it only gets used when the user tries to print the page. e.g.
<link href="src/fullcalendar.print.css" rel="stylesheet" media="print">
Additional side comments:
1) You don't need jQuery-UI for this to work, and nothing else on your page seems to make use of it, so you can remove it.
2) You have HTML which is outside both the <head> and <body> tags. This is not valid. Anything you want to display should be inside <body>. Many browsers might be tolerant of this problem but it's messy and technically invalid HTML, so you can't expect it to always work properly.
You're placing your css in the wrong place.
<link href="components/style.css" rel="stylesheet">
<link src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.2/fullcalendar.min.css" rel="stylesheet">
<link src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.2/fullcalendar.print.css" rel="stylesheet">
Placing the code like this will cause external css resources to override your custom css.
Instead place it like this:
<link src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.2/fullcalendar.min.css" rel="stylesheet">
<link src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.2/fullcalendar.print.css" rel="stylesheet">
<link href="components/style.css" rel="stylesheet">
I have a little script that uses Angular to list some records from a Rails API REST hosted in OpenShift, my public/.htaccess looks like this:
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Methods "GET, POST, OPTIONS, DELETE, PUT, PATCH"
Header add Access-Control-Allow-Headers "Content-Type, Authorization, Content-Length, X-Requested-With"
PassengerFriendlyErrorPages off
My Html/Angular looks like this:
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>Test Angular from Shared Hosting to OpenShift RAILS API REST</title>
<link rel="icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap-3.3.5/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="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.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body ng-app="MyApp">
<div ng-controller="PostsCtrl">
<div ng-repeat="post in posts">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img alt="100%x200" data-src="holder.js/100%x200" style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQyIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDI0MiAyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MjAwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTRlYWU3NWZmODIgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMnB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNGVhZTc1ZmY4MiI+PHJlY3Qgd2lkdGg9IjI0MiIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI4OC44NDk5OTg0NzQxMjExIiB5PSIxMDUuNyI+MjQyeDIwMDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" data-holder-rendered="true">
<div class="caption">
<h3>{{post.name}}</h3>
<p>{{post.body}}</p>
<p><a role="button" class="btn btn-primary" href="#">Button</a> <a role="button" class="btn btn-default" href="#">Button</a></p>
</div>
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular-resource.js"></script>
<script>
var app = angular.module("MyApp", ['ngResource']);
app.factory("Post", function($resource) {
return $resource("http://vr-20puntos.rhcloud.com/tables.json");
});
app.controller("PostsCtrl", function($scope, Post) {
Post.query(function(data) {
$scope.posts = data;
});
});
</script>
</body>
</html>
I don't know what happen, I'm using the Free Plan just for testing
Should be in comments section but it has gotten too long. Here's my take on this issue:
Working demo from OpenShift that uses jQuery with callback, images from flickr site.
OpenShift DOES NOT allow CORS enabled in its headers (ya, it is 2015! Tried a few configuration but no go)
Modify your tables.json code to follow the output of http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?, can't go wrong with the big boys.
Also look into the console and check the 'response headers' since that will help you debug the CORS issue. Good luck
I am not able to get the navbar button to toggle the menu down when the navbar is collapsed for smaller browsers. I have tried all the suggestions on this forum regarding different js links and I have looked at the source code of numerous bootstrap example sites where the button works but I am still not able to get this to work. I can even build it in bootply where it works fine and when I bring it into my file directory it doesn't work.
Is there something in this code that is obviously preventing this from working?
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Snow's Farm</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum- scale=1.0, user-scalable=no">
<meta name="description" content>
<meta name="author" content="">
<link href="./bootstrap.min.css" rel="stylesheet" media="screen">
<link href="./main.css" rel="stylesheet" media="screen">
</head>
<body class="bs-docs-home" style data-twttr-rendered="true">
<a class="sr-only" href="#content">Skip navigation</a>
<!-- Docs master nav -->
<div class="navbar navbar-inverse navbar-fixed-top">
<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>
<a class="navbar-brand" href="#">Snow's Farm</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a class="dropdown" href="www.google.com"><p>The Farm Family</p></a></li>
<li><p>Mulch</p></li>
<li><p>Soil</p></li>
<li><p>Stone</p></li>
<li><p>Christmas Trees</p></li>
<li><p>Delivery</p></li>
<li><p>Pricing Documents</p></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</body>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- JavaScript plugins (requires jQuery) -->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="./bootstrap.js"></script>
<!-- Enable responsive features in IE8 with Respond.js (https://github.com/scottjehl/Respond) -->
<script src="./respond.min.js"></script>
<script src="./jquery.js"></script>