I have been following the tutorial here -> https://www.andrewmunsell.com/tutorials/jekyll-by-example/tutorial to build my first site learning both Jekyll and Bootstrap. I am new to CSS, and a beginner with HTML.
I am on the step that begins with the bold subject line "Liquid Template System".
The problem is my site is not reflecting the CSS.
In the tutorial code, he references , however in the Bootstrap-3.2.0-dist from www.getbootstrap.com, there is no longer a bootstrap-responsive.css. There are only the following:
My code is below; which I have cycled through referencing all four css files listed and they aren't reflected when I jekyll build then jekyll serve. Currently I am only local hosting during this development, once finished I will push to my site. I have the css directory in my _site directory, which is also where my index.html file is located.
Any one have an experience with Jekyll not reflecting CSS changes in Bootstrap?
Based on other searches on StackOverflow, I have tried clearing my cache, rebuilding and serving with no joy. Advice is appreciated here. Thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{{ site.name }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="{{ site.description }}">
<link href="/css/bootstrap.css" rel="stylesheet">
<style>
body {
padding-top: 60px;
}
</style>
<link href="/css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">{{ site.name }}</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="/">Home</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
{{ content }}
</div>
The OP was referring to Bootstrap 2. The latest version, 3, does not have a separate file for responsive elements, because it assumes responsiveness from the off. If you just want to follow along with the tutorial then you can download Bootstrap 2 here.
Further:
I have the css directory in my _site directory, which is also where my index.html file is located.
Is your _site directory the ServerRoot for your localhost? If not, drop the initial forward slash from the link attribute, as it's currently pointing to your ServerRoot.