Modal components are great ways to draw your user's attention to things by using them for creating lightboxes, user notifications, and more. I like to use them for popping up forms for users to add items and edit them as well, directly from the page that lists those items. This way, all the functionality (that is, view, add, edit, and delete) for a listing of items is all done on one page. Using the modal component in this way leads to a clean design that is intuitive to users. 

As with the Navbar component, showing examples here is not the best way to demonstrate modals. Rather than show contrived examples, I will show you through code (by referencing the code listings at the appropriate time) how we'll achieve creating the modal forms shown in the following wireframes. When you take a look at the wireframes, you'll see that I've used modals quite generously throughout the pages. I've even used them for the login and the sign-up functionality of the site.

There are several demos on Bootstrap's modal component that you can check out here: https://getbootstrap.com/docs/4.0/components/modal/

We've only covered four commonly used components that Bootstrap offers, but they are enough for us to get a glimpse of what can be done with pre-defined components. There are many other components that can be used, and you can find them on the official Bootstrap website here: https://getbootstrap.com/docs/4.0/components/

Again, we're not covering all of Bootstrap's components because the official documentation has done that job already — and has done it well. Additionally, we'll be using NG Bootstrap components, Angular Material components, and custom components that we'll be creating together in later chapters.