So you're ready to start a new Angular project but... you want a UI library that offers a little more than Angular Material.

And I get it.

I mean, I'm a fan of Angular Material. I've written quite a bit about it on this site.

But let's face it, Bootstrap is more robust.

It's just plain pretty.

That's why I totally understand if you want to say goodbye to Angular Material and hello to Bootstrap.

In this guide, I'll show you how to integrate Bootstrap into your Angular project.

Note: this article is part of a series of tutorials on how to create an admin console using Angular and Bootstrap. Feel free to check out the whole thing if you want to follow from the beginning. Just remember that the articles are sorted by date in descending order so the first article is actually the last.

You can follow along here or take a look at the code on GitHub. 

Starting From Scratch

Let's start at the beginning. As in: the very beginning.

Head over to the root of where you store your projects and create a new Angular project:

ng new admin-console --style=scss

Yes, you're going to do this with SASS (just like the cool kids). That's why you see --style=scss in the command line.

Anyhoo, run that command. Go ahead and accept the defaults on any questions you get asked.

Then wait a little bit for Angular command line tool to do its magic. It's creating a brand new project.

Once that's done, switch to the admin-console directory.

Now let's sync up on versions.

I did this:

ng update @angular/cli @angular/core

That got me the latest CLI and Angular Core library as of this writing.

So if I run this command:

ng --version

I get this output:

Angular CLI: 12.2.6
Node: 14.15.3
Package Manager: npm 6.14.9
OS: win32 x64

You don't need to have those exact versions to follow along here. But if you're reading this article three years from now and I didn't update it, you might experience some challenges.

Test Test

Now let's make sure you've got a decent Angular project going. 

At the command line, enter the following:

ng serve

That's going to fire up your newly created Angular application so that it listens on the default port of 4200.

Once it's done loading everything (that will take a few seconds at least), go to your favorite browser and hit the following URL:

http://localhost:4200

And if you're doing that with the same version of the software that I'm using, you'll probably see this output:

 

And that's a good thing because that means you're up and running. Well done!

Bootstrappin'

Now let's get Bootstrap involved.

From that same location in your source tree (the /admin-console directory), enter the following command:

npm i bootstrap

That's going to install Bootstrap. Once again, wait a little bit for everything to finish.

But when it's finished, you're not finished.

You still need to tell Angular to use Bootstrap. And here's how you do that.

Use your favorite IDE (I'm using Microsoft Visual Studio) to edit src/styles.scss.

(Yes, that's the SASS thing.)

Now add this line in that file:

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

That's going to give you that glorious Bootstrap styling you're craving.

Save the file.

But Will It Fly?

You're wired up with Bootstrap now. But you gotta test just to make sure.

In your same favorite IDE, head over to src/app/app.component.html. You'll probably see a bunch of stuff in that file (it's the screen you saw earlier during the initial test). Go ahead and delete everything you see in there.

Yes, everything.

And replace it with this code:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="/">
      <img src="https://careydevelopment.us/img/branding/careydevelopment-logo-sm.png" />
    </a>
    <div class="collapse navbar-collapse" id="navbarContent">
      <ul class="navbar-nav mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/contact">Contact</a>
        </li>
      </ul>
      <ul class="navbar-nav ms-auto ">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Account</a>
          <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="/cookies">Login</a></li>
            <li><a class="dropdown-item" href="/tos">Register</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

That's gonna give us a cool Boostrap nav bar if everything went according to plan.

Don't worry if you don't understand everything going on in that code. For now, it's just a test to make sure the Bootstrap integration is working.

Save the file. Restart the application by going to the command line and doing this again:

ng serve

And, once again, go to your browser and load http://localhost:4200

Now you should see this at the top of the screen:

If you don't see that, then something went wrong. Go back through this article and see if you missed something.

If you do see that, then your Bootstrap integration is in good shape.

As you can see, it's a pleasant navigation bar that you might see on any online application. It's got the obligatory logo on the left-hand side and a couple of links next to it.

If you go to the far right of the screen, you can use the dropdown menu by just cl-

Wait.

Nothing happens when you click on the dropdown menu!

What's going on?!?

I'll tell you what's going on.

What's Going On

You've got the Bootstrap CSS in place but not the JavaScript library. You need the JavaScript library.

So start by going back to the command line and getting jQuery.

npm install jquery

Wait for that to finish.

Then go back to your source tree in your IDE and find angular.json in the root.

Within that JSON file, find "scripts". It's probably set to an empty array.

Make it look like this:

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

Now your application will load those JavaScript libraries.

Stop your application if you haven't done so already. Hitting Ctrl-C at the command line is a great way to do that.

(I always like to restart the application from the command line after making configuration changes.)

Then restart the application with the ng serve thing and once again reload http://localhost:4200 in your browser.

Now click on that dropdown menu on the right. You should see this:

Awesome. You have won the Internet.

Wrapping It Up

Welp, there you go. You've now got the start of an Angular project with Bootstrap.

Feel free to start putting some meat on the bones. Add modules, components, directives, and whatever else you want.

Have fun!

Photo by Tofros.com from Pexels