CODEWITHSUNDEEP
javascriptjquerycssangularfrontend
Ayan Das
Ayan Das

Reputation: 23

Adding Bootstrap to Angular 8

I am trying to add Bootstrap to my Angular app. I am new to this and although following the required steps I am having problems getting the bootstrap installed.

  1. I did all the necessary steps from installing Angular cli, ng new first-app and ng serve.

  2. I opened the vs code terminal and tried installing bootstrap using

    npm install bootstrap --save

  3. Then adding this in the style.css

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

But still when I click on the link hovering over the above piece of code it says unable to locate file and prompts for creating a file with this path.

Upvotes: 2

Views: 3981

Answers (5)

Mazba Uddin
Mazba Uddin

Reputation: 191

If you want to add [email protected] || Here is the procedure.

Step 1. Install bootstrap. Run this command in your terminal.

npm install [email protected]

Step 2. Install Jquery. Run this command

npm install jquery

Step 3. Then, go to the angular.json file

...
        "styles": [
          "src/styles.css",
          "./node_modules/bootstrap/dist/css/bootstrap.min.css"
        ],
        "scripts": [
          "./node_modules/jquery/dist/jquery.min.js",
          "./node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]
...

Step 4. Don't forget to restart your app.

Upvotes: 0

Keshav Pradeep Ramanath
Keshav Pradeep Ramanath

Reputation: 1687

Add the below line in the style.css file which is present under the src folder inside the project.

@import '~bootstrap/dist/css/bootstrap.min.css';

Upvotes: 2

Learner
Learner

Reputation: 15

An easy method to add bootstrap is by using Angular CLI(npm install).

From the command line interface install bootstrap and references it in angular.json

npm install bootstrap --save

Upvotes: 0

joerideg
joerideg

Reputation: 1918

If you just want to add the styles from bootstrap there is a property in the angular.json file that allows you to include it in the build.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "projects": {
    "yourproject": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ]
          },
        ...

See: https://angular.io/guide/workspace-config#styles-and-scripts-configuration

Upvotes: 3

Nick Hodges
Nick Hodges

Reputation: 17118

Welcome to StackOverflow!

Bootstrap isn't TypeScript code, so you don't import it as such. Instead, it is CSS code, and thus you want to import it in your index.html file as a `

Here's how I import boostrap in my apps -- the below goes into the <head> tag of index.html

<link
  rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
  crossorigin="anonymous"
/>

Doing this then allows me to use Bootstrap within any of my code templates.

BTW, that code will link to the 4.3.1 version -- if you want to link to a different version, you can go to https://getbootstrap.com/ and get a "fresh" link -- the site is very helpful in getting you going with the CDN links.

But I see that you want to import it into your styles.css file, so you'll likely have to use a relative path, probably something like:

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

Upvotes: 0

Related Questions