Why staying current matters in Bootsrap - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to include the Bootstrap CSS link in the HTML head.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="[1]" rel="stylesheet">
  <title>Bootstrap Example</title>
</head>
<body>
  <h1 class="text-primary">Hello, Bootstrap!</h1>
</body>
</html>

Drag options to blanks, or click blank then click option'

Ahttps://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css

Bhttps://example.com/style.css

Cbootstrap.css

Dstyle.min.css

Attempts:

3 left

💡 Hint

Common Mistakes

Using a local or incorrect CSS file instead of the official Bootstrap CDN link.

Forgetting to include the rel="stylesheet" attribute.

The correct Bootstrap CSS link is the official CDN URL to load Bootstrap styles.

2fill in blank

medium

Complete the code to add a responsive Bootstrap button with primary color.

Bootsrap

<button type="button" class="btn [1]">Click me</button>

Drag options to blanks, or click blank then click option'

Abtn-success

Bbtn-secondary

Cbtn-danger

Dbtn-primary

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different button color class than primary.

Omitting the btn base class.

The class btn-primary gives the button the primary blue color in Bootstrap.

3fill in blank

hard

Fix the error in the Bootstrap grid code to make columns responsive.

Bootsrap

<div class="container">
  <div class="row">
    <div class="[1]">Column 1</div>
    <div class="col-md-6">Column 2</div>
  </div>
</div>

Drag options to blanks, or click blank then click option'

Acol-md-6

Bcol-12

Ccol-sm-3

Dcol-lg-4

Attempts:

3 left

💡 Hint

Common Mistakes

Using different column widths that don't add up to 12.

Using classes that don't match the other column's breakpoint.

Using col-md-6 for both columns ensures they share the row equally on medium screens and above.

4fill in blank

hard

Fill both blanks to create a Bootstrap card with a header and body text.

Bootsrap

<div class="card" style="width: 18rem;">
  <div class="[1]">Card Header</div>
  <div class="[2]">This is some text inside the card body.</div>
</div>

Drag options to blanks, or click blank then click option'

Acard-header

Bcard-footer

Ccard-body

Dcard-title

Attempts:

3 left

💡 Hint

Common Mistakes

Using card-footer instead of card-header for the header.

Using card-title instead of card-body for the content.

The card-header class styles the header area, and card-body styles the main content area of the card.

5fill in blank

hard

Fill all three blanks to create a responsive navbar with a brand name and toggle button.

Bootsrap

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">[1]</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="[2]" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="[3]"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Drag options to blanks, or click blank then click option'

AMySite

Bcollapse

Cnavbar-toggler-icon

Dnavbar-brand

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect toggle data attribute values.

Forgetting the icon class for the toggle button.

Putting the brand name in the wrong element.

The brand name is set as 'MySite'. The toggle button uses data-bs-toggle="collapse" to control the menu. The icon uses the class navbar-toggler-icon.

Practice

1. Why is it important to keep Bootstrap updated on your website?

easy

A. To ensure your site looks modern and works well on all devices

B. Because older versions load faster

C. To make your website use less memory

D. Because updates remove all images automatically

Solution

1. Step 1: Understand Bootstrap updates purpose

   Bootstrap updates improve design and fix bugs to keep sites modern and functional.

2. Step 2: Compare options with update benefits

   Only To ensure your site looks modern and works well on all devices matches the real benefits of updates; others are incorrect or unrelated.

3. Final Answer:

   To ensure your site looks modern and works well on all devices -> Option A

4. Quick Check:

   Bootstrap updates = modern look and compatibility [OK]

Hint: Updates keep your site fresh and bug-free [OK]

Common Mistakes:

• Thinking updates slow down the site
• Believing updates remove content
• Assuming updates reduce memory use

2. Which of these is the correct way to include the latest Bootstrap CSS from a CDN in your HTML?

easy

A. <style src='https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css'></style>

B. <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css' rel='stylesheet' />

C. <link href='bootstrap.css'>

D. <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css'></script>

Solution

1. Step 1: Identify correct HTML tag for CSS

   The <link> tag with rel='stylesheet' is used to include CSS files.

2. Step 2: Check the CDN URL and tag usage

   <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css' rel='stylesheet' /> uses <link> correctly with the Bootstrap CSS CDN URL; others misuse tags or attributes.

3. Final Answer:

   <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css' rel='stylesheet' /> -> Option B

4. Quick Check:

   CSS files use <link rel='stylesheet'> [OK]

Hint: Use <link rel='stylesheet'> for CSS CDN links [OK]

Common Mistakes:

• Using <script> tag for CSS files
• Omitting rel='stylesheet' attribute
• Using <style> tag with src attribute

3. What will happen if you use an outdated Bootstrap version on a new browser with modern features?

medium

A. The browser will block the site from loading

B. The site will automatically update Bootstrap to the latest version

C. Your site may not display new Bootstrap components correctly

D. Your site will load faster because old code is simpler

Solution

1. Step 1: Understand Bootstrap version compatibility

   Older Bootstrap versions lack support for new features and components introduced later.

2. Step 2: Analyze browser behavior with outdated Bootstrap

   Browsers do not update Bootstrap automatically; outdated code may cause display issues.

3. Final Answer:

   Your site may not display new Bootstrap components correctly -> Option C

4. Quick Check:

   Old Bootstrap = possible display issues [OK]

Hint: Old Bootstrap may break new features [OK]

Common Mistakes:

• Thinking browsers auto-update Bootstrap
• Assuming old code always loads faster
• Believing browsers block outdated sites

4. You included Bootstrap 4 CSS but used Bootstrap 5 classes in your HTML. What is the likely problem?

medium

A. The page will crash and not load at all

B. Bootstrap 4 will automatically support Bootstrap 5 classes

C. Bootstrap 5 classes will override Bootstrap 4 styles perfectly

D. Some styles won't apply because class names changed between versions

Solution

1. Step 1: Recognize version differences in class names

   Bootstrap 5 introduced new or changed class names that Bootstrap 4 CSS does not recognize.

2. Step 2: Understand CSS application behavior

   Using Bootstrap 5 classes with Bootstrap 4 CSS means styles for those classes won't be found or applied.

3. Final Answer:

   Some styles won't apply because class names changed between versions -> Option D

4. Quick Check:

   Version mismatch = missing styles [OK]

Hint: Match Bootstrap CSS version with your HTML classes [OK]

Common Mistakes:

• Assuming older CSS supports newer classes
• Expecting page to crash on version mismatch
• Believing newer classes override older CSS automatically

5. You want to use Bootstrap's new utility classes introduced in version 5.3 but your project uses version 4.6. What is the best way to fix this?

hard

A. Update your Bootstrap files to version 5.3 to access new utilities

B. Add the new utility classes manually in your CSS without updating Bootstrap

C. Ignore the new utilities and keep using version 4.6

D. Use JavaScript to simulate the new utility classes

Solution

1. Step 1: Identify the source of new utilities

   New utility classes come from updated Bootstrap CSS files starting version 5.3.

2. Step 2: Choose the proper way to get new features

   Updating Bootstrap ensures all new classes and fixes are included properly without manual errors.

3. Final Answer:

   Update your Bootstrap files to version 5.3 to access new utilities -> Option A

4. Quick Check:

   Update Bootstrap for new features [OK]

Hint: Update Bootstrap version to get new features safely [OK]

Common Mistakes:

• Trying to add new classes manually without update
• Ignoring updates and missing features
• Using JavaScript to mimic CSS utilities