Angular tutorials | Integrating angular with bootstrap

Angular Jun 13, 2019

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:

$ npm install -g @angular/cli

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


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 <link> into your <head> before all other
stylesheets

<head>
  <meta charset="utf-8">
  <title>Projectone</title>
  <base href="/">
<!-- Bootstrap css -->
  <link rel="stylesheet" href="
" 
  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 you body tag at the end

<body>
  <app-root></app-root>

<!-- Bootstrap Scripts -->
  <script src="
"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="
"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
  <script src="
"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
    
</body>

your full html will look like this

Time to test hit ng serve -o and it should work as expected

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 poppers 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




Neeraj Dana

Experienced Software Engineer with a demonstrated history of working in the information technology and services industry. Skilled in Angular, React, React-Native, Vue js, Machine Learning