In this article, I will be explaining just one method because it worked for me, there are so many other methods out there but I will only talk about what worked for me.
I will add some useful resources below this post in case you don't like
this approach or you need other methods.
I believe before you can think of making use of Bootstrap on Angular you must have installed Angular on your computer and created a new project.
If you don't know how to install angular or set up a new project, you can checkangular docuemtation.
Getting Started
- Install Bootstrap from npm using the
npm install
command
$npminstall--save bootstrap
The--save
helps you save bootstrap as a dependency
- You will also need to install jQuery using the following command
$npminstall--save jquery
with that if you navigate to your node_modules folder, scroll down you will find bootstrap there.
Finally, we have to add bootstrap to **angular.json* file*
Open theangular.json
file of your project and include:
node_modules/bootstrap/dist/css/bootstrap.css
in thestyles
array,node_modules/bootstrap/dist/js/bootstrap.js
in thescripts
array,node_modules/bootstrap/dist/js/bootstrap.js
in thescripts
array.
Example:
{"$schema":"./node_modules/@angular/cli/lib/config/schema.json","version":1,"newProjectRoot":"projects","projects":{"angular-bootstrap-examples":{"projectType":"application","schematics":{},"root":"","sourceRoot":"src","prefix":"app","architect":{"build":{"builder":"@angular-devkit/build-angular:browser","options":{"outputPath":"dist/angular-bootstrap-examples","index":"src/index.html","main":"src/main.ts","polyfills":"src/polyfills.ts","tsConfig":"tsconfig.app.json","aot":true,"assets":["src/favicon.ico","src/assets"],"styles":["./node_modules/bootstrap/dist/css/bootstrap.css","src/styles.css"],"scripts":["./node_modules/jquery/dist/jquery.js","./node_modules/bootstrap/dist/js/bootstrap.js"]},
Once that is done go tosrc/styles.css
of your Angular project and import thebootstrap.css
file as follows:
@import"~bootstrap/dist/css/bootstrap.css";
Like I said earlier this was what worked for me, normally you could call something like this in yourindex.html
file
<linkrel="stylesheet"href="../node_modules/bootstrap/dist/css/bootstrap.css">
But when I did it I got an error.
Thanks for reading. Let's get to know ourselves better, connect with me onTwitter.
Useful resources
Top comments(0)
For further actions, you may consider blocking this person and/orreporting abuse