> > > Steps to install bootstrap 4 using npm in an angular 4 project | Angular 4

Steps to install bootstrap 4 using npm in an angular 4 project | Angular 4

Bootstrap 4 is beta now. According to the official announcement, there isn’t any major changes left. Only bugs fixes are there in the queue. So in this article we will see, how we can include bootstrap 4.0 from NPM in an angular 4 project. Lets start by creating an angular 4 project. We will be using angular-cli for creating the project structure. So lets start by installing angular-cli.

Install angular-cli

install angular-cli using the following command:

npm install -g '@angular/cli'

Then create an angular 4 project by running the command:

ng new my-app

This will create an angular 4 application that already works. By running the command “ng serve“,  your application will open in the default browser.
The template data given in src/app/app.component.html will be the displayed content. You can refer the angular-cli site (angular-cli) for more cli commands and detailed information. Now lets see, how we can add more styling to the component by adding bootstrap 4.0 to the project.

Install Bootstrap 4.0

Next we will install bootstrap 4.0 to the project.

npm install bootstrap@4.0.0-beta --save

This will install the node module for bootstrap and will save the same to package.json. Lets add some dummy bootstrap component to the app.component.html.
We will add a dummy nav bar.

<nav class="navbar navbar-light bg-light"><a class="navbar-brand" href="#">
<img class="d-inline-block align-top" src="/assets/brand/bootstrap-solid.svg" alt="" width="30" height="30" />

Now if we run the code, we can see that the style isn’t reflected. This is because, we haven’t yet included the bootstrap.css file. So now lets include the bootstrap.min.css to our styles.css, which is available under the src/ directory.

Lets add the following import statement on top of the styles.css

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

Now if we run the application, we will have our first boostrap 4.0 component ready. Now you can use other bootstrap components to style your application.

The following two tabs change content below.

Aravind Radhakrishnan

A smart working techie who is currently working as HTML 5 & Java developer, having sound knowledge in Adobe Flex and Flash. Born and brought up in Kerala. Currently working in Chennai

Leave a Reply

Your email address will not be published. Required fields are marked *


This site uses Akismet to reduce spam. Learn how your comment data is processed.