skip to Main Content

Doing this in angular. This happens every time. I checked the network in firefox, inspect element, in the console, it shows bootstrap Error 404

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MeanApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-    alpha.5/css/bootstrap.css">

</head>   
<body>
  <div style="text-align:center">
  <app-root></app-root>
  </div>
</body>
</html>

How my site looks like

How it is supposed to look like

2

Answers


  1. You have a broken URL in your code, remove the whitespace in the middle:

      <link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.css">
    
    Login or Signup to reply.
  2. Using Angular 2+ you can include bootstrap using cli

    1. Install bootstrap: npm install --save [email protected]
    2. Add dependency jquery, install it with the command: npm install --save jquery 1.9.1
    3. Add @import ../node_modules/bootstrap/dist/css/bootstrap.min.css”; to your main style.scss file.
    4. Fix vulnerability : npm audit fix

    or as told by Aragorn you can directly use CDN

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search