james james - 1 month ago 4
CSS Question

External CSS file not working alongside bootstrap

I am trying to add custom styling to my web app. Here is the link to my code:



I have the following:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">

Which should be loading my

I have an ID of test:

<img class="img-responsive center-block" style="margin-top: 40px" id="test"src="http://i.imgur.com/hSuFTzO.png">

and in
I am calling that ID:

#test {
margin-top: 50px;

But for some reason it doesn't apply my custom styling, although bootstrap (which is being linked in
and is adding styling to the
files throughout the project) is working.

I've tried looking through similar questions on stack overflow without success, also tried google for how to add custom styling to a bootstrap project - everything I'm doing seems to be correct.

Any advice is greatly appreciated. Thanks!

EDIT: So i checked the console and found this:

Status Code: 404 Not Found
Request URL: http://localhost:4567/css/custom.css

So I guess I'm not linking it right.


In Sinatra any static files (such as CSS files) should be in the folder pointed to by the public_folder setting. Usually this is named public. In your server.rb you set it to be public but relative to the projects root.

You need to create a public folder at the top level of your project (next to app, view etc.), move your css directory to it and then change the setting in server.rb so that :public_folder points to it, similar to what you have done with the :views setting:

set :public_folder, proc { File.join(root, "..", "public") }