Add Bootstrap 4 to Angular 9 With Example

In this tutorial, you’ll learn how to integrate Bootstrap 4 to add awesome styles into your angular 9 applications.

What is Bootstrap 4?

Bootstrap is a powerful toolkit, a collection of HTML, CSS, and JavaScript tools for creating and building web pages and web applications. It is a free and open source project, hosted on GitHub.

Bootstrap 4 is the latest version of Bootstrap (BS) which brings many new and powerful features to the framework most importantly Flexbox which is now the default display system for Bootstrap grid layout and grid is one of the most important features of Bootstrap.

Installing Angular CLI

To Install  Angular CLI, type the following command in the terminal:

$ npm install -g @angular/cli

This will install the ng command globally on your system.

To verify whether your installation completed successfully, you can run the following command:

$ ng --version
/*
Angular CLI: 9.0.0
Node: 10.15.3
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.801.1
@angular-devkit/core         8.1.1
@angular-devkit/schematics   8.1.1
@schematics/angular          8.1.1
@schematics/update           0.801.1
rxjs                         6.4.0 
*/

Now that you have Angular CLI installed on your system, you can use it to generate your Angular app, generate a new angular app.

Create new Angular App

With the Angular CLI, we can create a new project using the following command:

$ ng new bootstrap-angular-app

You can now navigate to the project directory to run:

$ cd bootstrap-angular-app

Then start the Angular CLI development server to run:

$ ng serve

This will start a local development server that you can now navigate to in your favorite browser at http://localhost:4200/ to see your first angular application in action.

Installing Bootstrap 4 in Your Angular 9

In this step, we’ll proceed to add Bootstrap 4 to our Angular 9 application. Go back to your command-line interface(CLI) and install Bootstrap 4 via npm as follows:

$ npm install --save bootstrap

This will also add the bootstrap package to package.json file. The Bootstrap 4 assets will be installed in the node_modules/bootstrap folder. You’ll need to tell Angular where to look for them.

Next, you also need to install jQuery using the following command:

 $ npm install --save jquery

Open the src/index.html file and add the following:

  • <link> tag for adding the bootstrap.css file in the <head> section,
  • <script> tag for adding the jquery.js file before the closing </body> tag,
  • <script> tag for adding the bootstrap.js file before the </body> tag.

Your src/index.html file look like this:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bootstrap Angular App</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">

</head>
<body>
  <app-root></app-root>
  <script src="../node_modules/jquery/dist/jquery.js"></script>
  <script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>    
</body>
</html>

Now you can use bootstrap 4 CSS and JS both.

Conclusion

In this tutorial, I have shown you, how to kickstart your angular project using the bootstrap library. kindly click on the like button. If you have any question tell me in the comment box below.

Muhammad Mubeen

Muhammad Mubeen

Mubeen is a full-stack web & mobile app developer who is very proficient in MEAN.js, Vue, Python, Ionic 4, Flutter, Firebase, ROR, and PHP. He has created multiple mobile and web applications. He is very passionate about sharing his knowledge.

Leave a Reply

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

Trending