LaravelCode

Search

How to install Bootstrap in Angular

AngularJS
2231 views 2 years ago
post-title

Bootstrap is CSS framework which has predefined class with Javascript plugins such as modal, collaps, carousel etc to make responsive webdesign.

In this article, we will see how we can install bootstrap in Angular and use it. We will install current latest bootstrap version 5 in Angular 12.

There is two way, you can install and use Bootstrap in Angular. We will see both the ways one by one.

Install from npm package

First way, we install Bootstrap using npm package manager. Run the following command and it will install Bootstrap into node_module directory. 

npm install bootstrap

If the installation failed due to permission error, you may need to run command with supo permission in Linux system.

sudo npm install bootstrap

Now in the root angular.json file, add Bootstrap css file in "styles" array and js file in "scripts" array as follow.

{
  "projects": {
    "boots": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": [
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          }
        }
      }
    }
  }
}

Now run the Angular server again and you can add Boostrap classes to add CSS and Bootstrap components.

Using CDN

The second way is to use CDN files into main layout view. Put the below stylesheet into your <head> tag before all other stylesheets to load.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

And if you want to use Bootstrap component, then you need to include Bootstrap js file. Add the following <script> tag before the closing </head> tag.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Here is the default Angular index.html file with Bootstrap.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Boots</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

This way, you don't need to download Bootstrap source files into your project.

Random Articles
  • How to Get Current Month Records in Laravel
    You may want to add filter while fetching records. This basic functionality requires where showing&nbsp;list. For example, transactions, report etc. In this article, I will share you how you can fe...
  • Laravel Eloquent Eager Loading where Condition Example
    When getting eloquent queries as properties, the related models are always &quot;lazy loaded&quot;. It means that the relationship data is not actually loaded until you first access the property. But,...
  • How to Get the Current Year using PHP
    Use the PHP date() Function You can simply use the PHP date() function to get the current year. The following example code will be very useful if you want to put a copyright notice in a website...
  • How to Get the Value in an Input Text Box using jQuery
    Use the jQuery val() Method You can simply use the jQuery&nbsp;val()&nbsp;method to get the value in an input text box. Try out the following example by entering something in the text input box...
  • Install Adminer In Laravel 8
    When accessing database, command line access need skill and you need to write full query. You might needed GUI based database system. Either you can install Workbench, SQLPro database softwares or bro...
Advertise