Learn Efficient Ways To Install Bootstrap In Your Angular Project

Hey Developers, I am sure you already read my previous article about Why Developers choose Angular and hope that helped you to understand.

 

Now, we are moving ahead and by the end of 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

Refer to my article Prerequisites to Create a new Angular project before creating an 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 :)