Finding the Bootstrap CSS file on GitHub Pages

Currently, I am in the process of uploading a webpage to github pages via jekyll and ensuring that all my pages and posts are able to access the bootstrap 3 stylesheets. These stylesheets are located in the css folder within the root directory: ./css/

When I include the following code snippet in my homepage:

<link href="./css/bootstrap.css" rel="stylesheet">
<link href="./css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="./css/custom.css" type="text/css"/>

The homepage (index.html in root) loads perfectly with the correct formatting. However, other pages in different locations or folders do not recognize these stylesheets because ./ is specific to the current directory - as far as I understand. To bypass this issue with Jekyll, I tried:

<link href="{{site.url}}/css/bootstrap.css" rel="stylesheet">
<link href="{{site.url}}/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="{{site.url}}/css/custom.css" type="text/css"/>

After trying this, the result is:

<link href="ward9250.github.io/HybRIDS/css/bootstrap.css" rel="stylesheet">
<link href="ward9250.github.io/HybRIDS/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="ward9250.github.io/HybRIDS/css/custom.css" type="text/css"/>

Nevertheless, applying this to the homepage does not display correctly with any of bootstrap's settings or styles along with my custom tweaks.

I need assistance in rectifying this issue. How can I ensure that all my pages, regardless of their location, have access to my stylesheets?

Thank you, Ben.

UPDATE

I've made an interesting discovery - if I adjust my HTML to:

<link href="/HybRIDS/css/bootstrap.css" rel="stylesheet">
<link href="/HybRIDS/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="/HybRIDS/css/custom.css" type="text/css"/>

Then the page renders correctly. However, I thought it was recommended to steer clear of absolute paths like /?

htmlcsstwitter-bootstrapgithub-pages

Answer №1

In case you're facing a similar issue, the key to solving it lies in including the direct path because of the specific URL structure of GitHub project pages. This advice is extracted from the Jekyll documentation.

Understanding Project Page URLs

When you want to preview your Jekyll site before pushing it to GitHub's gh-pages branch, navigating the URL structure that GitHub uses for Project Pages can be tricky. Here's a strategy for working with the GitHub Project Page URL format (username.github.io/project-name/) while still being able to preview your Jekyll site locally.

  1. In your _config.yml file, adjust the baseurl setting to /project-name – take note of the leading slash and absence of a trailing slash.
  2. For referencing JS or CSS files, follow this syntax: {{ site.baseurl }}/path/to/css.css – ensure there is a slash right after the variable (just before "path").
  3. For permalinks or internal links, use this pattern: {{ site.baseurl }}{{ post.url }} – remember not to include a slash between the two variables.
  4. Lastly, if you wish to preview your site without committing or deploying by using jekyll serve, make sure to provide an empty string as the --baseurl option. This will allow you to view everything normally at localhost:4000 (without "/project-name" at the start): jekyll serve --baseurl ''

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Drawing a point on a line within an HTML canvas

Currently, I am in need of a Canvas Path Script that can provide me with points on a line based on percentages. For instance, at 50%, I would like to get the point that represents half of the line, and at 75%, I want to find the point that is 3/4 along the ...

javascripthtmlhtml5-canvas

Next.js optimizes the page loading process by preloading every function on the page as soon as it loads, rather than waiting for them to

My functions are all loading onload three times instead of when they should be called. The most frustrating issue is with an onClick event of a button, where it is supposed to open a new page but instead opens multiple new pages in a loop. This creates a c ...

javascripthtmlreactjsnext.js

Make sure that the login page is the first to appear

My login page is functioning perfectly as expected. Instead of using a database of users, I have hardcoded the username and password within the code. However, the issue I am facing is that the login page is not displayed before the index.php page. Users c ...

phphtml

The nonexistence of the ID is paradoxical, even though it is present

I've been working on a school project that involves a dropdown box with the id "idSelect." However, I'm encountering an issue where it says that idSelect is not defined when I try to assign the value of the dropdown box to a variable. Even after ...

javascripthtml

The options that are not selected in a dropdown menu will not be added to a different dropdown menu

In my application, I have 2 select boxes. When the user submits the page, only the selected students in the first select box #studentadd are appended to the second select box #studentselect. However, the unselected options from #studentadd do not get appen ...

phpjqueryhtmlajaxmysqli

CSS Filter Generator for full compatibility with Internet Explorer

Looking for suggestions on a CSS generator that supports writing image filter declarations in IE syntax, along with web-kit and filter compatibility. The specific properties I would like to replicate in IE are: filter: grayscale(1) contrast(1) bright ...

cssinternet-explorerfilter

Tips on concealing sub-menu until cursor hovers over it

I'm currently in the process of creating a navigation bar for a website, but I'm encountering some challenges with the submenu. While I've managed to position the submenu relative to its parent ul, I'm struggling with making it invisibl ...

htmlcsshover

Experiencing issues on Chrome while switching stylesheets; any tips on avoiding this glitch?

I am currently working on designing a webpage and running into some issues with Chrome when changing stylesheets for light and dark themes. Initially, I have included this <link>: <link rel="stylesheet" href="/css/dark.css" id="theme"> To sw ...

htmljquerycssgoogle-chrome

Is it possible to utilize a relative <a href="#foo">link and navigate to a specific anchor on the same page even when the <base> element is in use?

Suppose I have a page www.example1.com/foo/test.html that includes the code below: <head> <base href=http://www.example2.com/> </head> <body> <a href=#foo>foo</a> ... <a name=foo /> </body> When I click on " ...

htmltagshrefanchor

The aligning properties of Bootstrap and compatibility with Internet Explorer

In my current setup, I have an h1 inside a container that I want to be centered horizontally. Using Bootstrap's .d-flex and .justify-content-center classes achieves this effect, but unfortunately it does not work in Internet Explorer. <div class=" ...

htmlcsstwitter-bootstrapbootstrap-4internet-explorer-11

Is there a way to customize table design while utilizing render_template function in Python Flask?

Hello, I am currently developing a website using Flask, HTML, and CSS. I am utilizing Pandas to read a CSV file, process the data, and display it in a table format on my HTML page. Can you guide me on how to customize the style of the table? Additionally, ...

pythonhtmlcsspandas

PHP HTML Decoding Unveiled

Dealing with HTML that appears like this can be challenging: <font color=3D=22=236EAED2=22 style=3D=22font-siz= e:13px;font-family:arial;=22><B>Some Info Here</B></font></= A></td></tr><tr><td><font ...

phphtmlencodingcharacter-encoding

I seem to be encountering an issue with my captcha function on the registration form

I am currently working on a registration form where user data will be stored in the database only if the correct captcha code is entered. If the captcha code is incorrect, it should display an error message. However, I am facing an issue where even if the ...

javascriptphpjqueryhtmlmysql

Error encountered: iPad3 running on iOS7 has exceeded the localStorage quota, leading to a

Experiencing a puzzling issue that even Google can't seem to solve. I keep getting the QuotaExceededError: DOM Exception 22 on my iPad3 running iOS7.0.4 with Safari 9537.53 (version 7, WebKit 537.51.1). Despite turning off private browsing and trying ...

javascriptioshtmlipadios7

Connections between the Layout section and the ContentCss directory are established within the main directory of the ASP NET MVC application

Greetings to all, I am seeking suggestions on how to handle Areas in ASP.NET MVC. My application consists of multiple areas, each with its own _Layout. How can I create links within these layouts to the Css subfolder (as well as Scripts) located in the Co ...

cssasp.net-mvcrazor

scrolling through horizontal bootstrap thumbnails

Hey there, I'm currently working on making the bootstrap thumbnails fit into a Div that has a horizontal scroll. However, I've run into an issue where they are collapsing beneath it instead of being offset properly as shown in the image. Does any ...

htmlcsstwitter-bootstrap

At 400 pixels screen size, the buttons in the appBar component are spilling out

In my appBar component, I have three buttons that appear fine on large screens. However, when the screen size reaches 400px, they start stretching out of the appBar. Here is how they look on large screens: https://i.sstatic.net/l3nJM.png And this is how ...

cssreactjsdebuggingmaterial-ui

What are the steps to create a responsive form using CSS?

I have a screenshot below that needs to be recreated using HTML/CSS. This design should be consistent in both desktop and mobile views. https://i.stack.imgur.com/cnfHt.png Currently, I have managed to replicate this in a JSFiddle which looks good on desk ...

htmlcssformsresponsive-design

Using Bootstrap SCSS in ReactJS without applying Bootstrap CSS classes

After successfully installing bootstrap using the following command: npm install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9bbb6b6adaaadabb8a999edf7e9f7e9f4b8b5a9b1b8f7ef">[email protected]</a> --save my d ...

csstwitter-bootstrapreactjssassbootstrap-sass

Crafting artistic shapes using the Canny Edge Detection technique on Canvas

Can someone provide some guidance on using Canny Edge Detection to generate shapes in Canvas? ...

javascripthtmlimage-processingcanvascanny-operator