CSS not reflected in localhost page after -build, -serve, using Jekyll and Bootstrap

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:

  • bootstrap-theme.css
  • bootstrap-theme.min.css
  • bootstrap.min.css
  • bootstrap.css

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>

Answers


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.


Need Your Help

gridview asp.net mouse over TR find which row was clicked on server side code

asp.net javascript gridview

I am pretty new to the whole javascript thing. I have a gridview that I want the user to be able to hover over the whole row (believe its the whole TR) and be able to click anywhere and that would...

Is it possible to password protect an SQL server database even from administrators of the server?

sql database sql-server-2005 security

I want to install an application (ASP.Net + SQL server 2005 express) in local network of some small company for demoing it for a period of time, but I also want nobody even sysadmin have no permiss...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.