0

I am using bootstrap 4.3.x. I want to include CSS using localpath but the CSS is not getting applied if I do so. below is the localpath.

I have tried placing the following source URL to include bootstrap.min.css which does not work

link href="css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"

Where as when I use the below CDN path, it works.

link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"

including localpath should show proper elements in index.file. as of now, it shows scattered elements. I checked the browser console, and I am getting the below errors

  1. Access to CSS stylesheet at 'file:///C:/xampp/htdocs/resumo/css/bootstrap.min.css' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

2 . Failed to load resource: net::ERR_FAILED

Improve this question
5
  • Check your browser console for errors and paste them in your question. Commented Apr 3, 2019 at 5:58
  • hey @nick, i have just added browser console errors to my question. Commented Apr 3, 2019 at 10:51
  • 1
    Ah, I think you are trying to access html file incorrectly. You need to try accessing your html file using something like this : http://localhost:<port if provided any>/<folder under xampp>/<filename>.html Commented Apr 3, 2019 at 12:22
  • Thanks @Nik, you are correct. its working when i turn the xamp on and access it using localhost. Commented Apr 3, 2019 at 15:31
  • Glad that helped. :) Commented Apr 4, 2019 at 18:58

2 Answers 2

Reset to default
3

simply delete all these lines from your href code

integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"

and keep only this line

link rel="stylesheet" href="css/bootstrap.min.css"

or you can just copy this line and replace yours with it. just make sure your files are in the same folder as your index.html

link rel="stylesheet" href="css/bootstrap.min.css"
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

I was trying to directly open the file in browser which caused issue for css loading. Actually, I need to turn on the web server (apache on xampp in my case) and access the file using http protocol with url http://localhost/project/filename.

Thanks to Nik who find the answer for me

Improve this answer

3 Comments

Accept your own answer so that it will help others.
i am new to stackoverflow, and don't know how to accept answers. is accepting means giving upvote to my answer?
stackoverflow.blog/2009/01/06/accept-your-own-answers have a look at this.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.