Bootstrap / CSS not working on Github Pages

Question

I'm trying to put my code on Github Pages. It shows and works, but the styling is off, I'm attaching pictures of what it looks like when I test index.html locally vs when I open up my github.io page. How do I get it to look like when I'm testing it locally?

     <head>
     <script src="jquery-3.1.1.min.js"></script>
     <link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
     <script src="bootstrap.min.js"></script>
     <link rel="shortcut icon" type="image/x-icon" href="favicon.png" />
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta charset="utf-8">
     <script src="examples.js" defer></script>
     <!-- stylesheet -->
     <link rel="stylesheet" type="text/css" href="main.scss">
     </head>

My main.scss:

#utable {

background-color: #e6e6e6;
width: 75%;
margin-left: 40px;
}


input {
text-align: right;
display: block !important; 
padding: 0 !important; 
margin: 0 !important; 
border: 0 !important; 
width: 98% !important; 
border-radius: 0 !important; 
line-height: 1 !important;

}
td {
margin: 0 !important; 
padding: 0 !important;
border: 0;
}
tr {
margin: 0 !important; 
padding: 0 !important;
border: 0;
}

.box {
background-color: #e6e6e6;
width: 75%;
margin-left: 40px;

padding: 3px;
}

hr { 
background-color: #1F5D15 !important;
color: #1F5D15 !important;
border: solid 2px #1F5D15 !important;
heigth: 1px !important;
width: 100% !important;   
}

.form-control {margin:0;
display: inline-block;
}

body {
width: 95%;
margin:0;
padding-top:50px;
}

.tab {
margin-left: 40px; 
}

tr.spacer {
border-bottom: 15px solid #e6e6e6;
}



#masthead {
min-height:270px;
background-color:#1F5D15;
color:#aaaacc;
}

#masthead h1 {
font-size: 55px;
line-height: 1;
}

#masthead .well {
margin-top:13%;
background-color:#FFFFFF;
border-color:#1F5D15;
}

.icon-bar {
background-color:#fff;
}

@media screen and (min-width: 768px) {
#masthead h1 {
    font-size: 100px;
}
}

.navbar-bright {
background-color:#111155;
color:#fff;
}

.navbar-bright a, #masthead a, #masthead .lead {
color:#aaaacc;
}

.navbar-bright li > a:hover {
background-color:#000033;
}

.affix-top,.affix{
position: static;
}

@media (min-width: 979px) {
#sidebar.affix-top {
position: static;
margin-top:30px;
width:228px;
}

#sidebar.affix-bottom {
position: relative;
}

#sidebar.affix {
position: fixed;
top:70px;
width:228px;
  }
}

#sidebar li.active {
border:0 #eee solid;
border-right-width:4px;
}

#sidebar li li.active {
border:0 #ccc solid;
border-right-width:3px;
}

#mainCol h2 {
padding-top: 55px;
margin-top: -55px;
}

You need to compile your SCSS file to CSS. – Kaung Myat Lwin Jul 20 '17 at 04:44 — Kaung Myat Lwin, Jul 20 '17 at 04:44

score 2 · Accepted Answer · answered Jul 20 '17 at 04:46

2

The problem is your file location is wrong

<link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="bootstrap.min.js"></script>

You must check your location of css, js file. When you upload into server, you must correct this. It's like

 <link href="https://myreponame.github.io/bootstrap.min.css" rel="stylesheet" type="text/css" />
 <script src="https://myreponame.github.io/bootstrap.min.js"></script>

or you can use an CDN

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

answered Jul 20 '17 at 04:46

Nguyen Hoang

540
5
25

What about ? Like do I need to do something similar for jquery or the functions won't work? – OTPYG Jul 21 '17 at 02:05
1

You need to know where is exactly jquery link on your server. It's like bootstrap file. You can replace your . It's will work. – Nguyen Hoang Jul 21 '17 at 03:27

score 0 · Answer 2 · edited Oct 27 '20 at 11:54

I also encountered the same problem . I tried different methods but still the CSS was not working on GitHub Pages.

Solution: first make your complete project locally on your PC and after finishing it, create a repository and click on the option "uploading an existing file":

(preview)

and then just drag and drop your whole project.

If you want to edit something on your website, then directly edit the code from GitHub dashboard. Don’t use command line for GitHub pages.

Bootstrap / CSS not working on Github Pages

2 Answers2

Linked