1. Introduction to Bootstrap 5 (20 Questions)
Q1. What is Bootstrap 5?
Bootstrap 5 is the latest major version of the popular open-source front-end framework. It helps developers quickly build responsive, mobile-first websites using ready-made CSS classes, components, and utilities. It no longer depends on jQuery and uses plain JavaScript.
Q2. What are the main differences between Bootstrap 5 and Bootstrap 4?
Bootstrap 5 dropped jQuery support, switched to vanilla JavaScript, removed Internet Explorer support, introduced a new color system, added RTL (right-to-left) support, and improved the grid with an extra xxl breakpoint. It also uses a more powerful Sass-based utility API.
Q3. Does Bootstrap 5 require jQuery? Explain why or why not.
No. Bootstrap 5 uses native JavaScript (vanilla JS) for all interactive components. This makes it lighter and faster than Bootstrap 4, which needed jQuery.
Q4. How can you include Bootstrap 5 in your HTML project using CDN links?
Add the Bootstrap CSS in the <head> and the JS bundle before the closing </body> tag.
Example:
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js”></script>
Q5. What is the role of Popper.js in Bootstrap 5?
Popper.js handles the positioning of tooltips, popovers, and dropdowns. The Bootstrap JS bundle already includes it, so you don’t need to add it separately when using the bundle file.
Q6. List the key features of Bootstrap 5.
- Mobile-first responsive design
- 12-column flexbox grid
- Extensive utility classes
- Built-in JavaScript components (no jQuery)
- RTL support
- Customizable via Sass
- New components like offcanvas and improved toasts
Q7. What are the default breakpoints in Bootstrap 5?
Bootstrap 5 has six breakpoints:
- xs: <576px
- sm: ≥576px
- md: ≥768px
- lg: ≥992px
- xl: ≥1200px
- xxl: ≥1400px
Q8. Explain how to download and set up Bootstrap 5 locally.
Go to getbootstrap.com, download the compiled files, extract the zip, and copy bootstrap.min.css and bootstrap.bundle.min.js into your project folder. Link them in your HTML the same way as the CDN version.
Q9. What is the utility API in Bootstrap 5?
The utility API is a Sass-based system that lets you generate or modify utility classes easily. You can enable/disable, change values, or add new utilities directly in your custom Sass file.
Q10. How does Bootstrap 5 support RTL (Right-to-Left) languages?
Bootstrap 5 provides a separate RTL stylesheet (bootstrap.rtl.min.css). Simply replace the normal CSS file with the RTL version and add dir=”rtl” to the <html> tag.
Q11. What are Bootstrap Icons and how do you use them?
Bootstrap Icons is a separate open-source icon library (not included in Bootstrap). You add the CDN link and use <i class=”bi bi-heart”></i> anywhere in your HTML.
Q12. Name some new components or changes introduced in Bootstrap 5.
New or improved: Offcanvas, improved toasts, accordion flush variant, new color palette, placeholder component, and floating labels for forms.
Q13. How do you initialize Bootstrap 5 JavaScript components?
Most components initialize automatically when you add the right data attributes or classes. For manual control, use JavaScript like new bootstrap.Modal(document.getElementById(‘myModal’)).
Q14. What is the purpose of the Bootstrap 5 Sass customization?
Sass customization lets you change colors, spacing, fonts, breakpoints, and utilities before compiling the CSS. It gives you full control without writing everything from scratch.
Q15. Explain the mobile-first approach in Bootstrap 5.
Bootstrap 5 designs styles for the smallest screens first (xs), then adds media queries for larger screens. This ensures the site looks good on mobile by default and improves as the screen gets bigger.
Q16. What is the difference between bootstrap.css and bootstrap.min.css?
bootstrap.css is the readable, unminified version useful for debugging. bootstrap.min.css is the compressed (minified) version for production to reduce file size and improve loading speed.
Q17. Does Bootstrap 5 use Flexbox or CSS Grid by default for its layout system?
Bootstrap 5 uses Flexbox for its grid system and most layout components. CSS Grid is not the default but can be used alongside utilities if needed.
Q18. How would you create a simple Bootstrap 5 starter template?
Use this basic HTML structure:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<h1 class=”text-center mt-5″>Hello Bootstrap 5!</h1>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js”></script>
</body>
</html>
Q19. How can you extend Bootstrap 5 with custom CSS?
Create your own CSS file, link it after Bootstrap’s CSS, and write your styles. You can also override Bootstrap variables in a custom Sass file before compiling.
Q20. Why is Bootstrap 5 considered a powerful tool for rapid web development?
It provides ready-to-use responsive components, a powerful grid, hundreds of utility classes, and JavaScript interactions out of the box. Developers can build professional-looking websites in hours instead of days.
