DEV Community

Cover image for Add Bootstrap in Angular
venkateshpensalwar
venkateshpensalwar

Posted on • Edited on

Add Bootstrap in Angular

#bootstrap #angular #javascript #beginners

Hi, All today I am going to show you how we can add CSS framework in angular and I am using Bootstrap for this Post.

bootstrap website

  • You will see the npm command to install the package ```

npm i bootstrap@5.3.2

* After installing this package go into your angular.json file and add this lines into this object. 

![Angular json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ep2cwyhtlx0bvd2p9tk.png)
Enter fullscreen mode Exit fullscreen mode

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


* run your application using
Enter fullscreen mode Exit fullscreen mode

ng serve

* Open the app.component.html file remove all default HTML and change the HTML with the following
Enter fullscreen mode Exit fullscreen mode

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Link

Now check your browser 
![Browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dltyywh7w5podfqcvs5h.png)

In this way, we integrated Bootstrap into your Angular project it will work for any version of Angular and if you have any queries or doubts then feel free to reach out to me!!
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
danishhafeez profile image
Danish Hafeez •

To add Bootstrap to an Angular project, you can follow these steps:

Install Bootstrap:

Use npm (Node Package Manager) to install Bootstrap in your Angular project. Run the following command in your terminal or command prompt:

npm install bootstrap
Enter fullscreen mode Exit fullscreen mode

In your styles.scss or styles.css file (located in the src folder), import Bootstrap styles. If you're using SCSS, you can directly import Bootstrap's SCSS file into your main SCSS file:

@import '~bootstrap/scss/bootstrap';
Enter fullscreen mode Exit fullscreen mode

If you're using plain CSS, you can import Bootstrap's CSS file into your main CSS file:

@import '~bootstrap/dist/css/bootstrap.css';
Enter fullscreen mode Exit fullscreen mode

Include Bootstrap JavaScript (Optional):

If you need Bootstrap JavaScript functionalities (like dropdowns, modals, etc.), you need to include Bootstrap JavaScript in your project.

Open angular.json file and include Bootstrap JavaScript file under the scripts array:

"scripts": [
    "node_modules/bootstrap/dist/js/bootstrap.js"
]
Enter fullscreen mode Exit fullscreen mode

Make sure to restart your Angular server after making these changes.

Verify:

To verify that Bootstrap is successfully added to your Angular project, you can add some Bootstrap classes to your HTML templates. For example:

<div class="container">
    <h1>Hello, Bootstrap in Angular!</h1>
    <button class="btn btn-primary">Click me</button>
</div>
Enter fullscreen mode Exit fullscreen mode

When you run your Angular application, you should see the Bootstrap-styled button and other elements if you've added them accordingly.

That's it! Now you have Bootstrap integrated into your Angular project.

Collapse
 
jangelodev profile image
João Angelo •

Thanks for sharing !

Read next

sharathchandark profile image

How to Build a QR Code Generator with API Using HTML, CSS, and JavaScript

sharathchandark -

fabbuilder profile image

React + Vite: The ultimate guide to static application deployment

FAB Builder | Code Generation -

trixsec profile image

Essential Arch Linux Commands: Advanced Mastery(Part-2)[Must Read]

Trix Cyrus -

briansuarezsantiago profile image

Terraform vs AWS CDK: ¿Qué herramienta de infraestructura como código es mejor para tu proyecto?

Brian -