Installing Bootstrap in Angular Project with 2 simple steps

Installing Bootstrap in Angular Project with 2 simple steps

Learn Efficient Ways To Install Bootstrap In Your Angular Project

In this tutorial you will have learned the concepts listed below:

  1. How to create a new directory using the command,
  2. How to create a new Angular project,
  3. How to add style while creating a new Angular project
  4. How to Install NPM
  5. How to run the Angular project
  6. How to install Bootstrap files
  7. How to create a navigation bar in the Angular project

Steps to create a new Angular project,

Step 1

Open command prompt & create a new directory with the below command shown in the screenshot 

This is image title

Check your D: drive and the csharpcorner folder will be created.

Step 2

Now go ahead and create a new Angular project with the below command:

This is image title

We are creating a new Angular application with ng new command and the application name in TaskManager. Now we  are required to specify style options whether we want to use CSS, SASS, SCSS, etc. If you look at our command above we are using -style=scss command to add the styles. In order to add the routing to our application we need to give --routing as shown above. When the application is created it will try to install all npm packages, so to skip those installations we have to add --skip-install text in our command.

So our final command looks like below:

command: ng new TaskManager --style=scss --routing --skip-install 

You can check your csharpcorner folder and see the application is created, it looks like below.

This is image title

Install NPM Packages by running the below command, this will install the essential packages to run the Angular application.

npm install

Now open the folder in Visual Studio Code,

This is image title

Now go back to command prompt and type this command ng serve --open, the default port number for angular is 4200, we can also change the default port by using this command and hit enter.

ng serve --open --port=8112

This is image title

This is image title

So far, we have learned,

  • Creating a new Angular project with SCSS style,
  • Installing NPM packages,
  • Run the application by changing the default port number explicitly. 

Now, let' see how we can install Bootstrap in our new brand angular project

Install jquery package because bootstrap works on jquery, run this command in the command prompt,

_npm install jquery --save _

Next, install another package called popper.js, so the command is,

npm install popper.js --save

Now install the actual package called bootstrap, this package will load CSS files/javascript files of bootstrap.

npm install bootstrap --save

Additionally, in our article, we shall use font-awesome which provides a large set of icons,

npm install font-awesome --save

After installing all the above, we have to add these files in angular.json file in styles and scripts components as shown below,

This is image title

Now we have loaded essential CSS/javascript files that are required to run bootstrap.

Go back to the command prompt, stop the ng serve command by pressing cntrl+c twice and run the ng serve --open command again 

Result before adding bootstrap files

This is image title

Results after adding bootstrap files

This is image title

Finally, we are done adding bootstrap files to our Angular project. Now let me show you how to add a Navigation bar to our new brand angular application. Get "app.component.html" and create nav tag and the below code in the nav tag,

<nav class="navbar navbar-expand-sm bg-success navbar-dark">  
    <a class="navbar-brand" href="#">  
Angular Task Manager  
</a>  
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mynav">  
        <span class="navbar-toggler-icon"></span>  
    </button>  
    <div class="collapse navbar-collapse" id="mynav">  
        <ul class="navbar-nav mr-auto">  
            <li class="nav-item">  
                <a class="nav-link" href="#">Dashboard</a>  
            </li>  
            <li class="nav-item">  
                <a class="nav-link" href="#">About</a>  
            </li>  
        </ul>  
        <form class="form-inline my-2 my-lg-0">  
            <div class="input-group">  
                <div class="input-group-prepend">  
                    <span class="input-group-text" id="search">  
                        <i class="fa fa-search"></i>  
                    </span>  
                </div>  
                <input type="text" class="form-control" placeholder="Search">  
                </div>  
                <button class="btn btn-warning my2- my-sm-0" type="button">Search</button>  
            </form>  
        </div>  
    </nav>  

Screenshot reference

Now go back to command prompt window and run ng serve --open command again to see the result as below with maximized window,

This is image title

With minimized window,

This is image title

Conclusion

In this article, we learned,

  1. How to create a new directory using the command
  2. How to create a new Angular project
  3. How to add style while creating a new angular project
  4. How to Install NPM
  5. How to run the Angular project
  6. How to install Bootstrap files
  7. How to create a navigation bar in the Angular project 

Would you tell us how you feel about this article?

*Happy Coding ! *

angular npm bootstrap Installing-bootstrap

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

Angular Bootstrap Tutorial - Building Websites with Angular Bootstrap

In this Angular Bootstrap tutoria will help you learn to create beautiful websites easily using Bootstrap along with Angular. You'll learn: What is Angular? What is Bootstrap? Creating an Angular Application; Embedding Bootstrap with Angular

Complete beginner guide to publishing an Angular library to npm.

In this article, I will be sharing my experience of publishing my first Angular library to NPM. This post will cover steps right from creating the library to detailed NPM publishing steps.

Angular 9 - Angular Smart Table Open Bootstrap 4 Modal Popup on button click

Angular 9 - Angular Smart Table Open Bootstrap 4 Modal Popup on button click. Angular smart table add custom button. Angular smart table dynamic data.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

Angular 9 bootstrap 4.5 popup login form

Angular 9 bootstrap popup login form. Angular 9 bootstrap modal popup. Angular 9 bootstrap 4.5 popup login form. Angular bootstrap popup.