When to use Bootstrap vs alternatives - Practice Questions

Challenge - 5 Problems

🧠 Conceptual

intermediate

When is Bootstrap the best choice for a project?

Which scenario best describes when you should choose Bootstrap over other CSS frameworks?

A You need a quick, responsive design with many pre-built components and consistent styling.

B You want to use a CSS framework that only supports grid layout without components.

C Your project requires a unique design system with no reliance on external styles.

D You want a minimal CSS footprint and prefer to write all styles from scratch.

💡 Hint

Think about Bootstrap's strengths in speed and ready-made components.

Bootstrap is great when you want to build a responsive site quickly using many ready-made components and consistent styles.

🧠 Conceptual

intermediate

Why might you choose Tailwind CSS over Bootstrap?

Which reason best explains why a developer might prefer Tailwind CSS instead of Bootstrap?

A They prefer a framework that automatically styles all HTML elements with default themes.

B They want a large set of pre-built UI components ready to use.

C They want to write custom styles using utility classes for full design control.

D They want a framework that only supports JavaScript components without CSS.

💡 Hint

Tailwind focuses on utility classes rather than pre-built components.

Tailwind CSS gives developers full control by using utility classes to build custom designs, unlike Bootstrap's pre-built components.

📝 Syntax

advanced

What error occurs when using Bootstrap classes without including its CSS file?

Consider this HTML snippet using Bootstrap classes but missing the Bootstrap CSS link. What will happen when rendered in a browser?

Bootsrap

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

A The button appears with default browser styles, no Bootstrap styling applied.

B The button shows Bootstrap styles but JavaScript components fail to work.

C The browser throws a syntax error and does not render the button.

D The button is hidden because Bootstrap CSS is missing.

💡 Hint

Think about what CSS does and what happens if it is missing.

Without the Bootstrap CSS file, the classes have no styles, so the button looks like a normal HTML button with default browser styles.

❓ layout

advanced

How does Bootstrap's grid system differ from CSS Grid or Flexbox alone?

Which statement correctly describes Bootstrap's grid system compared to using CSS Grid or Flexbox directly?

A Bootstrap grid is a JavaScript library that replaces CSS Grid and Flexbox.

B Bootstrap grid uses predefined classes to create responsive layouts quickly, while CSS Grid/Flexbox require manual CSS coding.

C Bootstrap grid only works on desktop screens and ignores mobile layouts.

D Bootstrap grid automatically generates CSS Grid code without developer input.

💡 Hint

Bootstrap provides ready classes for layout, CSS Grid and Flexbox are CSS techniques.

Bootstrap grid offers easy-to-use classes for responsive layouts, saving time compared to writing CSS Grid or Flexbox code manually.

❓ accessibility

expert

Which Bootstrap feature helps improve accessibility automatically?

Bootstrap includes some built-in accessibility features. Which one is true about Bootstrap's accessibility support?

A Bootstrap requires developers to add all accessibility features manually with no defaults.

B Bootstrap disables all ARIA attributes to simplify HTML.

C Bootstrap only supports accessibility on mobile devices, not desktop.

D Bootstrap components include ARIA roles and keyboard navigation support by default.

💡 Hint

Bootstrap aims to help developers build accessible sites with minimal extra work.

Bootstrap components come with ARIA roles and keyboard support built-in to improve accessibility out of the box.

Practice

1. When is it best to choose Bootstrap for a web project?

easy

A. When you need a completely custom design from scratch

B. When you want to avoid using any CSS framework

C. When you want quick styling with ready-made components

D. When you only need to write plain HTML without styles

Solution

1. Step 1: Understand Bootstrap's purpose

   Bootstrap provides pre-built styles and components to speed up design.

2. Step 2: Match project needs

   If you want fast styling with many components, Bootstrap fits well.

3. Final Answer:

   When you want quick styling with ready-made components -> Option C

4. Quick Check:

   Bootstrap = fast styling with components [OK]

Hint: Bootstrap = fast + ready components for styling [OK]

Common Mistakes:

• Thinking Bootstrap is best for fully custom designs
• Believing Bootstrap means no CSS at all
• Confusing Bootstrap with plain HTML only

2. Which of the following is the correct way to include Bootstrap CSS in your HTML?

easy

A. <link href="bootstrap.js" rel="stylesheet">

B. <script src="bootstrap.css"></script>

C. <style src="bootstrap.css"></style>

D. <link rel="stylesheet" href="bootstrap.css">

Solution

1. Step 1: Identify correct HTML tag for CSS

   CSS files are linked using <link> with rel="stylesheet" attribute.

2. Step 2: Check correct file and tag usage

   Bootstrap CSS file should be linked with <link rel="stylesheet" href="bootstrap.css">.

3. Final Answer:

   <link rel="stylesheet" href="bootstrap.css"> -> Option D

4. Quick Check:

   CSS uses <link rel="stylesheet"> [OK]

Hint: CSS files use <link rel="stylesheet"> tag [OK]

Common Mistakes:

• Using <script> tag for CSS files
• Using <style> tag with src attribute
• Linking JavaScript file as stylesheet

3. What will happen if you use Bootstrap for a project but want a very unique design different from Bootstrap's style?

medium

A. You can easily override Bootstrap styles but it may take extra work

B. Bootstrap will automatically change to your unique design

C. Bootstrap prevents any style changes to keep consistency

D. Your project will not load Bootstrap CSS at all

Solution

1. Step 1: Understand Bootstrap's flexibility

   Bootstrap styles can be overridden by custom CSS but requires effort.

2. Step 2: Evaluate automatic style changes

   Bootstrap does not auto-change styles; customization is manual.

3. Final Answer:

   You can easily override Bootstrap styles but it may take extra work -> Option A

4. Quick Check:

   Bootstrap styles override possible but manual [OK]

Hint: Bootstrap styles can be overridden manually [OK]

Common Mistakes:

• Thinking Bootstrap auto-adapts to unique designs
• Believing Bootstrap blocks style changes
• Assuming Bootstrap CSS won't load if customized

4. You want to use Bootstrap but your page looks unstyled. Which is the most likely cause?

medium

A. You used Bootstrap classes but your browser does not support CSS

B. You forgot to include the Bootstrap CSS file in your HTML

C. You included Bootstrap JavaScript but not CSS

D. You wrote Bootstrap classes incorrectly but CSS is included

Solution

1. Step 1: Check Bootstrap CSS inclusion

   If Bootstrap CSS is missing, styles won't apply and page looks plain.

2. Step 2: Consider other causes

   Incorrect classes or missing JS won't cause complete lack of styles; browser support is almost universal.

3. Final Answer:

   You forgot to include the Bootstrap CSS file in your HTML -> Option B

4. Quick Check:

   Missing CSS file = no styles [OK]

Hint: No styles? Check Bootstrap CSS link first [OK]

Common Mistakes:

• Assuming JavaScript controls styles
• Blaming browser CSS support
• Ignoring missing CSS file link

5. You want a project with a unique style and minimal CSS file size. Which approach is best?

hard

A. Use a lightweight alternative or write custom CSS from scratch

B. Use Bootstrap and override many styles with custom CSS

C. Use Bootstrap's full CSS and JavaScript without changes

D. Avoid any CSS framework and use inline styles everywhere

Solution

1. Step 1: Analyze project needs

   Unique style and small CSS size require minimal framework overhead.

2. Step 2: Compare Bootstrap vs alternatives

   Bootstrap is large and overriding many styles increases CSS size; lightweight alternatives or custom CSS reduce size.

3. Step 3: Evaluate other options

   Using full Bootstrap or inline styles increases size or reduces maintainability.

4. Final Answer:

   Use a lightweight alternative or write custom CSS from scratch -> Option A

5. Quick Check:

   Unique + small size = lightweight/custom CSS [OK]

Hint: Unique style + small size = lightweight or custom CSS [OK]

Common Mistakes:

• Choosing Bootstrap then overriding many styles
• Using full Bootstrap without changes
• Using inline styles for all elements