How to Add Bootstrap 4 to Angular
Tags: javascript, codenewbie, angular, 100daysofcode
Published: 2020-05-22 20:09:32

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](https://angular.io/).**

## Getting Started

 - Install Bootstrap from npm using the `npm install` command
```bash
$ npm install --save bootstrap
```
The `--save` helps you save bootstrap as a dependency

 - You will also need to install jQuery using the following command
```bash
$ 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 the  `styles`  array,
-   `node_modules/bootstrap/dist/js/bootstrap.js`  in the  `scripts`  array,
-   `node_modules/bootstrap/dist/js/bootstrap.js`  in the  `scripts`  array.

**Example:**
```json
{
  "$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:
```css
@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
```html
<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](https://twitter.com/olawanle_joel).

## Useful resources
- [3+ Ways to add Bootstrap 4 to Angular 9/8 With Example & Tutorial](https://www.techiediaries.com/angular-bootstrap/)
- [Using Bootstrap with angular](https://medium.com/codingthesmartway-com-blog/using-bootstrap-with-angular-c83c3cee3f4a)