Bootstrap not working with my Angular project

2
votes

I have included bootstrap to my Angular project using the following steps

  1. Created angular project with cli
  2. npm install bootstrap@3 jquery --save
  3. Then added script and style paths to my index file as we usually do

The style is not applied to my page. Is there anything else that I have to do. I am adding my HTML code snippet from the index page

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Project</title>
  <script  src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap-theme.min.css">
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <h1>ewreeew</h1>
    <button class="btn btn-primary">Test Button</button>
  <app-root></app-root>
</body>
</html>
The version details are: Angular CLI: 6.0.8

Node: 8.11.2

OS: win32 x64

Angular: 6.0.5

... animations, common, compiler, compiler-cli, core, forms

... http, language-service, platform-browser

... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.6.8

@angular-devkit/build-angular 0.6.8

@angular-devkit/build-optimizer 0.6.8

@angular-devkit/core 0.6.8

@angular-devkit/schematics 0.6.8

@angular/cli 6.0.8

@ngtools/webpack 6.0.8

@schematics/angular 0.6.8

@schematics/update 0.6.8

rxjs 6.2.1

typescript 2.7.2

webpack 4.8.3

Thank you

2
angularangular-cliangular-ui-bootstrapangular6angular-cli-v6
Can you show how you add script/style in your index? – Zooly
Here is the html code <head> <meta charset="utf-8"> <title>Project</title> <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script> <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap-theme.min.css"> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> – maximus1988
Hmmm you should edit your question with this code. Which version of Angular are you using? – Zooly
I had similar problems but what server(backend) you are using ? if it is node(express) you are using, try to include the public folder (app.use) inside your application – Joel Wembo

2 Answers

4
votes

Add your bootstrap file into global styles.css file like this:-

@import "~bootstrap/dist/css/bootstrap.css";
0
votes

I suspect that problem is the path to the files. The best way to include dependencies is to add to the styles and scripts array in the build target of the "angular.json" file. You can use absolute paths instead of relative paths, so instead of "../node_modules/" you'd want to use "node_modules/".

Here is an example of what the build target may look like:

 "build": {
   "builder": "@angular-devkit/build-angular:browser",
   "options": {
     "styles": [                  
       "src/styles.css",
       "node_modules/bootstrap/dist/css/bootstrap.min.css"
       "node_modules/bootstrap/dist/css/bootstrap-theme.min.css"   
     ],
     "scripts": [
       "node_modules/jquery/dist/jquery.min.js",
       "node_modules/bootstrap/dist/js/bootstrap.min.js"
     ]
  }

You may already be including jQuery, but I didn't see it in your example. I added it here just in case.