How to Use Bootstrap with Angular 4? Here Are 3 Ways to Add It To Your Project 

Here you are now: your Angular 4 front-end app ready to... wow its users! “Almost ready” actually! For it still needs styling... And what better HTML and CSS framework to go for than Bootstrap, right? But how to use Bootstrap with Angular 4 more precisely?

How do you properly integrate it into your Angular 4 CLI project?

Great news: you have not just one, but 3 options at hand for adding it!

Let me get into details:
 

On Using Bootstrap in Your Front-End Development Process

Is there any need to list here the reasons why it's precisely Bootstrap that you're planning to implement into your Angular CLI project? Angular 4, to be more specific.

After all, it's the most popular framework for styling websites built in HTML, CSS and modern web & mobile JavaScript frameworks (like Angular here):

It's an open source, feature-rich framework that turns front-end development into a such a “breeze”. Basically, it empowers you to build responsive layouts without the need to be a CSS “expert”.

And now, let's break down further with the step-by-step “tutorial” on how to use Bootstrap with Angular 4:
 

Step 1: Create a New Angular Project Using Angular CLI 

The very first step to take is obviously setting up a brand new project.

Use the Angular Command Line Interface to generate it.

But first, install it to on your system:

$ npm install -g @angular/cli 

It's only then, once you've installed its NPM package, that you can go ahead and... generate your new project. 

For doing this, just type the following command in your CLI:

$ ng new myproject 

Next, feel free to change into that specific directory and to turn on the web server:

• $ cd myproject

• $ ng serve 
  
  

“App works!” This is the message that you should be seeing in your browser right now.

 
Step 2: Install Bootstrap to Your Project

Now that you've launched your new Angular project, it's time to add your Bootstrap library, as well.

And you sure aren't nickel and dimed in options. There are 4 ways to add Bootstrap to Angular 4.
 

Step 3: How to Use Bootstrap with Angular 4 — 3 Different Ways to Integrate It

Option 1: Install Bootstrap from CDN

And there are 2 particular files that you'll need to install from CDN into your project:
 

1. the Bootstrap CCS file
2. the Bootstrap JavaScript file 
    

Note: keep in mind to add the jQuery JavaScript library file, as well!

Next, open the src/index.html file and insert the following:
 

• the <link> element to add the Bootstrap CSS file at the end of the head section
• a <script> element for adding jQuery at the bottom of the body section
• a <script> element for inserting the Bootstrap JS file at the bottom of the body section
   

Eager to see “Bootstrap in action” in one of your project's component templates? Then give it a try:
 

• open the src/app/app.component.html
• enter the following code there:
   

<div class="container">
  <div class="jumbotron">
    <h1>Welcome</h1>
    <h2>Angular & Bootstrap Demo</h2>
  </div>
  <div class="panel panel-primary">
    <div class="panel-heading">Status</div>
    <div class="panel-body">
      <h3>{{title}}</h3>
    </div>
  </div>
</div>

And it's the following message that this HTML template code should trigger in your browser:

“app works!”

Note: go for a Bootstrap theme of your choice; once you've downloaded it (from Bootswatch.com for instance), its bootstrap.min.css file will get instantly opened up in your browser.

Just copy the file's URL and use it to replace the string assigned to the href attribute of the <link> element, in the index.html file.

And voila! It's precisely those colors, defined by your chosen theme, that get displayed in the browser now!
 

Option 2: Install Bootstrap using NPM

And here's another valid answer to your “How to use Bootstrap with Angular 4” dilemma!

Simply enter:

$ npm install bootstrap@3 jquery –save

It's this command that will integrate Bootstrap and jQuery into the node_modules folder of your Angular 4 project directory.

Moreover, it will include these 2 dependencies in the package.json file, as well.

Once properly installed, you can find both packages at:
 

• node_modules/bootstrap/dist/css/bootstrap.min.css
• node_modules/bootstrap/dist/js/bootstrap.min.js
• node_modules/jquery/dist/jquery.min.js
   

Note! You have 2 options for integrating those files into your Angular 4 project:
 

1. add the file paths to the script array and to the file path of the angular-cli.json file
2. add the corresponding <script> and <link> elements to your index.html file
    

Option 3: Add NG-Bootstrap to Your Project

The great thing about this method is that you'll no longer need to add jQuery and Bootstrap dependencies. Ng-Bootstrap comes packed with a set of built-in native Angular directives which are already CSS and Bootstrap's markup-based.

Now, getting back to our initial “How to use Bootstrap with Angular 4” question, let's see how we install this NPM package. 

For this, just enter the following command in your Angular 4 project directory:

npm install --save @ng-bootstrap/ng-bootstrap 

Next, make sure you also install Bootstrap 4 to your project:

$ npm install bootstrap@4.0.0-alpha.6

And, the final step is to add the following files:
 

• jquery.min.js
• bootstrap.min.js
• bootstrap.min.css
   

… to your .angular-cli.json file

Now you still need to import the Ng-Bootstrap’s core module — NgbModule — from its @ng-bootstrap/ng-bootstrap package.

To do this, just type the following import statement into app.module.ts:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

All there's left for you to do now is to add the NgbModule to the @NgModuledecorator's imports array. 

And since we're here, you'll find some more than “enlightening” info (chunks of code here included!) on the 2 different options at hand for importing the NGBModule:

either in your project's child modules 
or in your the root module itself

… in this article here on Using Bootstrap with Angular.
 

Using The NG-Bootstrap Components: Which Are They? 

With the NgbModule installed into your Angular 4 project, you're now able to use the Ng-Bootstrap components.

To leverage them in your app.component.html.

Speaking of which, here are the components at hand:
 

• Accordion
• Alert
• Rating
• Tabs
• Carousel
• Progressbar
• Collapse
• Datepicker
• Buttons
• Pagination
• Typeahead
• Popover
• Timepicker
• Dropdown
• Modal
• Tooltip
   

The END! Does this answer your “How to Use Bootstrap with Angular 4” question? 

Which method of adding this front-end framework to your project is more suitable for you?