Why does bootstrap formatting not work in my typoscript?

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.

Solution

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.