May 6 2019 at 17:00

Angular Tutorials | Integrating Angular With Bootstrap

Invite pending

What To expect

In this angular tutorial, we will see how we can integrate bootstrap with angular to build a beautiful experience

Bootstrap

World most famous front-end component library to Build responsive, mobile-first projects on the web It is a free and open-source CSS framework. It contains CSS- and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components

Setting Up An Angular Project With Angular CLI

First, let's start by creating a new Angular project. The easiest way to do so is to use the Angular Command Line Interface (CLI) to generate a new project. First, you need to make sure that Angular CLI is installed on your system. As Angular CLI comes as an NPM package the installation can be done by using the following command.

For more details visit Angular Tutorials- Development Environment Setup an article where I showed how to quickly set up your development environment ok so once you have your project ready go ahead and hit ng serve -o and your application will start.

 npm install -g @angular/cli

Install Bootstrap

Now that the Angular project is ready and running we can continue and add Bootstrap to the project. There are different ways of adding bootstrap to our project.

Using Bootstrap CDN

head over to get bootstrap the official website of bootstrap and hit on get started button
Copy-paste the stylesheet into your before all other stylesheets

<head>
  <meta charset="utf-8">
  <title>Projectone</title>
  <base href="/">
<!-- Bootstrap css -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 
  crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

the next step is to paste all the js scripts in your body tag at the end

<body>
  <app-root></app-root>
<!-- Bootstrap Scripts -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
    
</body>

your full html will look like this

Angular tutorials | Integrating angular with bootstrap.

Using Bootstrap with npm

the other way to use bootstrap is to install bootstrap as an npm package and then use Bootstrap depends on Jquery and popperjs so we will need to include that also as a peer dependency

npm i jquery popperjs bootstrap --save

the above command will install jquery popperjs and bootstrap as pm package now we need to configure css and js in our angular.json file (the recommended way)

so head over to your angular.json file and there you will find a styles array and scripts array just paste this lines (nothing more than imports of css and js from node_modules)

"styles": [
              "src/styles.scss",
              "./node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
"scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/popper.js/dist/umd/popper.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.min.js"
            ],

once you do that restart your application as whenever you make any changes to the angular.json file you need to restart the application Visit Smartcodehub.com

Show Us Your Support And Share Us On

Tags:

Hubs:

Angular