Read another article: Simple Login Form Angular 4 Tutorial For Beginner
I am sure you have understood what is angular 4 and what is the bootstrap framework. Without further explanation, I will immediately create a simple project to combine the two frameworks.
How to integrate angular 4 project with Bootstrap framework
1. Create a new Angular project using angular-cli.
Angular-CLI is a generator for Angular 2 and 4 projects (and above). By using this Angular-CLI help, we no longer need to setup many basic needs such as folder composition, how to run, how to build and others
Make sure you have installed angular-cli (read: how to install angular-cli) and run the following code
ng new angularbootstrap
2. Install Bootstrap v.3.3.7 and Jquery using npm
npm install bootstrap@3 jquery --save
3. Integrate Bootstrap and Jquery into the Angular project.
Open the .angular-cli.json file and add the following code in the styles and scripts section
and add the following code in the scripts section
So it will look like the following picture
Up to this point, the Bootstrap and Jquery installations into the Angular 4 project have been completed. Here I will try to add a starter template to test whether the Bootstrap framework above has been running correctly.
Edit index.html in the src folder and add the following script above the element
<nav class="navbar navbar-inverse navbar-fixed-top">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<a class="navbar-brand" href="#">Project name</a>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
Then change the html code in app.component.html and copy the following code
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div><!-- /.container -->
Please test your Angular project if Bootstrap is running well with the command ng serve to run the angular server.
Please check the result via browser
If successful then the result will be like the following gif
So my short tutorial on How To Integrate Angular 4 + Bootstrap 3 For Beginners
Latest posts by Sigit Prasetya Nugroho (see all)
- How To Resolve No ‘Access-Control-Allow-Origin’ Header In Lumen - February 7, 2018
- How To Create Custom Class In Laravel 5.5 For Beginners - February 3, 2018
- Restful API Tutorial With Lumen Laravel 5.5 For Beginners - February 2, 2018