Skip to content

Online Portfolio

Research and Development

  • Angular
  • React JS
  • Javascript
  • jQuery
  • CSS
  • Ask Question
  • DWQA Questions

How to Add Bootstrap to Angular

  1. Home
  2. How to Add Bootstrap to Angular
How to Add Bootstrap to Angular
  • admin
  • August 23, 2021
  • 0
Posted in Angular, CSSTagged in Angular, Bootstrap, CSS

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

 

Post Views: 230

admin

View all posts by admin | Website

Previous post

Angular Google Bar Chart Example

Next post

How to create new components in Angular using the CLI

Related Posts

Angular 11 How to convert HTML to image

Angular 11 How to convert HTML to image?

  • admin
  • September 30, 2021
  • 0

Angular 11 How to convert HTML to image, This article will tell the developer how to change over HTML into an image utilizing the html-to-image NPM bundle. developer can change […]

View Post
How to create new components in Angular using the CLI

How to create new components in Angular using the CLI

  • admin
  • August 26, 2021
  • 0

How to create new components in Angular using the CLI : It just so happens, when creating your own new components in Angular, you can finish the cycle totally by […]

View Post

Leave a Comment Cancel reply

Your email address will not be published. Required fields are marked *

  • Angular 11 How to convert HTML to image?September 30, 2021
  • How to create new components in Angular using the CLIAugust 26, 2021
  • How to Add Bootstrap to AngularAugust 23, 2021
  • Angular Google Bar Chart ExampleAugust 19, 2021
  • Javascript Interview QuestionsAugust 18, 2021

Copyright © 2021 | All Rights Reserved.

Loading