Adding toast components to product-related actions
Now we will add toast components that are triggered by different product-related actions, for example, when clicking on the action buttons in the footer of the product cards on the Home, Shop, Cart, Product, and Wishlist pages.
Before creating the individual toast components, we will add a toast container to each of the previously mentioned pages, located just after the opening <body> tag and before the <header> tag. We will use the following code:
<div class="toast-container position-fixed end-0 mt-3 me-3"></div>
Now, we have a problem the toast container won’t be properly positioned along the z axis of our layout. Other components on the page will be placed on top, which we don’t want. This is the case for the navbar, button group, and dropdown components. We will fix this issue by using one of the following Bootstrap 5 z-index variables in our custom style sheet:
bootstrap...
