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 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:
- A <link> tag for adding the bootstrap.css file in the <head> section,
- A <script> tag for adding the jquery.js file before the closing </body> tag,
- A <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.
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.