Bootstrap With Angular 6

I’ve used Bootstrap for some time in different web applications. Its a great framework that enables you to have cross platform support for you UI components. The grid system that bootstrap provides makes it easy to create professional pages and components that follow a uniform pattern. Here is the main site for bootstrap https://getbootstrap.com/

I wanted to share a cool way to install bootstrap with an Angular app. When I mention Angular here I am talking about anything beyond Angular 2. Prior to Angular 2 (and even AngularJS for that matter) you’d have to include the libraries that make up boostrap manually in your project. With Angular 6 you can pretty much automate this process by using NPM to install the library and adding the correction annotations to your styles file in the root directory of your project.

To install bootstrap with Angular 6 do the following:

Go back to the root directory of your project and run

npm install bootstrap --save

Go to the styles.css file in your Angular project and add the following annotation

@import "~bootstrap/dist/css/bootstrap.css";

A stackoverflow article that I found very helpful was here
https://stackoverflow.com/questions/44991218/ng-bootstrap-not-working-in-angular-4.

Hope this helped you with bootstrap and you get to use this framework in your Angular Apps.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s