Angular Material vs Bootstrap - Which one should you use?


Today we're going to talk about Angular Material versus Bootstrap.

Which one should you use?

⚠️ Spoiler Alert ⚠️

Maybe you could use both?

Let's start by talking about Angular Bootstrap.

What is Bootstrap?

Bootstrap is one of the most popular UI libraries in the world.

Initially it was about the only real good CSS library option out there.

It was definitely the CSS library that sparked the CSS library revolution and options we have now.

Tailwind CSS I'm looking at you.

👀 👀 👀

Bootstrap was a CSS library that prioritized mobile friendliness.

It has a built-in grid components and utilities which is based off of the CSS flexbox.

So how does it work?

We start with what we call a container. And inside the container we can have columns and rows.

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

Will look like this.

bootstrap-grid-system

Beyond Bootstraps grid and layout options there are all kinds of built-in components, forms, helpers and utilities to help you build fantastic Angular apps.

Angular Material

Now, Angular Material is a bit different.

Unlike Bootstrap the actual Angular Material components are built with Angular.

It's an Angular platform built with Angular for Angular.

So it fits really well within the Angular platform and implements Google's Material Design system.

Since it's done by the Angular team that means with each new release of Angular you also get a new release of the Material library.

And why use it?

The Angular Material library comes built in with a host of awesome components like Angular Material forms which allow for easy form validation with mat-error.

And there are buttons and dialogs and all kinds of great components.

Plus you can build custom app themes with Angular Material. And use your own color scheme to style the Angular Material components.

You also have the CDK which is the component dev kit to be used to develop your own custom components with scrolling, drag-n-drop and data tables and more.

So, Bootstrap vs Angular Material, what should you use?

So now that you're aware of some of the differences you may think that Bootstrap is better because of the layout options.

But the things that are great with Bootstrap are not great with Angular Material.

And the things that are great with Angular Material are not so great with Bootstrap.

For example, you don't have CSS grids and containers with only Angular Material.

And if you're like me, you want to ship fast...

What you can do is just use both. Combine the Bootstrap and Angular Material features to build the app you want.

The setup is simple.

You'll import the Bootstrap dependencies into your index.html file.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Angular Material + Bootstrap Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  </head>
  <body>
    <app-root />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>

And then install Angular Material.

ng add @angular/material

And you're ready to roll!

Angular Material is an awesome library. And by adding Bootstrap we can build beautiful Angular apps.

Have a bunch of Angular fun!

signature