Component-based framework philosophy in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the main benefit of using components in Bootstrap?

Bootstrap uses components like buttons, cards, and navbars. What is the main benefit of using these components in your web page?

A They force you to write all CSS from scratch.

B They let you reuse code easily and keep your page organized.

C They make your page load slower because of extra code.

D They only work on mobile devices, not desktop.

💡 Hint

Think about how components help when building many parts of a page.

Components in Bootstrap are reusable pieces of code. They help keep your page organized and save time by not rewriting the same styles or HTML repeatedly.

📝 Syntax

intermediate

Which Bootstrap class creates a responsive navigation bar?

You want to add a navigation bar that adjusts to screen size. Which class should you add to the

element?

A navbar-expand-lg

B container-fluid

C text-center

D btn-primary

💡 Hint

Look for the class that controls navbar expansion on large screens.

The navbar-expand-lg class makes the navbar expand on large screens and collapse on smaller ones, making it responsive.

❓ layout

advanced

How does Bootstrap's grid system help with component layout?

Bootstrap uses a grid system with rows and columns. How does this system help when placing components on a page?

A It forces all components to be the same size regardless of content.

B It disables responsiveness and fixes component positions.

C It divides the page into flexible columns so components align nicely on all screen sizes.

D It only works with images, not other components.

💡 Hint

Think about how columns adjust on phones vs desktops.

The grid system divides the page into 12 columns that resize based on screen size. This helps components line up neatly and stay responsive.

❓ accessibility

advanced

Which attribute improves accessibility for Bootstrap modals?

Bootstrap modals should be accessible to all users. Which attribute helps screen readers identify the modal dialog?

A tabindex="-1"

B data-toggle

C class="modal-content"

D aria-labelledby

💡 Hint

Look for an attribute that links the modal to its title for screen readers.

The aria-labelledby attribute points to the modal's title element, helping screen readers announce the dialog properly.

❓ rendering

expert

What will be the visual result of this Bootstrap button code?

Consider this HTML code:

<button type="button" class="btn btn-danger btn-lg">Delete</button>

What will the button look like when rendered in a browser?

A A large red button with white text labeled 'Delete'.

B A small blue button with black text labeled 'Delete'.

C A large green button with white text labeled 'Delete'.

D A plain button with default browser style labeled 'Delete'.

💡 Hint

Check the meaning of the classes btn-danger and btn-lg.

The class btn-danger makes the button red, and btn-lg makes it large. The text color is white by default on danger buttons.

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