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.

Practice

1. What is the main idea behind a component-based framework like Bootstrap?

easy

A. Avoiding any reusable code

B. Breaking a webpage into small, reusable parts

C. Using only JavaScript for styling

D. Writing all styles in one big CSS file

Solution

1. Step 1: Understand the concept of components

   Components are small parts that can be reused to build a webpage easily.

2. Step 2: Compare options with this idea

   Only Breaking a webpage into small, reusable parts describes breaking a webpage into reusable parts, which matches the component philosophy.

3. Final Answer:

   Breaking a webpage into small, reusable parts -> Option B

4. Quick Check:

   Component-based = reusable parts [OK]

Hint: Components mean reusable parts of a webpage [OK]

Common Mistakes:

• Thinking components mean writing all styles in one file
• Confusing components with JavaScript-only code
• Believing components avoid reuse

2. Which of the following is a correct way to use a Bootstrap button component in HTML?

easy

A. Click me

B. Click me

C. Click me

D. Click me

Solution

1. Step 1: Recall Bootstrap button syntax

   Bootstrap buttons use the btn class plus a style class like btn-primary.

2. Step 2: Check each option for correct classes and tags

   <button class="btn btn-primary">Click me</button> uses <button> with btn btn-primary, which is correct. Others use wrong classes or tags.

3. Final Answer:

   <button class="btn btn-primary">Click me</button> -> Option D

4. Quick Check:

   Bootstrap buttons need btn + style class [OK]

Hint: Bootstrap buttons always use class 'btn' plus style [OK]

Common Mistakes:

• Using incorrect class names like 'button-primary'
• Using invalid HTML tags like <btn>
• Swapping class order or missing 'btn'

3. What will be the visual result of this Bootstrap code?

<div class="alert alert-success" role="alert">Success!</div>

medium

A. A green box with the text 'Success!'

B. A red box with the text 'Success!'

C. Plain text 'Success!' with no box

D. A blue box with the text 'Success!'

Solution

1. Step 1: Identify the Bootstrap classes used

   The classes alert and alert-success create a styled alert box with green color.

2. Step 2: Understand the visual meaning

   alert-success means a green alert box showing success message.

3. Final Answer:

   A green box with the text 'Success!' -> Option A

4. Quick Check:

   alert-success = green alert box [OK]

Hint: alert-success always shows a green alert box [OK]

Common Mistakes:

• Confusing alert-success with alert-danger (red)
• Expecting no box or plain text
• Mixing up alert colors

4. Identify the error in this Bootstrap navbar code:

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav">
      <span class="navbar-toggler-icon"></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>

medium

A. Incorrect class name for navbar-brand

B. Missing data-bs-toggle attribute on button

C. Missing aria-controls attribute on button

D. Missing id on collapse div

Solution

1. Step 1: Check button attributes for toggling navbar

   The button has data-bs-toggle and data-bs-target, but lacks aria-controls which is needed for accessibility.

2. Step 2: Verify other attributes and classes

   Classes and id are correct; only aria-controls is missing on the button.

3. Final Answer:

   Missing aria-controls attribute on button -> Option C

4. Quick Check:

   Navbar toggle needs aria-controls for accessibility [OK]

Hint: Navbar toggler button needs aria-controls attribute [OK]

Common Mistakes:

• Ignoring accessibility attributes
• Thinking data-bs-toggle is missing
• Confusing id and class names

5. You want to create a reusable Bootstrap card component that shows a title and text. Which approach best follows the component-based philosophy?

hard

A. Use Bootstrap card classes and create a reusable template or component in your code

B. Create a custom CSS class and write card HTML manually each time

C. Write the card HTML once and copy-paste it everywhere

D. Avoid using Bootstrap and write all styles inline

Solution

1. Step 1: Understand component-based philosophy

   It encourages reusable parts that can be used multiple times without rewriting code.

2. Step 2: Evaluate options for reusability and Bootstrap usage

   Use Bootstrap card classes and create a reusable template or component in your code uses Bootstrap classes and creates a reusable template/component, which is best practice.

3. Final Answer:

   Use Bootstrap card classes and create a reusable template or component in your code -> Option A

4. Quick Check:

   Reusable templates + Bootstrap classes = best practice [OK]

Hint: Reuse Bootstrap classes with templates/components [OK]

Common Mistakes:

• Copy-pasting code instead of reusing components
• Writing custom CSS unnecessarily
• Avoiding Bootstrap and inline styles