Challenge & Quiz

Task: Creating a Bootstrap Modal

Create a Bootstrap modal window component that displays product details. Follow the steps provided in the initial code to fill in the missing Bootstrap classes and complete the modal structure.

• Step 1: Create modal structure.
  • Apply the modal class to the outermost container;
  • Use the modal-dialog class for the dialog box;
  • Add the modal-content class for the content area;
  • Ensure the modal is centered vertically within the viewport by applying the modal-dialog-centered class to the modal-dialog container;
  • Use the modal-title class for the title element (<h5>);
  • Apply the btn-close class to the close button within the modal header.
• Step 2: Add Product Details.
  • Insert the product image within the modal body and ensure it scales appropriately using the img-fluid class;
  • Display the product title using an appropriate heading tag (<h6>) and apply the modal-title class;
  • Provide a brief product description using a paragraph element (<p>) and apply the modal-text class.

1. Utilize Bootstrap's modal component classes to create the modal structure:
   • Use modal class for the outermost container;
   • Use modal-dialog class for the dialog box;
   • Use modal-content class for the content area.
2. Center the modal vertically within the viewport using the modal-dialog-centered class applied to the modal-dialog container.
3. Ensure the modal title is appropriately styled by applying the modal-title class to the title element (<h5>).
4. Utilize the btn-close class for the close button within the modal header to ensure consistent styling and functionality.
5. Customize the modal size by applying one of the size classes (modal-lg, modal-xl, etc.) to the modal-dialog container.