How to Add Bootstrap to an Angular Application?

History of Bootstrap

Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter in 2011. Initially, it was an internal tool used at Twitter, but later, it was released as an open-source framework. Over the years, it has evolved significantly, with the latest versions introducing better features, improved grid systems, and enhanced responsiveness.

Why Use Bootstrap?

1. Responsive Design – Bootstrap allows developers to create mobile-friendly websites effortlessly.
    
2. Pre-built Components – It provides various UI components like buttons, forms, modals, and navigation bars.
    
3. Easy Customization – Developers can customize Bootstrap styles using CSS or SCSS.
    
4. Cross-browser Compatibility – Websites built with Bootstrap work well across different browsers.
    
5. Faster Development – With predefined classes and utilities, coding time is significantly reduced.

What is a Responsive Website?

A responsive website automatically adjusts its layout based on the screen size of the device. Whether viewed on a desktop, tablet, or smartphone, the content resizes accordingly. Bootstrap achieves responsiveness using its flexible grid system and utility classes.

What Does a Bootstrap Package Contain?

A Bootstrap package includes:

• CSS Files – Predefined styles for typography, buttons, forms, and layouts.
   
• JavaScript Files – Provides interactive features like modals, tooltips, and dropdowns.
   
• Grid System – A flexible layout system for structuring web pages.
   
• Components – Ready-to-use UI elements like alerts, buttons, and navigation bars.

What is Bootstrap 4?

Bootstrap 4 is one of the most widely used versions of Bootstrap. It introduced:

• Flexbox Grid System – Enhanced layout control.
   
• Improved Customization – More control over theme colors and styles.
   
• Better Performance – Reduced file sizes for faster loading.
   
• More Utility Classes – Additional helper classes for styling elements efficiently.

Embedding Bootstrap into Angular

To integrate Bootstrap with Angular, follow these steps:

Step 1: Install Bootstrap via npm

Open a terminal and navigate to your Angular project directory, then run:

npm install bootstrap

Step 2: Import Bootstrap in angular.json

After installation, add the Bootstrap CSS path to the angular.json file:

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

If you need Bootstrap’s JavaScript functionality, add the script path:
"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

Step 3: Use Bootstrap Classes in Angular Components

Now, you can use Bootstrap classes in your Angular templates. Example:

<div class="container text-center mt-5">
  <h1 class="text-primary">Welcome to Angular Bootstrap</h1>
  <button class="btn btn-success">Click Me</button>
</div>

Demo - Creating an Application With Angular Bootstrap

Let’s build a simple Angular application that displays a Bootstrap-styled navigation bar and a button.

Step 1: Create a New Angular Project

If you haven’t already set up an Angular project, create one using:

ng new bootstrap-angular
cd bootstrap-angular

Step 2: Install Bootstrap

npm install bootstrap

Step 3: Modify angular.json

Add Bootstrap in the styles and scripts section:

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

Step 4: Edit app.component.html

Replace the existing content with:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Angular Bootstrap</a>
</nav>

<div class="container mt-5 text-center">
  <h2>Bootstrap in Angular</h2>
  <button class="btn btn-primary">Click Me</button>
</div>

Step 5: Serve the Application

Run the application using:

ng serve

Open http://localhost:4200 in your browser to see the Bootstrap-styled Angular app in action.

Frequently Asked Questions

What is the best way to use Bootstrap in Angular?

The best way is to install Bootstrap via npm and include it in the angular.json file.

Can I use Bootstrap components in Angular without JavaScript?

Yes, you can use Bootstrap’s CSS components without JavaScript. However, for interactive elements like modals and tooltips, JavaScript is required.

What are the advantages of using Bootstrap with Angular?

Bootstrap simplifies styling, ensures a responsive design, and speeds up development while Angular provides dynamic functionalities.

Conclusion

In this article, we learned on how to add Bootstrap to an Angular application, using methods like installing via npm, adding the CDN link, or configuring Angular.json. Integrating Bootstrap enhances the UI with pre-styled components and responsive design. Understanding these methods helps developers build visually appealing and mobile-friendly Angular applications efficiently.