Why consistent interactive elements matter in Bootsrap - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

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

Bootsrap

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

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

Abtn-primary

Bbtn-secondary

Cbtn-danger

Dbtn-link

Attempts:

3 left

💡 Hint

Common Mistakes

Using a button class that does not exist in Bootstrap.

Forgetting to include the base class btn.

The class btn-primary gives the button the main Bootstrap blue style, making it consistent and recognizable.

2fill in blank

medium

Complete the code to create a Bootstrap alert with a success message.

Bootsrap

<div class="alert [1]" role="alert">Operation completed successfully!</div>

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

Aalert-warning

Balert-danger

Calert-success

Dalert-info

Attempts:

3 left

💡 Hint

Common Mistakes

Using an alert class that does not match the message type.

Omitting the role="alert" attribute for accessibility.

The class alert-success styles the alert with a green background, indicating success clearly and consistently.

3fill in blank

hard

Fix the error in the code to make the Bootstrap navbar toggle button work correctly.

Bootsrap

<button class="navbar-toggler" type="button" data-bs-toggle="[1]" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

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

Acollapse

Btab

Cmodal

Ddropdown

Attempts:

3 left

💡 Hint

Common Mistakes

Using dropdown or other toggle types that do not control the navbar collapse.

Forgetting to match data-bs-target with the collapsible element's ID.

The toggle button controls the collapsing navbar menu, so data-bs-toggle must be set to collapse.

4fill in blank

hard

Fill both blanks to create a consistent Bootstrap card with a header and body.

Bootsrap

<div class="card">
  <div class="[1]">Card Header</div>
  <div class="[2]">This is the card body content.</div>
</div>

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

Acard-header

Bcard-footer

Ccard-body

Dcard-title

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up card-footer with the header.

Using card-title as a container instead of a text element.

The header uses card-header and the main content uses card-body to keep the card structure consistent and clear.

5fill in blank

hard

Fill all three blanks to create a consistent Bootstrap form group with label, input, and help text.

Bootsrap

<div class="mb-3">
  <label for="emailInput" class="[1]">Email address</label>
  <input type="email" class="form-control [2]" id="emailInput" aria-describedby="emailHelp">
  <div id="emailHelp" class="[3]">We'll never share your email with anyone else.</div>
</div>

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

Aform-label

Bis-invalid

Cform-text

Dform-check-input

Attempts:

3 left

💡 Hint

Common Mistakes

Using form-check-input for a text input instead of a checkbox.

Omitting the form-text class on help text.

The label uses form-label, the input uses is-invalid to show an error style, and the help text uses form-text for consistent styling.

Practice

1. Why is it important to keep interactive elements like buttons and links consistent in a website using Bootstrap?

easy

A. It reduces the number of images needed.

B. It helps users recognize and trust the website easily.

C. It makes the website load faster.

D. It allows the website to work without internet.

Solution

1. Step 1: Understand user experience importance

   Consistent interactive elements help users quickly recognize how to interact with the website.

2. Step 2: Connect consistency to trust

   When elements look familiar, users feel more confident and trust the site.

3. Final Answer:

   It helps users recognize and trust the website easily. -> Option B

4. Quick Check:

   Consistent elements = user trust [OK]

Hint: Think about how you feel using familiar buttons [OK]

Common Mistakes:

• Confusing consistency with website speed
• Thinking consistency reduces images
• Believing consistency works offline

2. Which Bootstrap class should you use to create a consistent primary button style?

easy

A. .btn-main

B. .button-primary

C. .btn-primary

D. .primary-btn

Solution

1. Step 1: Recall Bootstrap button classes

   Bootstrap uses .btn as base and .btn-primary for primary buttons.

2. Step 2: Identify correct class

   Among options, only .btn-primary is valid Bootstrap syntax for a primary button.

3. Final Answer:

   .btn-primary -> Option C

4. Quick Check:

   Primary button class = .btn-primary [OK]

Hint: Bootstrap buttons start with .btn- prefix [OK]

Common Mistakes:

• Using non-existent classes like .btn-main
• Mixing words in wrong order
• Adding extra words like 'button' in class

3. What will be the visual result of this Bootstrap button code?

<button class="btn btn-success">Save</button>

medium

A. A green button labeled 'Save' with consistent Bootstrap styling.

B. A red button labeled 'Save' with no styling.

C. A plain text 'Save' with no button styling.

D. A blue button labeled 'Save' with inconsistent styling.

Solution

1. Step 1: Understand Bootstrap button classes

   .btn applies button style, .btn-success applies green color.

2. Step 2: Predict visual output

   The button will appear green with the label 'Save' styled consistently by Bootstrap.

3. Final Answer:

   A green button labeled 'Save' with consistent Bootstrap styling. -> Option A

4. Quick Check:

   .btn-success = green button [OK]

Hint: Remember .btn-success means green button [OK]

Common Mistakes:

• Confusing .btn-success with red or blue colors
• Expecting no styling without .btn class
• Thinking button text changes color only

4. You want all your links styled like Bootstrap buttons for consistency. Which code snippet fixes this error?

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

medium

A. Use btn-primary-link class.

B. Remove all classes to keep it simple.

C. Add button-primary class instead.

D. Change class to btn btn-primary.

Solution

1. Step 1: Identify incorrect class usage

   The class button is not a Bootstrap class; correct base class is btn.

2. Step 2: Correct the class names

   Replace button with btn to apply Bootstrap button styles properly.

3. Final Answer:

   Change class to btn btn-primary. -> Option D

4. Quick Check:

   Bootstrap buttons need .btn base class [OK]

Hint: Always start Bootstrap buttons with .btn [OK]

Common Mistakes:

• Using non-Bootstrap class 'button'
• Removing classes loses styling
• Inventing classes like button-primary

5. You want to create a form with consistent interactive elements using Bootstrap. Which approach best ensures users recognize inputs and buttons easily?

hard

A. Use Bootstrap classes like form-control for inputs and btn btn-primary for buttons.

B. Use custom CSS only without Bootstrap classes.

C. Mix different button styles for variety.

D. Use plain HTML elements without classes.

Solution

1. Step 1: Identify Bootstrap classes for form elements

   form-control styles inputs consistently; btn btn-primary styles buttons uniformly.

2. Step 2: Understand why consistency matters

   Using these classes ensures users see familiar, trusted interactive elements.

3. Final Answer:

   Use Bootstrap classes like form-control for inputs and btn btn-primary for buttons. -> Option A

4. Quick Check:

   Bootstrap classes = consistent UI [OK]

Hint: Use Bootstrap form and button classes for uniform look [OK]

Common Mistakes:

• Ignoring Bootstrap classes and using custom CSS only
• Mixing styles causing confusion
• Using plain elements without styling