Why Bootstrap exists - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to include Bootstrap CSS in your HTML file.

Bootsrap

<link rel="stylesheet" href="[1]">

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

Astyles.css

Bhttps://example.com/style.css

Cbootstrap.js

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

Attempts:

3 left

💡 Hint

Common Mistakes

Using a local CSS file that doesn't have Bootstrap styles.

Linking to a JavaScript file instead of CSS.

Bootstrap CSS is loaded from a CDN link to apply its styles to your page.

2fill in blank

medium

Complete the code to add a Bootstrap button with primary style.

Bootsrap

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

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

Abtn-primary

Bbtn-link

Cbtn-danger

Dbtn-secondary

Attempts:

3 left

💡 Hint

Common Mistakes

Using a button class that does not exist or is for a different style.

Forgetting to include the base btn class.

The class btn-primary styles the button with Bootstrap's primary color.

3fill in blank

hard

Fix the error in the Bootstrap grid code by completing the missing class.

Bootsrap

<div class="container">
  <div class="row">
    <div class="[1]">Content</div>
  </div>
</div>

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

Arow-12

Bgrid-12

Ccol-12

Dcontainer-12

Attempts:

3 left

💡 Hint

Common Mistakes

Using row-12 which is not a valid column class.

Confusing container and column classes.

The correct Bootstrap grid class for a full-width column is col-12.

4fill in blank

hard

Fill in the blank to create a responsive Bootstrap navbar that collapses on small screens.

Bootsrap

<nav class="navbar navbar-expand-[1] bg-light">
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <!-- Navbar content -->
  </div>
</nav>

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

Alg

Bsm

Cmd

Dxl

Attempts:

3 left

💡 Hint

Common Mistakes

Using a breakpoint like sm which expands too early on small screens.

Using invalid breakpoint names.

The navbar expands on large screens using navbar-expand-lg, making it collapse (with toggler) on small screens.

5fill in blank

hard

Fill all three blanks to create a Bootstrap card with a header, body text, and a button.

Bootsrap

<div class="card" style="width: 18rem;">
  <div class="card-[1]">Card Header</div>
  <div class="card-[2]">
    <p class="card-text">Some quick example text.</p>
    <a href="#" class="btn btn-[3]">Go somewhere</a>
  </div>
</div>

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

Aheader

Bbody

Cprimary

Dfooter

Attempts:

3 left

💡 Hint

Common Mistakes

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

Forgetting the btn class on the button.

The card header uses card-header, the body uses card-body, and the button uses the btn-primary style.