Tutorial How To Integrate Angular 4 + Bootstrap 3 For Beginners

Tutorial combines Angular 4 with bootstrap v.3.3.7. Bootstrap is an essential role in creating mobile applications. In addition to being easy to use, Bootstrap is also compatible with a variety of frameworks including the javascript framework. In Angular 4, how to integrate Bootstrap into the Angular project is slightly different. Follow the following tutorial.

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 Integrated Angular 4 And Bootstrap 3 Tutorial Min

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

2. Install Bootstrap v.3.3.7 and Jquery using npm

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

Tutorial Angular 4 Bootstrap And Jquery

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

Then change the html code in app.component.html and copy the following code

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

Angular 4 Bootstrap Integration Tutorial

Read: Tutorial Create Angular 4 Currency Format Directive For Textbox

So my short tutorial on How To Integrate Angular 4 + Bootstrap 3 For Beginners

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

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