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" /> Bootstrap </a></nav>
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.
