Integrating Bootstrap 4 in Angular-CLI [Angular Tutorial]

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

bootstrap 4

  • 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

bootstrap 4

While it’s installing, go to https://github.com/angular/angular-cli and scroll down to the Global Library Installation.

bootstrap 4

  • 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.

bootstrap 4

bootstrap4

Now you have to add the Bootstrap 4 files to your app. It should then look like this. 

6

The last step before we can fully use Bootstrap 4 is to go to https://ng-bootstrap.github.io/#/getting-started.

bootstrap 4

  • 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.

bootstrap 4

bootstrap 4

Once it’s installed, go back to your browser and copy the import code for Bootstrap 4.

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.

bootstrap 4

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.

bootstrap 4

For our example, let’s use the component Alert.

bootstrap 4

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.

bootstrap 4

Save your work then run the app. Check your browser on localhost:4200 and the alert should look like this.

bootstrap 4

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. 

Subscribe Now and Get our React Native Course for FREE!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get FREE access to our React Native course, coming soon on Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.