Integrate Bootstrap with Angular 4
In this lesson, I am going to talk about how to Integrate bootstrap with Angular 4. Furthermore, we will take a look, How to install bootstrap for your Angular project.
There are different ways to add Bootstrap to Angular project. Here we will look to install Bootstrap to Angular project through NPM. Let’s take a look, how to install Bootstrap via NPM.
Adding Bootstrap through NPM
With this method you can easily install Bootstrap to Angular project. First of all open your terminal and type the following command.
npm install –save bootstrap
This command will install Bootstrap into the node_modules folder within the directory where your project is located. After Bootstrap package has been installed successfully to your project, the bootstrap files can be found at:
To add Bootstrap file in Angular project, you just need to go to .angular-cli.json file and add the following line against the styles and scripts like:
"styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.css" ], "scripts": [ "../node_modules/bootstrap/dist/js/bootstrap.js" ],
That’s all, Now you need to call the booststrap class in your angular project. I am going to call it in header.component.html file like:
<h2> Header </h2> <p> Header works! </p> <hr /> <h3 class=”jumbotron”> Nested content </h3>
Advantages of Installing Bootstrap
Bootstrap is one of the modern designing framework, which can be used for responsive, and mobile first application. On the other hand, Angular is also for single page reactive applications. The combination of this two framework will ultimately produce a high quality and beautiful website applications, which will, in turn, become a success factor for a website.
Another advantage of Bootstrap is, that a developer will no need of designing a CSS file for a new Angular project. Just install Bootstrap, and then drag the classes of Bootstrap. It will ultimately enhance the productivity and will save most of the time. The project will be delivered on time and will consume less budget.
In this lesson, we learn how to integrate and install bootstrap for the Angular project. Bootstrap is a designing framework, designed for responsive, and mobile first application. However, you can also use it with an Angular project. To learn more about Bootstrap, we have a course on it for beginner. You can join it absolutely free.
In this gentle and comprehensive book, we’ll teach you everything that you need to know to start building websites with Bootstrap 4 in a practical way. You’ll learn about build tools such as Node, Grunt, and many others.