When to use Bootstrap vs alternatives - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to include Bootstrap CSS in your HTML file.

Bootsrap

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

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

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

Bscript.js

Cstyles.css

Dhttps://example.com/style.css

Attempts:

3 left

💡 Hint

Common Mistakes

Using a JavaScript file instead of CSS.

Linking to a local CSS file that is not Bootstrap.

Bootstrap CSS is usually included via a CDN link like the one in option A.

2fill in blank

medium

Complete the code to add a Bootstrap button with primary style.

Bootsrap

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

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

Abtn-primary

Bbtn-link

Cbtn-danger

Dbtn-secondary

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different button style class like 'btn-secondary'.

Forgetting to include the 'btn' class.

The class btn-primary gives the button the primary Bootstrap style.

3fill in blank

hard

Fix the error in the Bootstrap grid code to create two equal columns.

Bootsrap

<div class="row">
  <div class="col-[1]">Column 1</div>
  <div class="col-[1]">Column 2</div>
</div>

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

A3

B12

C4

D6

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'col-12' which makes each column full width stacking vertically.

Using 'col-4' or 'col-3' which does not split evenly into two columns.

Bootstrap grid has 12 columns total. Using 'col-6' divides the row into two equal halves.

4fill in blank

hard

Fill in the blank to create a responsive Bootstrap navbar that collapses on small screens.

Bootsrap

<nav class="navbar navbar-expand-[1] navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
      </li>
    </ul>
  </div>
</nav>

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

Amd

Bsm

Clg

Dxl

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'navbar-expand-sm' which expands too early.

Not matching the expand class with the button's data attributes.

The class 'navbar-expand-lg' makes the navbar expand on large screens and collapse on smaller ones.

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" style="width: 18rem;">
  <div class="card-[1]">Card Header</div>
  <div class="card-[2]">
    <p class="card-text">Some quick example text to build on the card title.</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 'card-footer' instead of 'card-header' for the header.

Forgetting to add 'btn' class to the button.

Using a wrong button color class.

The card header uses 'card-header', the body uses 'card-body', and the button uses 'btn-primary' for styling.

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