Bootstrap vs Tailwind comparison - Practice Questions

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is a key difference in styling approach between Bootstrap and Tailwind?

Bootstrap and Tailwind are popular CSS frameworks. Which statement best describes their main difference in styling approach?

A Bootstrap provides pre-designed components with fixed styles, while Tailwind offers utility classes to build custom designs.

B Bootstrap uses utility classes only, while Tailwind provides ready-made components with fixed styles.

C Both Bootstrap and Tailwind only provide JavaScript plugins without CSS styles.

D Bootstrap requires writing all CSS from scratch, while Tailwind offers pre-built themes.

💡 Hint

Think about whether the frameworks give you ready-made blocks or small building blocks.

Bootstrap comes with ready-made styled components like buttons and navbars. Tailwind provides small utility classes like padding and colors to build your own design.

📝 Syntax

intermediate

Which Tailwind class adds horizontal padding of 1rem?

In Tailwind CSS, which class adds horizontal padding equal to 1rem (16px)?

A pl-4

B p-4

C py-4

D px-4

💡 Hint

The 'x' in the class name means horizontal (left and right).

In Tailwind, px-4 adds padding-left and padding-right of 1rem. The number 4 corresponds to 1rem by default.

❓ rendering

advanced

What will be the background color of this Bootstrap button?

Given this Bootstrap button code, what color will the button background be?

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

A Red background with white text

B Gray background with black text

C Blue background with white text

D Transparent background with blue text

💡 Hint

Bootstrap's primary button color is a shade of blue by default.

The btn-primary class in Bootstrap applies a blue background and white text color.

❓ selector

advanced

Which Tailwind selector applies styles only on medium screens and larger?

In Tailwind CSS, which prefix applies styles only when the screen width is medium (768px) or larger?

A xl:

B md:

C lg:

D sm:

💡 Hint

Think about the order of screen sizes: small, medium, large, extra large.

The md: prefix applies styles starting at the medium breakpoint (768px) and up.

❓ accessibility

expert

Which practice improves accessibility in both Bootstrap and Tailwind projects?

Which of the following is the best practice to improve accessibility when using Bootstrap or Tailwind CSS?

A Always use semantic HTML elements and add ARIA labels where needed.

B Only rely on color changes to indicate interactive elements.

C Avoid using keyboard navigation features to simplify code.

D Use inline styles instead of classes for better screen reader support.

💡 Hint

Accessibility means everyone can use your site, including people using screen readers or keyboards.

Using semantic HTML and ARIA labels helps assistive technologies understand your content. Relying only on color or skipping keyboard support hurts accessibility.