Why user feedback is critical in Bootsrap - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Bootstrap alert box that informs users about feedback importance.

Bootsrap

<div class="alert alert-[1]" role="alert">
  User feedback helps improve our website!
</div>

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

Adanger

Bsuccess

Cwarning

Dinfo

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'danger' which shows a red alert meant for errors.

Using 'success' which is green and implies success confirmation.

The info class creates a blue alert box, which is suitable for informational messages like feedback importance.

2fill in blank

medium

Complete the code to add a Bootstrap button that users can click to submit their feedback.

Bootsrap

<button type="button" class="btn btn-[1]">Submit Feedback</button>

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

Aprimary

Bdark

Clight

Dsecondary

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'secondary' which is less prominent.

Using 'light' which may blend with the background.

The primary button class highlights the button as the main action, encouraging users to submit feedback.

3fill in blank

hard

Fix the error in the Bootstrap form control class to properly style the feedback input box.

Bootsrap

<input type="text" class="form-[1]" placeholder="Enter your feedback">

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

Ainput

Bcontrol

Cfield

Dbox

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'form-input' which is not a Bootstrap class.

Using 'form-field' or 'form-box' which do not exist.

The correct Bootstrap class for styling input fields is form-control.

4fill in blank

hard

Fill both blanks to create a responsive Bootstrap grid with two columns for feedback and user info.

Bootsrap

<div class="row">
  <div class="col-[1]">
    <textarea class="form-control" placeholder="Your feedback"></textarea>
  </div>
  <div class="col-[2]">
    <input type="text" class="form-control" placeholder="Your name">
  </div>
</div>

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

A8

B6

C4

D12

Attempts:

3 left

💡 Hint

Common Mistakes

Using columns that don't add up to 12 causing layout issues.

Using 6 and 6 which is balanced but not the intended layout.

The first column takes 8 parts of the 12-grid, the second takes 4, making a balanced layout.

5fill in blank

hard

Fill all three blanks to create a Bootstrap card showing user feedback with a header, body, and footer.

Bootsrap

<div class="card">
  <div class="card-[1]">User Feedback</div>
  <div class="card-[2]">
    <p>This website is very helpful!</p>
  </div>
  <div class="card-[3]">Posted 2 days ago</div>
</div>

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

Aheader

Bbody

Cfooter

Dtitle

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'title' which is not a Bootstrap card class.

Mixing up body and footer classes.

The card header, body, and footer are the correct Bootstrap classes to structure the card content.