Menu
I have included bootstrap to my Angular project using the following steps
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>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
@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
318
asked Mar 11 '26 23:03
Add your bootstrap file into global styles.css file like this:-
@import "~bootstrap/dist/css/bootstrap.css";
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.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
