Share and Learn To Write Code!

Programming articles, which help you to build your application. If something you are stuck to code and complete the program, just find here your question-related articles.

Share with   

How to install bootstrap 4 in angular 9 | 8 | 7 | 6 | 5 | 4

Bootstrap is used to design websites more beautiful. It is responsive framework for HTML and CSS.
Angular 9   angular 8   angular 7   bootstrap4   css  

Bootstrap


Bootstrap is used to design websites more beautiful. It is responsive framework for HTML and CSS. Bootstrap having html css responsive templates to design more attractive website. It is very faster and easier framework to design websites.


How to install bootstrap in angular framework ?


Prerequisite

  1. Angular Cli. To install angular cli click here.


Setup

To Install bootstrap their is two methods available.

  1. Install bootstrap using node package manager (NPM).
  2. Install bootstrap using content delivery network (CDN).


Method 1

Install bootstrap using node package manager (NPM).

The command is used to install bootstrap using npm in angular project is

npm install bootstrap --save

If you want to install the version of bootstrap use this command

npm install bootstrap@4.3.3 --save

In the above command the version is mentioned after the @ sign which indicates to node package manager install bootstrap of version 4.3.3


Method 2

Install bootstrap using content delivery network (CDN)

To download CDN go to main bootstrap site. Click here to go official website.


Apply Bootstrap to Project


Method 1

After installation done using npm. Then after add the bootstrapp min css and js to angular json file

//project_name > angular.json

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

Some time bootstrap need jquery also so install it using

npm install jquery --save

After install jquery successfully add jquery js file to angular josn file

//project_name > angular.json

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


Boostrap setup completed you can use bootstrap to your project.


Method 2

Install bootstrap using content delivery network (CDN). You need CDN link to add this link to angular index.html file.

To download the CDN file click here.


Add this CDN to angular index.html file

// src > index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>DemoForArticle</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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

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

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>
</html>


Some time bootstrap need jquery also so add it using jquery CDN, to get jquery cdn go to link.

After taking the CDN add to your index.html file to support jquery to bootstrap.


// src > index.html

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

<!-- Bootstrap CSS CDN -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

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

<!-- Jquery JS CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Bootstrap JS CDN -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>
</html>


Boostrap setup completed you can use bootstrap to your project.


You can use bootstrap using NG Bootstrap. To see how to use NG Bootstrap use this article.


To see bootstrap is successfully installed to your angular project or not.

Add the bellow code to your component html file

// src > app > app.component.html

<div class="container-fluid">
  <div class="jumbotron text-center mt-lg-5">
    <strong> Hi you have successfully installed bootstrap. Thankyou for seen this article. </strong>
  </div>
</div>

Output


Thank you for watching this article.

Hit Like

Hit like for this post

Here About Author
Author Image
Pro Code Programming

Programming articles, which help you to build your application. If something you are stuck to code and complete the program, just find here your question-related articles.

Popular Post

Automation

- Snehal Bendre

Install Composer A Dependency Manager for PHP In Windows Operating System

- Pro Code Programming

Some Google Hacks to Improve Your Search Rank for free of cost

- Pro Code Programming

How to use *ngFor, *ngIf and *ngSwitch directive in Angular 9 | 8 | 7 | 6 | 5 | 4

- Pro Code Programming

How to compress or crop image using ngx-image-cropper module in Angular javascript framework

- Pro Code Programming

0replies
Leave a reply
43
Registerd Users
84
Total Subscribers
59
Total Articles
30612
Total Views