Bootstrap Exam Questions

High-yield Bootstrap 5 theory + practical questions for Web Technology / Web Design papers.

Overview

Bootstrap shows up in Web Technology, Front-end Development, and Responsive Design exams. These short answers cover ~80% of what's asked.

1. Theory Questions

What is Bootstrap? A free, open-source CSS framework for building responsive, mobile-first websites — released by Twitter (2011).
Who created Bootstrap? Mark Otto + Jacob Thornton at Twitter.
What is the latest version? Bootstrap 5 (jQuery-free, uses vanilla JS + ES6 modules).
Which CSS preprocessor does Bootstrap use? Sass (since v4).
What's new in Bootstrap 5 vs 4? No jQuery, drops IE10/11, new utility API, RTL support, switches .no-gutters → .g-0, custom CSS variables.
Mobile-first vs desktop-first? Bootstrap is mobile-first — base styles target small screens, then scale up via media queries.

2. Grid System (almost guaranteed)

How many columns in the Bootstrap grid? 12 columns.
Default container widths (Bootstrap 5):
- <576px → 100%
- ≥576px (sm) → 540px
- ≥768px (md) → 720px
- ≥992px (lg) → 960px
- ≥1200px (xl) → 1140px
- ≥1400px (xxl) → 1320px
Difference: .container vs .container-fluid vs .container-{breakpoint}? container = fixed-width by breakpoint; container-fluid = always 100%; container-md = fluid until md, then fixed.
What is a row class? .row — flex row that holds columns; counters column padding via negative margin.
What is .col-*? Column class — .col-6 = 50% width on all screens; .col-md-6 = 50% from medium up.

3. Common Components

Buttons — .btn .btn-primary, .btn-outline-success, .btn-lg, .btn-sm.
Cards — .card, .card-body, .card-title, .card-img-top.
Navbar — .navbar .navbar-expand-lg .navbar-light .bg-light.
Forms — .form-control, .form-select, .form-check, .input-group.
Modal — .modal .fade, .modal-dialog, .modal-content, opened with data-bs-toggle="modal".
Carousel — .carousel .slide, .carousel-item, controls + indicators.
Alerts — .alert .alert-success / .alert-danger.

4. Utilities (1-2 marks each)

Spacing — .m-3 (margin), .p-3 (padding), .mt-2 (margin-top), responsive: .mt-md-4.
Display — .d-none, .d-block, .d-md-flex.
Flex — .d-flex .justify-content-center .align-items-center.
Text — .text-center, .text-primary, .fw-bold, .fs-3.
Colors — .bg-primary, .text-danger, .border-warning.

5. Common Programs / WAPs

WAP to create a responsive 3-column layout — wrap in .row → 3 × .col-md-4.
WAP to make a navbar — <nav class="navbar navbar-expand-lg"> with brand + toggler + collapse.
WAP to create a modal popup — button with data-bs-toggle="modal" + matching <div class="modal">.
WAP to make a card grid — .row .row-cols-1 .row-cols-md-3 .g-4 with .col + .card.
WAP to make a form — .form-control, .form-label, validation classes.

6. Pro Tips for Top Marks

Always load Bootstrap CSS in <head>, JS bundle before </body>.
Use the CDN for quick demos: cdn.jsdelivr.net/npm/bootstrap@5.3.x/....
Use Sass + Webpack for production (tree-shake unused components).
Mention 5 Sass mixins (make-col, make-container, media-breakpoint-up) for advanced marks.
Always cite mobile-first in any responsive answer.

AI-powered recap

We'll generate 5 MCQs from this lesson and check your understanding instantly. Takes ~30 seconds.

Ready to move on?

// feedback.matters()

Did this lesson help you?