Bootstrap Bootstrap 2 — Questions and Answers
Question 1: Which Bootstrap utility class makes an element invisible but still occupies space in the layout?
- d-none
- invisible (Correct answer)
- opacity-0
- visually-hidden
Correct answer: invisible
The `invisible` class hides an element visually while keeping its space in the document flow, unlike `d-none` which removes it from the flow entirely.
Question 2: What is the correct Bootstrap class to create a full-width button that spans its parent container?
- btn-block
- btn btn-full
- w-100 (Correct answer)
- btn-expand
Correct answer: w-100
In Bootstrap 5, `btn-block` was removed; use `w-100` (width: 100%) or `d-grid` on a wrapper to achieve full-width buttons.
Question 3: Which Bootstrap component is used to display dismissible alert messages?
- badge
- toast
- alert (Correct answer)
- popover
Correct answer: alert
Bootstrap's `alert` component with the `alert-dismissible` class and a close button provides dismissible contextual feedback messages.
Question 4: In Bootstrap's flexbox utilities, which class aligns flex items to the end of the cross axis?
- align-items-end (Correct answer)
- justify-content-end
- flex-end
- align-self-last
Correct answer: align-items-end
`align-items-end` applies `align-items: flex-end` to the flex container, pushing children to the bottom (or right for column direction).
Question 5: What does the Bootstrap class `order-first` do to a flex or grid item?
- Removes the item from the DOM
- Moves the item to the visual beginning regardless of source order (Correct answer)
- Makes the item the primary flex container
- Gives the item the highest z-index
Correct answer: Moves the item to the visual beginning regardless of source order
`order-first` applies `order: -1`, causing the element to appear before all siblings visually without changing the HTML source order.
Question 6: Which Bootstrap navbar class collapses the navigation menu on small screens and reveals a toggle button?
- navbar-expand
- navbar-collapse
- navbar-toggler
- navbar-expand-lg (Correct answer)
Correct answer: navbar-expand-lg
`navbar-expand-lg` collapses the navbar on screens smaller than `lg` breakpoint and shows a hamburger toggler, expanding fully on large screens and above.
Question 7: What is the purpose of Bootstrap's `ratio` component (formerly embed-responsive)?
- Sets font size ratios for typography
- Maintains a consistent aspect ratio for embedded content like iframes and videos (Correct answer)
- Defines column width ratios in the grid
- Controls the padding ratio of cards
Correct answer: Maintains a consistent aspect ratio for embedded content like iframes and videos
The `ratio` component uses a padding trick to force embedded content like iframes and videos to maintain a specific aspect ratio regardless of container width.
Bootstrap Bootstrap 2
Which Bootstrap utility class makes an element invisible but still occupies space in the layout?