Component-based framework philosophy in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Bootstrap button component.

Bootsrap

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

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

Acard

Bcontainer

Cprimary

Drow

Attempts:

3 left

💡 Hint

Common Mistakes

Using layout classes like 'container' or 'row' instead of button style classes.

Forgetting the 'btn-' prefix.

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

2fill in blank

medium

Complete the code to create a Bootstrap card component with a header.

Bootsrap

<div class="card">
  <div class="card-[1]">Header</div>
  <div class="card-body">Content</div>
</div>

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

Aheader

Bfooter

Ctitle

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'card-title' which is for titles inside the body, not the header.

Using 'card-footer' which is for the footer section.

The class card-header creates a header section in a Bootstrap card.

3fill in blank

hard

Fix the error in the Bootstrap grid system code by completing the blank.

Bootsrap

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

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

Arow

B12

Cfluid

Dcontainer

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'fluid' which is for containers, not columns.

Using 'container' or 'row' which are layout classes, not column widths.

The class col-12 makes the column span the full width of the row in Bootstrap's grid.

4fill in blank

hard

Fill both blanks to create a responsive Bootstrap navbar with a brand and toggle button.

Bootsrap

<nav class="navbar navbar-expand-[1] navbar-light bg-light">
  <a class="navbar-[2]" href="#">Brand</a>
</nav>

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

Alg

Bbrand

Csm

Dcontainer

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'container' instead of a breakpoint for expand.

Using 'container' or 'sm' for the brand class.

navbar-expand-lg makes the navbar expand on large screens.
navbar-brand styles the brand link.

5fill in blank

hard

Fill all three blanks to create a Bootstrap modal with a header, body, and footer.

Bootsrap

<div class="modal fade" id="exampleModal" tabindex="-1" aria-[1]="true" aria-labelledby="exampleModalLabel" aria-hidden="[2]">
  <div class="modal-[3]">
    <div class="modal-content">
      <div class="modal-header">Header</div>
      <div class="modal-body">Body content</div>
      <div class="modal-footer">Footer</div>
    </div>
  </div>
</div>

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

Alabel

Bfalse

Cmodal-dialog

Dmodal-hidden

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect ARIA attribute names.

Confusing modal-dialog with modal-content.

The attribute aria-label describes the modal for screen readers.
aria-hidden="false" means the modal is visible.
modal-dialog is the container for the modal content.