Categories: angular

Bootstrap Installation in Angular

Bootstrap Installation In Angular Application

Bootstrap is world’s most popular front-end component library.

You can build responsive, mobile-first projects on the web with the bootstrap.

Bootstrap is an open source toolkit for developing web applications using HTML, CSS, and JS.

Quickly prototype your ideas or build your entire app with bootstrap Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.

Using bootstrap you can quickly develop Angular front-end UI.

So let’s see the ways, to use bootstrap in angular application

Different ways to use Bootstrap in Angular Application

There are two ways to use bootstrap in an angular application.

Using Bootstrap CDN
Installing Bootstrap libraries in Angular Application.

Using Bootstrap CDN

Bootstrap CDN is an easy and quick way to use bootstrap in your application.

You just need to add below CSS and JS files in index.html of Angular application

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

Generally, this is a good way, if your application is running on the internet and if it is allowed to use external CSS and Scripts in your organization.

But if either of above is not valid then you need to install bootstrap in your application, after downloading the npm modules.

Bootstrap Installation

To install bootstrap in your Angular CLI application run below command in your project directory.

npm install --save bootstrap@4.0.0-beta.3

For the latest stable version installation run below command

npm install --save bootstrap

Note :

--save in npm install command will also make entry of bootstrap@4.0.0-beta.3 in the package.json

After executing above command you will get below result.

Bootstrap is dependent on jQuery and Popper.js library, so if you have not installed jquery and popper.js before in your application, then you need to also install this two libraries.

To install jQuery in your application, execute below command

npm install --save jquery

and to install popper.js, execute below command

npm install --save popper.js

For Angular 6+ project generated using Angular CLI 6+, include following .css file in the styles array property of angular.json

Note : In Angular CLI 6+, angular-cli.json is replaced with angular.json

"styles": [
        "src/styles.css",
        "node_modules/bootstrap/dist/css/bootstrap.min.css"
      ],

As well as, include following .js files in the scripts array property of angular.json

"scripts": [
"node_modules/jquery/dist/jquery.slim.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
 ],

For Angular 5 or lower version application, include following .css file in the styles array property of .angular-cli.json

"styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css"
      ],

As well as, include following .js files in the scripts array property of .angular-cli.json

"scripts": [
"../node_modules/jquery/dist/jquery.slim.min.js",
"../node_modules/popper.js/dist/umd/popper.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
 ],

Serve the application

Now serve the application using ng serve command. You can see in the below output, fonts of headers and text are changed.

As shown below, Bootstrap is successfully installed, now you can build User Interface using bootstrap component.

If you get the below error at the time of serving an application, downgrade the bootstrap to previous version. for example here you have to downgrade bootstrap to bootstrap@4.0.0-beta.2 This error might be occurring due to version mismatch between angular cli and bootstrap. ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/bootstrap/dist/css/bootstrap.min.css Module build failed: BrowserslistError: Unknown browser major