Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lære Challenge & Quiz: Mastering Advanced Bootstrap Features | Advanced Concepts
Bootstrap Essentials for Modern Websites

book
Challenge & Quiz: Mastering Advanced Bootstrap Features

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.
html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Challenge 3</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<div class="container py-1">
<!-- Button trigger modal -->
<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#productModal"
>
View Product
</button>

<!-- Modal -->
<!-- Step 1: Create Modal Structure -->
<div
class="________ fade"
id="productModal"
tabindex="-1"
aria-labelledby="productModalLabel"
aria-hidden="true"
>
<!-- Step 1: Create Modal Structure -->
<div class="________ ________ modal-lg">
<!-- Step 1: Create Modal Structure -->
<div 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.
html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Challenge 3</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<div class="container py-1">
<!-- Button trigger modal -->
<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#productModal"
>
View Product
</button>

<!-- Modal -->
<!-- Step 1: Create Modal Structure -->
<div
class="modal fade"
id="productModal"
tabindex="-1"
aria-labelledby="productModalLabel"
aria-hidden="true"
>
<!-- Step 1: Create Modal Structure -->
<div class="modal-dialog modal-dialog-centered modal-lg">
<!-- Step 1: Create Modal Structure -->
<div class="modal-content">

1. What is the primary purpose of Bootstrap's Navbars?

2. What class should be used to create a basic navbar structure?

3. What class should be applied to images to make them responsive?

4. What additional classes can be used for styling images as thumbnails?

5. Which Bootstrap component is suitable for showcasing articles, user profiles, and products in a structured way?

6. Which Bootstrap component is used to create interactive image sliders?

7. What class should be applied to the container element of a carousel?

question mark

What is the primary purpose of Bootstrap's Navbars?

Select the correct answer

question mark

What class should be used to create a basic navbar structure?

Select the correct answer

question mark

What class should be applied to images to make them responsive?

Select the correct answer

question mark

What additional classes can be used for styling images as thumbnails?

Select the correct answer

question mark

Which Bootstrap component is suitable for showcasing articles, user profiles, and products in a structured way?

Select the correct answer

question mark

Which Bootstrap component is used to create interactive image sliders?

Select the correct answer

question mark

What class should be applied to the container element of a carousel?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 4. Kapittel 6
some-alt