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.