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

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:

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.

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,

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

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,

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

Results after adding bootstrap files

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,

With minimized window,

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 ! **

What are the differences between bootstrap and angular.js?

<img src="https://moriohcdn.b-cdn.net/0ad50a1162.png">

Numerous frameworks have been introduced for frontend development. Frameworks are the best solution for building web development simpler and also guides in quality development. With the new updates and releases, the frameworks are getting better day by day, expanding the scalability of an app.

Learn How to Build Angular 8 Projects with Bootstrap and jQuery

Learn How to Build Angular 8 Projects with Bootstrap and jQuery

Angular Projects - Learn How to Build Angular 8 Projects from Scratch will help you learn how to create Angular applications completely along with Bootstrap and jQuery. Understanding the Building Blocks of Angular. Embedding Bootstrap and jQuery. Building a Complete Angular Application

This Edureka "Angular Projects" video will help you learn how to create Angular applications completely along with Bootstrap and jQuery. Below are the topics covered in this Angular Projects tutorial:

Case 1: Understanding the Building Blocks of Angular
Case 2: Embedding Bootstrap and jQuery
Case 3: Building a Complete Angular Application

Full Stack development: Angular 2/4/5/6/7 - Reusable Custom Bootstrap Modal Dialog Angular Component(3 ways)

Angular 2/4/5/6/7 - Reusable custom Bootstrap Modal dialog angular component-3 ways(code snippet with eg)&nbsp;

Angular 2/4/5/6/7 - Reusable custom Bootstrap Modal dialog angular component-3 ways(code snippet with eg)