In this article we will learn how to add Bootstrap in Angular 6 projects. We will learn from the beginning how we add Bootstrap and use it in our application. Bootstrap is used to create responsive web applications.

Prerequisites

First of all, let's check Node and npm version in our system.To check versions open command prompt, and type -

  • node -v
  • npm -v
Adding Bootstrap In Angular 6 Project

Node latest version is installed

Now create a Project using cmd,

ng new BootstarpWithAngular
Adding Bootstrap In Angular 6 Project

After creating the project open the project in Visual Studio code

Now, open the integrated terminal by pressing Ctrl + and ~,and add the following command to add Bootstarp in this project,

npm install bootstrap --save
Adding Bootstrap In Angular 6 Project

Now open node_modules folder and check that the Bootstrap folder is created,

Adding Bootstrap In Angular 6 Project

Open this folder and check if Bootstrap file is added,

Adding Bootstrap In Angular 6 Project

Now open styles.css file and add Bootstrap file reference. We can also add Bootstrap file reference into angular.json file.

To add reference in styles.css file add this line,

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

Open app.component.html and add a button and add bootstrap class to this button,

<button class="btn btn-success">Bootstrap Ddemo</button>
Run the project using ng serve -o and check the result,
Adding Bootstrap In Angular 6 Project

Bootstrap reference is added in our project. Let's create a form using Bootstrap classes. Add these lines in app.component.html of html and bootstrap to design form.

  1. <div class="container">
  2. <form>
  3. <div class="form-group">
  4. <label for="Username">Username:</label>
  5. <input type="text" class="form-control" id="txtuname" placeholder="Username">
  6. </div>
  7. <div class="form-group">
  8. <label for="Password">Password:</label>
  9. <input type="password" class="form-control" id="txtPassword" placeholder="Password">
  10. </div>
  11. <div class="form-group">
  12. <label for="City">City:</label>
  13. <input type="text" class="form-control" id="txtcity" placeholder="City">
  14. </div>
  15. <div class="form-group">
  16. <label for="Country">Country:</label>
  17. <input type="text" class="form-control" id="txtCountry" placeholder="Country">
  18. </div>
  19. <div class="text-center">
  20. <button type="submit" class="btn btn-primary">Save</button>
  21. </div>
  22. </form>
  23. </div>
  24. <router-outlet></router-outlet>
Run the project and check the result,
Adding Bootstrap In Angular 6 Project

Bootstrap classes is added successfully in our project.

Summary

In this article we learned how we can add Bootstrap with Angular.