Add Bootstrap to Angular 2 cli

Posted on Updated on

Bootstrap is widely used UI framework, In this article, we will setup angular cli project with Bootstrap 3 or Bootstrap 4. Also we will let you know how to use ng2-bootstrap/ngx-bootstrap to use different components like accordion, alert, datepicker and so on.

Step 1: Create Angular cli project

You can refer our blog Angular 2 Hello world example to create Angular cli project.

Step 2: Install Bootstrap using npm

For Bootstrap 3:

For Bootstrap 4:

Step 3: Import Bootstrap CSS file

Open angular-cli.json file and add bootstrap css file.

In case you don’t want to use Bootstrap components, you are all set to use bootstrap classes in your angular project. You don’t need to follow below additional steps.

Step 4: Import Bootstrap JS file

Add following script files to angular-cli.json file

Step 5: Install Bootstrap Components with ngx-bootstrap/ng2-bootstrap

To use component like Modal, Alert, Accordion, Datepicker and so on,  you need to add ngx-bootstrap/ng2-bootstrap components. Either install ngx-bootstrap using npm

or install ng2-bootstrap using npm

Step 6: Add required Bootstrap modules in app.module.ts

Import the module you want to use from Bootstrap. For example, to use accordion component you should import AccordionModule.

Step 7: Use bootstrap components and css in your angular template

Open app.component.html file and add below code. We have imported Accordion Module in app.module.ts so that we can use accordion component in our template.

Step 8: Run the app

You are all set. Run your app using command ng serve –open.

bootstrap output

Stay tuned for more tutorials and updates !!!

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.