Bootstrap 4 is a UI framework made by the angular-ui team. To know more about its uses, just go to www.ng-bootstrap.github.io
- This is the preferred Angular 2 UI framework because it is written and maintained by the same angular team.
To use Bootstrap 4 in your angular-cli, you need to install it first in your npm. To do that, open your integrated terminal and type npm install bootstrap@next
While it’s installing, go to https://github.com/angular/angular-cli and scroll down to the Global Library Installation.
- Take note of the highlighted code. You’ll need it in the future steps.
Now, go to your angular-cli.json file. Click the file and look for the styles and scripts section.
Now you have to add the Bootstrap 4 files to your app. It should then look like this.
The last step before we can fully use Bootstrap 4 is to go to https://ng-bootstrap.github.io/#/getting-started.
- Note that in order for this to work, you need to have Angular 2 and Bootstrap 4 installed in you computer.
Just copy the installation command to the integrated terminal of your IDE.
Once it’s installed, go back to your browser and copy the import code for Bootstrap 4.
Open your app.module.ts in your IDE and paste this into the initial imports. Don’t forget to add NgbModule to the list of imports.
That’s it. Bootstrap 4 is now fully integrated in our Angular 2. Now, you can freely add Bootstrap 4 components in your application.
Let’s go back to our browser and go to the components page of the Bootstrap 4 site. You can find the different components that are available on the right.
For our example, let’s use the component Alert.
We are going to make a very basic NgbAlert message. In you IDE, go to app.component.html. A sample alert message would look like this.
Save your work then run the app. Check your browser on localhost:4200 and the alert should look like this.
Congratulations! This shows that you’ve successfully added Bootstrap 4 in your Angular 2 application. Now we can try to add more components in our app.