How to Add Bootstrap to Angular : In this article , we will tell you the best way to add Bootstrap to the Angular application. This instructional exercise utilizes Bootstrap 4 and Angular 9. We will tell you the best way to introduce the bootstrap CSS.

What is Bootstrap:

The bootstrap is a responsive mobile-first CSS framework for building Web Applications. It is open source and has all the features like Sass variables, mixings, responsive grid system, prebuilt components, and powerful JavaScript plugins.

Bootstrap consists of few CSS files & JS files.

The CSS files contains all the styles definitions.

Many of bootstrap components require the use of JavaScript to function. For Example, carousels, drop-down menus, auto-suggest, etc require bootstraps.js file. It also has dependency on jQuery, Popper.js.

Step 1 : Create a new Angular Application –

ng new Bootstrap-example

Step 2 : Adding Bootstrap CSS File –

Assuming you are not utilizing any of the components that utilization JavaScript, you don’t have to introduce JS documents. There are a couple of manners by which you can add the CSS Files.

We can introduce the Bootstrap CSS document in one of the accompanying ways

  • You can use the CSS file from a CDN
  • Also, copy the bootstrap.min.css file to a local folder
  • Install the bootstrap npm package

Once introduced, you can remember it for the application by utilizing the one of the techniques

  • You can add it in index.html using the link tag
  • Alos, include it in angular.json
  • Import it in styles.css

Add Bootstrap using the CDN –

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bootstrap CSS Example</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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"  crossorigin="anonymous">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Alternatively, you can use the @import directive in the styles.css file

@import "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"

Install the bootstrap package :

This way is recommended to everyone to add Bootstrap to Angular :

Run the following command to install the latest version of Bootstrap to your Application.

npm install --save bootstrap

This will add the bootstrap files to the node_modules/bootstrap directory.

Open the angular.json file and locate the projects -> Bootstrap-example (your project name) -> architect -> build -> styles node.

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

Also, you can just add the @import directive to import it in the styles.css

@import "~../node_modules/bootstrap/dist/css/bootstrap.min.css";

Step 3: Run your app using the following command

ng serve

 

 

Please follow and like us:
error
fb-share-icon
Tweet
fb-share-icon
Post Views: 220
Angular, CSS

Tagged in:

, ,
Banner