Why does bootstrap formatting not work in my typoscript? - typo3

Question

I am using a Typo3(11.5.12) server, set up locally with xampp.
I am trying to understand how bootstrap works in typoscript, so I followed this tutorial.
The content on the site does not get formatted, even though I copied every line of typoscript.
I ensured that the 4 needed files are included in the user_upload folder and I checked that the respective paths are set correctly.
I also made sure that the fluid content elements are included.
This is the typoscript code that I copied:
# Default PAGE object:
page = PAGE
page {
meta {
author = testauthor
viewport = width=device-width, initial-scale=1.0
}
includeCSS {
10 = fileadmin/user_upload/tutorial/bootstrap/bootstrap.min.css
}
includeJS {
10 = fileadmin/user_upload/tutorial/bootstrap/bootstrap.bundle.min.js
}
100 = HMENU
100{
wrap = <nav class="navbar navbar-expand-lg navbar-light bg-light"><div class="container-fluid"><a class="navbar-brand" href="#">Navbar</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>|</div></nav>
1 = TMENU
1.wrap = <ul> | </ul>
1.NO.wrapItemAndSub = <li> | </li>
1.expAll = 1
2 < .1
3 < .2
}
200 < styles.content.get
200.wrap = <div class="container mt-5">|</div>
}
This is what it is supposed to look like: https://gyazo.com/3753c5661c84372df78c9d2683b1feeb
This is what it looks like for me: https://gyazo.com/c55e9c61500c7e0eff62b79cf77071e2
Here are the 4 required files located: https://gyazo.com/21b2902e06b2e17f5bcfcb28b93a4d50
The fluid content elements are included: https://gyazo.com/f87294000fa116ffecb7329fe87b0c65
I suppose there is a problem with typoscript understanding the bootstrap code, but I have no clue why that could be. Does someone have a clue?
Disclaimer: I apologize for the images not being formatted, I don´t have 10 reputation yet.

Answer 1

In newer TYPO3 versions .js and .css sources cannot be in ./fileadmin. This is enforced by the Content-Security-Policy (CSP) headers which are set in the default ./public/fileadmin/.htaccess (it is generated during install from this template).
Your browser should normally show CSP blocked assets in its Devtools -> Console and/or in the network tab.
You could change/remove the CSP in that file (not really recommended but it will keep you going for that tutorial) or you could refactor all assets into a site package (recommended). It is described in this tutorial.