Bootstrap not working with my Angular project

Question

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

Created angular project with cli
npm install bootstrap@3 jquery --save
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

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> — NovemberMan
– NovemberMan, Commented Jun 20, 2018 at 8:00
Hmmm you should edit your question with this code. Which version of Angular are you using? — Zooly
– Zooly, Commented Jun 20, 2018 at 8:11
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 — user6437920
– user6437920, Commented Jun 21, 2018 at 12:44

Ronak Khangaonkar · Accepted Answer · 2019-06-15 08:59:43Z

6

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

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

answered Jun 15, 2019 at 8:59

Ronak Khangaonkar

3462 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nephiw · Accepted Answer · 2019-03-23 17:41:22Z

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.

Collectives™ on Stack Overflow

Bootstrap not working with my Angular project

Package Version

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Package Version

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related