Bootstrap vs Tailwind comparison - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to include the Bootstrap CSS file using a CDN link.

Bootsrap

<link rel="stylesheet" href="[1]">

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

Ahttps://example.com/style.css

Bhttps://cdn.tailwindcss.com

Cstyles.css

Dhttps://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css

Attempts:

3 left

💡 Hint

Common Mistakes

Using the Tailwind CDN link instead of Bootstrap's.

Using a local file name without the Bootstrap CSS.

Using an unrelated CSS file URL.

This link loads the official Bootstrap 5.3 CSS from a CDN, enabling Bootstrap styles in your page.

2fill in blank

medium

Complete the code to add a Tailwind CSS utility class that makes text bold.

Bootsrap

<p class="[1]">This text is bold.</p>

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

Afont-bold

Btext-italic

Cfont-light

Dtext-normal

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'font-light' which makes text lighter, not bold.

Using 'text-italic' which makes text italic, not bold.

Using 'text-normal' which resets font weight.

The Tailwind class font-bold makes text bold.

3fill in blank

hard

Fix the error in the Bootstrap button code by completing the missing class name.

Bootsrap

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

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

Atext-center

Bbold

Cprimary

Dcontainer

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'bold' which is not a Bootstrap button style.

Using 'text-center' which is for text alignment, not buttons.

Using 'container' which is a layout class, not a button style.

The Bootstrap button style uses classes like btn-primary for a blue button.

4fill in blank

hard

Fill both blanks to create a responsive grid container in Tailwind with 3 columns on medium screens and gap of 4.

Bootsrap

<div class="[1] [2]">Content here</div>

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

Agrid-cols-3

Bcontainer

Cmd:grid-cols-3

Dgap-4

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'grid-cols-3' which applies on all screens, not just medium.

Using 'container' which is for fixed width layout, not grid.

Missing the responsive prefix 'md:' for medium screens.

md:grid-cols-3 creates a 3-column grid on medium screens and up, and gap-4 adds spacing between grid items.

5fill in blank

hard

Fill all three blanks to create a Bootstrap card with a header, body text, and a button.

Bootsrap

<div class="card">
  <div class="card-[1]">Header</div>
  <div class="card-[2]">
    <p class="card-text">Some quick example text.</p>
    <a href="#" class="btn btn-[3]">Go somewhere</a>
  </div>
</div>

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

Aheader

Bbody

Cprimary

Dfooter

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'footer' instead of 'header' for the card header.

Using 'footer' or 'header' instead of 'body' for the card content.

Using a button style other than 'primary' for the main button.

Bootstrap cards use card-header for the header, card-body for the main content, and btn-primary for a primary styled button.

Practice

1. Which statement best describes the main difference between Bootstrap and Tailwind?

easy

A. Tailwind is a JavaScript framework, Bootstrap is a CSS framework.

B. Bootstrap provides ready-made components, while Tailwind offers utility classes for custom styling.

C. Both Bootstrap and Tailwind only provide prebuilt components.

D. Bootstrap uses utility classes only, Tailwind uses prebuilt components.

Solution

1. Step 1: Understand Bootstrap's approach

   Bootstrap offers ready-made components like buttons and navbars for quick use.

2. Step 2: Understand Tailwind's approach

   Tailwind provides small utility classes to build custom styles step-by-step.

3. Final Answer:

   Bootstrap provides ready-made components, while Tailwind offers utility classes for custom styling. -> Option B

4. Quick Check:

   Bootstrap = components, Tailwind = utilities [OK]

Hint: Bootstrap = components, Tailwind = utilities [OK]

Common Mistakes:

• Confusing utility classes with components
• Thinking both frameworks work the same way
• Believing Tailwind is a JavaScript framework

2. Which of the following is a correct way to add a Bootstrap button with primary style?

easy

A. Click me

B. Click me

C. Click me

D. Click me

Solution

1. Step 1: Recall Bootstrap button classes

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

2. Step 2: Check each option's class usage

   Only Click me uses both btn and btn-primary correctly.

3. Final Answer:

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

4. Quick Check:

   Bootstrap buttons need both btn and btn-primary [OK]

Hint: Bootstrap buttons need both btn and btn-primary classes [OK]

Common Mistakes:

• Using only btn-primary without btn
• Using incorrect class names like button or primary-btn
• Mixing Tailwind class names with Bootstrap

3. What will be the visual difference between these two buttons?

<button class="btn btn-primary">Bootstrap</button>
<button class="bg-blue-600 text-white px-4 py-2 rounded">Tailwind</button>

medium

A. Bootstrap button uses predefined styles; Tailwind button uses custom utility styles.

B. Both buttons look exactly the same by default.

C. Bootstrap button is unstyled; Tailwind button is styled.

D. Tailwind button uses JavaScript for styling; Bootstrap does not.

Solution

1. Step 1: Analyze Bootstrap button styling

   Bootstrap's btn btn-primary applies a consistent blue button style predefined by the framework.

2. Step 2: Analyze Tailwind button styling

   Tailwind uses utility classes like bg-blue-600, text-white, px-4, py-2, and rounded to build a custom styled button.

3. Final Answer:

   Bootstrap button uses predefined styles; Tailwind button uses custom utility styles. -> Option A

4. Quick Check:

   Bootstrap = predefined, Tailwind = utilities [OK]

Hint: Bootstrap = predefined styles, Tailwind = build with utilities [OK]

Common Mistakes:

• Assuming both buttons look identical
• Thinking Bootstrap buttons are unstyled
• Believing Tailwind uses JavaScript for styling

4. You wrote this Tailwind button but it looks unstyled:

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

What is the main problem?

medium

A. You forgot to include the Tailwind CSS file.

B. The button tag is incorrect; it should be a div.

C. Tailwind does not have a class named btn-primary; it's a Bootstrap class.

D. Tailwind requires JavaScript to style buttons.

Solution

1. Step 1: Identify the class used

   The class btn-primary is a Bootstrap class, not a Tailwind utility class.

2. Step 2: Understand Tailwind class naming

   Tailwind uses utility classes like bg-blue-600 or text-white, not btn-primary.

3. Final Answer:

   Tailwind does not have a class named btn-primary; it's a Bootstrap class. -> Option C

4. Quick Check:

   btn-primary = Bootstrap only [OK]

Hint: btn-primary is Bootstrap, not Tailwind class [OK]

Common Mistakes:

• Thinking btn-primary works in Tailwind
• Assuming button tag is wrong
• Believing Tailwind needs JavaScript for styling

5. You want a responsive navbar that looks consistent across browsers with minimal custom CSS. Which framework and approach is best?

hard

A. Use Tailwind utilities to build the navbar from scratch for full control.

B. Use Tailwind's prebuilt components like Bootstrap's navbar.

C. Use plain CSS without any framework for best browser support.

D. Use Bootstrap's prebuilt navbar component for quick, consistent styling.

Solution

1. Step 1: Consider the need for quick, consistent styling

   Bootstrap provides ready-made components like navbars that work well across browsers with minimal effort.

2. Step 2: Compare with Tailwind approach

   Tailwind requires building components from utilities, which takes more time and custom CSS.

3. Final Answer:

   Use Bootstrap's prebuilt navbar component for quick, consistent styling. -> Option D

4. Quick Check:

   Quick consistent navbar = Bootstrap component [OK]

Hint: Bootstrap components = quick consistent UI [OK]

Common Mistakes:

• Thinking Tailwind has prebuilt components like Bootstrap
• Assuming plain CSS is faster for consistent UI
• Ignoring time needed to build with utilities