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

How to compress or reduce size of image using python django web or rest framework

- Pro Code Programming

How to start with javascript framework i.e. React JS web framework in windows operating system

- Pro Code Programming

How to add multiple location markers into google map using google marker into angular app

- Pro Code Programming

React Bootstrap Demo for developing responsive web app

- Pro Code Programming

How to test python django rest api using postman software- Part 4

- Pro Code Programming

0replies
Leave a reply
46
Registerd Users
88
Total Subscribers
59
Total Articles
42104
Total Views