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 check angular docuemtation.
Getting Started
- Install Bootstrap from npm using the
npm install
command
$ npm install --save bootstrap
The --save
helps you save bootstrap as a dependency
- You will also need to install jQuery using the following command
$ npm install --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 the angular.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 to src/styles.css
of your Angular project and import the bootstrap.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 your index.html
file
<link rel="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 on Twitter.
Top comments (0)