Problem
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Content-Security-Policy" content="default-src 'self';" />
    <title>Bootstrap Example</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
  </head>
  <body>
    <h1>Hello, World!</h1>
    <button class="btn btn-primary">Click Me</button>
  </body>
</html>
Solution

The content security policy is set to only allow resources from the same origin as the page itself. This means that the bootstrap CSS file will not be loaded. To fix this, we need to add the bootstrap CDN to the CSP:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; style-src https://stackpath.bootstrapcdn.com;"
    />
    <title>Bootstrap Example</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
  </head>
  <body>
    <h1>Hello, World!</h1>
    <button class="btn btn-primary">Click Me</button>
  </body>
</html>

Note: Content Security Policies are usually set in the HTTP response headers rather than in the HTML itself, but there are some cases (like page specific policies) where it could be useful to set them in the HTML.