Why Bootstrap exists - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why was Bootstrap created?

What is the main reason Bootstrap was created?

A To replace HTML and CSS with a new programming language

B To make websites load slower by adding extra code

C To only support desktop browsers and ignore mobile devices

D To help developers quickly build responsive and consistent websites without writing all CSS from scratch

💡 Hint

Think about how Bootstrap helps with design and layout across different devices.

Bootstrap was created to provide ready-made styles and components that work well on all screen sizes, saving time and effort for developers.

🧠 Conceptual

intermediate

What problem does Bootstrap solve?

Which problem does Bootstrap mainly solve for web developers?

A It solves the problem of inconsistent styling and layout across different browsers and devices

B It solves the problem of slow internet connections by compressing images automatically

C It solves the problem of writing backend server code

D It solves the problem of creating databases for websites

💡 Hint

Bootstrap focuses on how things look and behave on different screens.

Different browsers and devices can show websites differently. Bootstrap provides a common style and layout system to keep websites consistent everywhere.

📝 Syntax

advanced

Bootstrap grid usage

What is the correct way to create a responsive 3-column layout using Bootstrap's grid system?

Bootsrap

<div class="container">
  <div class="row">
    <!-- Columns here -->
  </div>
</div>

A <div class="col-4">Column 1</div><div class="col-4">Column 2</div><div class="col-4">Column 3</div>

B <div class="col-12">Column 1</div><div class="col-12">Column 2</div><div class="col-12">Column 3</div>

C <div class="col-6">Column 1</div><div class="col-6">Column 2</div><div class="col-6">Column 3</div>

D <div class="col-3">Column 1</div><div class="col-3">Column 2</div><div class="col-3">Column 3</div>

💡 Hint

Bootstrap grid columns add up to 12 units per row.

Bootstrap's grid system divides the row into 12 parts. To have 3 equal columns, each should take 4 units (12/3=4).

❓ accessibility

advanced

Bootstrap and accessibility

Which Bootstrap feature helps improve accessibility for screen readers?

A Adding background images to buttons for decoration

B Automatically translating text into multiple languages

C Using ARIA roles and labels in components like modals and alerts

D Disabling keyboard navigation by default

💡 Hint

Accessibility means helping people who use screen readers or keyboards.

Bootstrap components include ARIA attributes that describe their roles and states to assistive technologies, improving accessibility.

❓ rendering

expert

Bootstrap responsive behavior

What will happen if you use the class "col-md-6 col-lg-4" on a div inside a Bootstrap row?

A The div will always take full width regardless of screen size

B The div will take half the row width on medium screens and one-third on large screens

C The div will take one-third width on medium screens and half on large screens

D The div will be hidden on medium and large screens

💡 Hint

Remember Bootstrap grid classes apply from the specified breakpoint and up.

The class col-md-6 means the div uses 6 units (half) on medium screens and larger, but col-lg-4 overrides it on large screens to 4 units (one-third).