Why do Bootstrap 5 examples look broken compared to the versions on getbootstrap.com ?

[leta91]

Hi,

I am interested in using this Bootstrap 5 example https://getbootstrap.com/docs/5.3/examples/product/ on one of my web projects

When I copy its source code and paste it into VS Code:

• I add the code for product.css and give it the right path
• I do the same process for <link href="css/bootstrap.min.css>
• same for <script src="js/bootstrap.bundle.min.js">

The output is that the example looks broken, when copied in my VS Code, compared to its original version on getbootstrap.com

How do I replicate this Bootstrap example 100% ?

[julien-deramond]

If I comment the loading of bootstrap.min.css in https://getbootstrap.com/docs/5.3/examples/product/, I observe the exact same rendering:

So I suppose your local version of bootstrap.min.css is not loaded correctly. Either the path is incorrect, or you maybe forgot to add rel="stylesheet" to the <link>.

[leta91]

@julien-deramond thanks for your answer
I did everything but my HTML file does not load bootstrap.min.css
How do I fix it?

[julien-deramond]

Please try to create a reproducible example of your code with CodePen or Stackblitz, otherwise it'ill be difficult to help without any code.

[leta91]

@julien-deramond I don't have CodePen or Stackblitz
within chrome dev tools > console this is the error messages I get:

"Access to (bootstrap.bundle.min.js, bootstrap.min.css, manifest.json) from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted."

My steps so far:

1. I copied the source code of this Bootstrap 5.3 example https://getbootstrap.com/docs/5.3/examples/product/
2. then copied and pasted locally: product.css , bootstrap.min.css, bootstrap.bundle.min.js
3. Then I updated these 3 file paths (The remaining file paths were left untouched)

How these files are on my index.html:

• <link href="css/product.css" rel="stylesheet">

• <link href="css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">

• <script src="js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>

I did a small test
I implented on another HTML file the accordion component only (with CSS and JS file) and the output is working perfectly like here
https://getbootstrap.com/docs/5.3/components/accordion/

What does that error message mean?

[patkon]

The attributes 'integrity' and 'crossorigin' are not required if you have the files locally (at least I think so).