How to Add Bootstrap to Angular [Step-by-Step]

![Angular Bootstrap Banner]

As a web developer, being able to quickly build beautiful, responsive interfaces is critical. Two of the most popular tools for front-end web development are Angular and Bootstrap.

Angular is a powerful JavaScript framework optimized for building complex, data-driven web applications. Bootstrap, on the other hand, is a CSS framework that makes styling web interfaces much easier.

Combining these two frameworks allows you to get the best of both worlds – Angular‘s robust features and Bootstrap‘s extensive library of UI components. In this comprehensive guide, I‘ll walk you through exactly how to add Bootstrap to an Angular project.

Whether you‘re just getting started with web development or are a seasoned pro, you‘ll learn the key concepts and best practices for integrating these technologies. Let‘s dive in!

Angular and Bootstrap – A Powerful Combination

Before we get our hands dirty with code, let‘s briefly discuss why Angular and Bootstrap work so well together.

Angular is built around components – self-contained UI building blocks that you can compose to build complex interfaces. It handles all the underlying logic and wiring, allowing you to focus on the view layer.

Bootstrap provides a library of pre-built UI components like buttons, navbars, cards, etc. These components are styled responsively so they work seamlessly on all device sizes.

Together, they allow you to build web apps with Angular‘s robust features and Bootstrap‘s extensive component library quickly. Angular handles the logic and Bootstrap handles the look and feel.

Here are some key benefits of using Bootstrap with Angular:

• Rapid development – Build full-featured UIs faster by tapping into Bootstrap‘s large collection of components
• Responsive interfaces – Get mobile-friendly responsive interfaces out of the box
• Consistency – Maintain a consistent look and feel across your entire app
• Customization – Tweak and adapt Bootstrap components to your design needs
• Popular stack – Leverage skills from two widely-used frameworks

According to the State of JS 2021 survey, Angular and Bootstrap are the 2nd and 3rd most popular frameworks respectively. Combining them is a great skill to have as a web developer.

Now that we‘ve discussed the benefits, let‘s go over the two main approaches for adding Bootstrap to an Angular project:

Option 1: Include via NPM

The first option is to install Bootstrap and its dependencies via npm into your Angular project. This gives you full control over Bootstrap, enabling importing only the parts you need as well as customizing it.

Option 2: Use a CDN

The second option is to add Bootstrap via a CDN link in index.html. This is great for getting off the ground quickly without having to install anything. However, it limits customizability.

In this guide, we‘ll cover both approaches hands-on. The one you choose depends on your specific app‘s needs.

But first, let‘s go over the prerequisites.

Prerequisites

Before diving into the code, there are a few essential tools you need:

Node.js – The runtime environment for JavaScript outside the browser. Download and install the LTS version from nodejs.org if you don‘t already have it.

You can check your Node.js version by running:

node -v

npm – Node.js includes npm, the package manager for JavaScript. You‘ll use it to manage dependencies.

Check you have it with:

npm -v

Angular CLI – The official tool for initializing and working with Angular projects. Install it globally like so:

npm install -g @angular/cli

Text Editor / IDE – You‘ll need a text editor or IDE for coding. Popular options:

• VS Code
• WebStorm
• Sublime Text
• Atom

That covers the essentials – let‘s move on to the fun part of actually coding!

Option 1: Add Bootstrap via NPM

The most flexible way to add Bootstrap is by installing it via NPM. This avoids using a CDN, giving you full control over Bootstrap itself. Let‘s go through it step-by-step:

Step 1: Create a new Angular app

Use the Angular CLI to generate a new project. We‘ll call ours my-app:

ng new my-app

The CLI will prompt you for routing and styling formats – go with the defaults.

Once it‘s done, cd into the new my-app directory:

cd my-app

Your Angular app skeleton is ready! Time to add Bootstrap.

Step 2: Install Bootstrap

First, install the Bootstrap npm package:

npm install bootstrap

This will also install jQuery and Popper.js, which Bootstrap depends on.

Next, install the Bootstrap Icons package to get 1500+ icons:

npm install bootstrap-icons

Step 3: Configure Bootstrap in angular.json

Open the angular.json file in your code editor. Under projects -> architect -> build -> options, update the styles array:

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

And the scripts array:

"scripts": [
  "node_modules/jquery/dist/jquery.slim.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" 
]

This imports the Bootstrap CSS and JS along with icons into your project.

Step 4: Import and use Bootstrap components

Now Bootstrap is ready to use in your app!

Let‘s say you have a HeaderComponent. Import Bootstrap‘s Navbar module:

import { NavbarModule } from ‘bootstrap‘;

// ...

@NgModule({
  imports: [
    // ...
    NavbarModule
  ] 
})

Then use it in the template:

<navbar>
  <a class="navbar-brand" href="#">My App</a>
  <nav>
    <a class="nav-link" routerLink="/">Home</a>
    <a class="nav-link" routerLink="/about">About</a>
  </nav>
</navbar>

That‘s it! You now have a responsive Bootstrap navbar in your app. Do this for other components like cards, buttons, etc.

Step 5: Customize Bootstrap

You can now customize Bootstrap by overriding variables in the src/styles.css file before importing Bootstrap:

@import "./node_modules/bootstrap/scss/functions";
@import "./node_modules/bootstrap/scss/variables";

$primary: #690AD3; 

@import "./node_modules/bootstrap/scss/bootstrap";

This allows themeing your app‘s Bootstrap elements.

And that‘s it! You‘ve installed and configured Bootstrap in your Angular project via NPM. Let‘s now look at the CDN approach.

Option 2: Add Bootstrap via CDN

For quick prototyping or hackathon projects, linking to a CDN is an easy way to use Bootstrap. Let‘s see how it‘s done:

Step 1: Create a new Angular app

Just like before, generate a new app with the CLI:

ng new my-cdn-app

Then cd into the my-cdn-app directory.

Step 2: Link Bootstrap CDN

Open src/index.html, and in the <head> section add:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

This loads the Bootstrap CSS from a CDN.

Step 3: Add Bootstrap JS Bundle

Under the CSS link, add:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

This loads the required JS plugins.

Step 4: Use Bootstrap components

In your components, you can now use Bootstrap classes out of the box:

<!-- Button -->
<button class="btn btn-primary">My Button</button>

<!-- Card -->  
<div class="card">
  <div class="card-body">
    <p class="card-text">My card</p>
  </div>
</div>

No need to import anything. Bootstrap is globally available.

While simple, the CDN approach lacks customizability. Theming and overriding variables isn‘t possible.

So in summary:

• NPM – More control and customization
• CDN – Great for quick prototyping and projects where customization isn‘t needed

Choose the approach that best suits your app and development needs.

Integrating Bootstrap and Angular: Best Practices

Now that you know how to add Bootstrap to Angular, let‘s go over some best practices when integrating the two:

• Use Bootstrap‘s js bundle – Bootstrap depends on jQuery and Popper.js. The bundle contains these dependencies pre-configured to play nicely with Bootstrap.

• Take advantage of Bootstrap classes – Bootstrap has tons of UI components and utility classes. Get familiar with what‘s available to save time.

• Separate logic and presentation – Have Angular handle all data and logic. Use Bootstrap only for styling and layout.

• Customize thoughtfully – Tweak Bootstrap variables before importing to theme your app. Avoid overriding styles directly.

• Lazy load – Only import the Bootstrap modules you need for each component. Tree shake to optimize bundle size.

• Accessibility – Use proper ARIA roles, labels, alt text so UIs are accessible. Bootstrap provides a good foundation.

Keeping these best practices in mind will ensure your app is performant and scalable while looking great.

FAQs about using Bootstrap with Angular

Here are answers to some commonly asked questions about integrating Bootstrap in Angular projects:

Can you use Angular Material and Bootstrap together?

Yes, Angular Material and Bootstrap can be used together in the same project. However, you would not use both frameworks on the same component. Generally, you would pick one UI framework per component.

For example, you may build your navigation menu using Angular Material components and then display content using Bootstrap cards on the same page. The two libraries would not conflict with each other in this case.

What version of Bootstrap works with the latest Angular?

As of Angular 15, the latest stable Bootstrap version that works is Bootstrap 5.2. Older versions like Bootstrap 4 also work fine.

Always refer to the official Angular compatibility doc to check supported Bootstrap versions:

https://angular.io/guide/supported-versions

Can I use Bootstrap with Angular to build web apps, mobile apps, etc?

Yes! Bootstrap‘s responsive design allows building a huge variety of apps with Angular:

• Web apps and dashboards
• Mobile apps using frameworks like Ionic + Angular
• Marketing sites and blogs
• E-commerce sites
• Admin portals
• Custom enterprise apps

Basically any app that needs a clean, responsive UI can benefit from Bootstrap.

Is Angular built on TypeScript or JavaScript?

Angular is a JavaScript framework. However, starting from Angular 2, it is written in TypeScript.

TypeScript extends JavaScript by adding features like static typing. Your Angular app code can be written in plain JavaScript or TypeScript.

So in summary:

• Angular apps run as JavaScript
• Angular code can be written in TypeScript or JavaScript
• TypeScript adds benefits like static analysis to JavaScript

Angular + Bootstrap: What‘s Next?

Congratulations! You now know how to:

• Add Bootstrap to an Angular app via NPM or CDN
• Import and use Bootstrap components
• Customize Bootstrap theming
• Follow best practices for integrating Bootstrap and Angular

To recap, the key benefits of combining these two frameworks are:

• Faster frontend development with Bootstrap‘s large library of UI elements
• Building responsive, mobile-ready apps with Bootstrap
• Maintaining a consistent styling across your Angular app
• Leveraging two of the most popular web frameworks together

This opens up an entire world of possibility for the apps you can build!

Here are some suggestions for taking your Angular and Bootstrap skills even further:

• Check out detailed tutorials on using specific Bootstrap components
• Learn how to build complex UIs by combining multiple components
• Dive deeper into customizing Bootstrap by overriding Sass variables
• Look into add-on libraries like ng-bootstrap that make using Bootstrap even simpler in Angular
• Explore UI kits and templates that are pre-built using Angular and Bootstrap

With this solid foundation, you are now well-equipped to build powerful real-world web applications using Angular and Bootstrap.

So go forth and build something amazing!