Bootstrap5 Interview Questions
1. Q: How do you create a responsive navigation bar using Bootstrap 5?
Answer: I use the .navbar class along with responsive utility classes like .navbar-expand-lg, and
include elements like .navbar-brand, .navbar-toggler, and .collapse for responsiveness on
different screen sizes.
2. Q: How is a Bootstrap carousel useful on a webpage?
Answer: A carousel allows you to showcase multiple images or content in a sliding format,
making it ideal for image galleries, product highlights, or banners.
3. Q: What are utility classes in Bootstrap, and can you give a few examples?
Answer: Utility classes are single-purpose helper classes used to style elements quickly.
Examples include .text-center for center-aligned text, .p-3 for padding, and .bg-light for
background color.
4.. Q: How does the spacing utility system work in Bootstrap 5?
Answer: Bootstrap uses m and p for margin and padding, followed by a side (t, b, l, r, x, y, or
blank for all) and a size from 0 to 5 (or auto). For example, .mt-3 means margin-top: 1rem.
5. Q: What is the difference between .d-none and .visually-hidden in Bootstrap 5?
Answer: .d-none hides the element both visually and from assistive technologies like screen
readers. .visually-hidden keeps the element accessible for screen readers but hides it from view.
6. Q: What are breakpoints in Bootstrap 5, and how do they help in responsive design?
Answer: Breakpoints are predefined screen width ranges like sm, md, lg, xl, and xxl. They allow
you to control layout and styling at different screen sizes, making the design mobile-first and
adaptable.
7. Q: What is the use of a Bootstrap Accordion, and how does it differ from a Collapse?
Answer: An accordion is a group of collapsible sections where only one stays open at a time.
The Collapse component is used for hiding/showing a single element, while the accordion
manages multiple collapsible items with logic.
8. Q: How do you align items horizontally and vertically using Bootstrap utilities?
Answer: I’d use .d-flex along with .justify-content-* for horizontal alignment and .align-items-*
for vertical. For example, .justify-content-center align-items-center centers both ways.
9. Q: What’s the difference between .container, .container-fluid, and .container-{breakpoint}?
Answer: .container has fixed width at each breakpoint. .container-fluid takes 100% width at all
screen sizes. .container-md and similar classes apply fixed width from that specific breakpoint
upward.
10. Q: What is the role of utility API in Bootstrap 5?
Answer: The Utility API allows developers to create or customize utility classes via Sass maps. It
gives more flexibility by extending Bootstrap’s design system instead of manually writing
custom CSS.
11.Q: You’re building a user profile card that should include an image at the top, followed by a
name, description, and a button. How would you structure this using Bootstrap components?
Answer:
I'd use the Bootstrap .card component. Inside it, I'd place the image using .card-img-top, then
use .card-body for the content. Inside the body, I'd put the name in an <h5> with the
class .card-title, a short description using .card-text, and a button with .btn btn-primary.
12.Q:You want to create a responsive navbar that collapses on smaller screens. How do you
make that happen?
Answer:
I’d use the .navbar class along with .navbar-expand-lg to make it collapse below large screens.
I'd also include a toggler button with data-bs-toggle="collapse" and target a collapsible div
using .collapse navbar-collapse that holds the nav links.
13.Q: You want to show a notification (like “Form submitted!”) that disappears after 3 seconds.
Which Bootstrap feature would you use?
Answer:
I’d use a Bootstrap Toast. I’d place it with .toast and add data-bs-autohide="true" and data-bs-
delay="3000" to auto-dismiss after 3 seconds. Then I’d initialize it using JavaScript with
bootstrap.Toast.getOrCreateInstance() and call .show()
14. Q: You want to change the text alignment and background color of a block depending on
screen size. Which utilities help?
Answer:
I’d use responsive utility classes like .text-md-end or .text-center and .bg-light or .bg-primary.
For more control, I could also apply .bg-* and .text-* classes conditionally with breakpoints
like .text-lg-start.
15. Q: You’re building a form and want to group each label, input, and helper text neatly. How
would Bootstrap help?
Answer:
I’d use the .form-group class in Bootstrap 4, but in Bootstrap 5, I’d simply wrap each field in a
<div> and use .form-label, .form-control, and .form-text to structure the label, input, and hint
respectively.
16. Q: On smaller screens, you want certain text to be hidden but still visible on larger devices.
What class would you use?
Answer:
I’d use responsive display utility classes like .d-none d-md-block. This hides the element on
small screens and displays it from medium screens upward.
17. Q: You’re asked to make a table with a light background, borders, and striped rows. What
classes will you apply?
Answer:
I’d use the .table class along with .table-light, .table-bordered, and .table-striped. These style
the table with Bootstrap’s built-in table utility classes.
18. Q: You want to add a heading with a blue background and white text. What simple
Bootstrap classes would you use?
Answer:
I’d use .bg-primary for the blue background and .text-white for the white text. I might also
add .p-3 for padding so the text isn’t cramped.
19. Q: You’re designing a simple login form. How would you make the input boxes stretch to full
width?
Answer:
I’d add the .form-control class to each input. It automatically makes input fields expand to
100% of their parent container's width.
20. Q:You want to highlight a message like “Success!” with green styling. What would you use?
Answer:
I’d use the .alert alert-success classes. It creates a green alert box that clearly shows a positive
message to the user.
