Loading

Using Bootstrap with Angular

To create a responsive web application using Bootstrap is a popular choice,

Step 1: First Create an Angular Project

  • Open the terminal or command prompt.
  • Now using angular CLI and giving the following command create a new app.
ng new myFirstWebApp

Step 2: Now Install the Bootstrap

  • Within the same terminal, navigate to your project folder.
cd myFirstWebApp
  • Now install the Bootstrap by running the following command.
npm install bootstrap

Step 3: After the successful installation of Bootstrap we have to add Bootstrap styles to our project

  • Open the src/styles.css file in your project.
  • At the top of the file, add the following line to import Bootstrap's styles.
@import '~bootstrap/dist/css/bootstrap.css';

Step 4: After adding Bootstrap to your project you can test your application by running the following command.

ng serve

Now open your web app in any browser at http://localhost:4200.

Hence you successfully added Bootstrap to your project and you can use its features accordingly.