Bootstrap Case Studies & Practical Application 2 — Questions and Answers
Question 1: A developer needs a navigation bar that collapses into a hamburger menu on mobile but stays fully expanded on desktop. Which Bootstrap classes achieve this?
- navbar-expand-lg on the nav and navbar-toggler for the button (Correct answer)
- navbar-collapse and navbar-menu on the nav element
- nav-responsive and nav-hamburger on the nav element
- navbar-fluid and navbar-toggle on the nav element
Correct answer: navbar-expand-lg on the nav and navbar-toggler for the button
navbar-expand-lg keeps the nav expanded on large screens and above, while navbar-toggler provides the hamburger button for smaller screens.
Question 2: A team wants equal-width columns in a 3-column layout that stacks vertically on phones but shows side by side on tablets. Which column class combination is correct?
- col-sm-4 on each of the three columns (Correct answer)
- col-md-4 col-sm-12 on each column
- col-4 col-sm-12 on each column
- col-xs-12 col-md-4 on each column
Correct answer: col-sm-4 on each of the three columns
col-sm-4 gives each column one-third width from the small (576px) breakpoint upward and stacks to full width below sm.
Question 3: A product card needs a hover shadow effect. A developer adds the Bootstrap utility class shadow on hover via JavaScript. What is the more idiomatic Bootstrap-only approach?
- Use the shadow-sm or shadow class directly and toggle it with Bootstrap's built-in utilities (Correct answer)
- Write custom CSS since Bootstrap has no shadow utilities
- Use the card-shadow class provided by Bootstrap
- Apply elevation-2 class which Bootstrap maps to box-shadow
Correct answer: Use the shadow-sm or shadow class directly and toggle it with Bootstrap's built-in utilities
Bootstrap provides shadow, shadow-sm, and shadow-lg utility classes that can be toggled with JavaScript or applied conditionally.
Question 4: A site has a sidebar that should be 3 columns wide and a main content area of 9 columns. The layout should remain side by side from medium screens up. Which markup is correct?
- <div class="col-md-3"> sidebar </div><div class="col-md-9"> content </div> (Correct answer)
- <div class="col-3-md"> sidebar </div><div class="col-9-md"> content </div>
- <div class="grid-3"> sidebar </div><div class="grid-9"> content </div>
- <div class="span3"> sidebar </div><div class="span9"> content </div>
Correct answer: <div class="col-md-3"> sidebar </div><div class="col-md-9"> content </div>
Bootstrap uses col-{breakpoint}-{number} syntax; col-md-3 and col-md-9 sum to 12 and activate side-by-side from the md breakpoint.
Question 5: A developer uses Bootstrap's modal component but the backdrop doesn't dismiss the modal when clicked. What attribute controls this behavior?
- data-bs-backdrop="static" (Correct answer)
- data-bs-dismiss="false"
- data-bs-close="locked"
- data-bs-static="true"
Correct answer: data-bs-backdrop="static"
Setting data-bs-backdrop="static" prevents the modal from closing when the backdrop is clicked.
Question 6: An e-commerce checkout form has required fields. Which Bootstrap class pair provides visual feedback for valid and invalid states?
- is-valid and is-invalid on the input elements (Correct answer)
- valid-field and invalid-field on the input elements
- form-valid and form-invalid on the form element
- success and error on the input elements
Correct answer: is-valid and is-invalid on the input elements
Bootstrap's is-valid and is-invalid classes style inputs with green or red borders and can display associated feedback messages.
Question 7: A developer wants a button that looks like a link but behaves as a button for accessibility. Which Bootstrap approach is recommended?
- <button class="btn btn-link">Click</button> (Correct answer)
- <a class="btn-button">Click</a>
- <span class="link-btn" role="button">Click</span>
- <div class="btn link">Click</div>
Correct answer: <button class="btn btn-link">Click</button>
btn btn-link renders a button with link styling while preserving button semantics and keyboard accessibility.
Bootstrap Case Studies & Practical Application 2
A developer needs a navigation bar that collapses into a hamburger menu on mobile but stays fully expanded on desktop.
Which Bootstrap classes achieve this?