MySmartCoPilot
Ask Passes Your pass 7 days left 1 day left Last day

Your country

Tools that support it use your country for local currency, number formats, units and paper size. Your choice is saved only in this browser.

CSS Module 20

Bootstrap 5.3: grid, utilities, components and JavaScript interview questions

Interview questions on “Bootstrap 5.3: grid, utilities, components and JavaScript”: warm-ups, then what each harder question tests and how a good answer starts.

6 questions: 2 warm-ups and 4 with model answers · Levels: Fresher to senior

Warm-up questions

Short questions with short answers, each answered in full.

  1. Fresher

    What does the data-bs-theme attribute do in Bootstrap 5.3, and where can you put it?

    Answered in the lesson Bootstrap 5.3: setup, Reboot and colour modes

  2. Fresher

    What does col-md-6 mean, and what does the element do below 768 px?

    Answered in the lesson The Bootstrap grid: containers, rows and columns

Questions with model answers

What each question tests, the first step of a good answer and the follow-ups to expect.

  1. Fresher to mid

    A routine change moved Bootstrap from 5.3.7 to 5.3.8. Local builds bundle it from npm and look right, but in production, where the template loads it from a CDN with integrity attributes, pages show browser defaults while dropdowns still work. Explain what happened, how you confirm it, and how you stop it recurring.

    What it tests
    How Subresource Integrity works, reading the browser's console, and release checks for third-party files.
    First step
    Open the console on a production page. A blocked-integrity error names bootstrap.min.css: the address now says 5.3.8, but the integrity value is still the 5.3.7 file's hash, so the browser refuses the file and the page falls back to its defaults. Then compare the script tag, whose hash was updated.
    Follow-ups

    From the lesson Bootstrap 5.3: setup, Reboot and colour modes

    Opening the model answers with your pass…

    Model answers open with any MySmartCoPilot pass.

    • Pro pass · 1 week₹79$2.99
    • 30 days₹179$5.99
    • 1 year₹1,699$45

    One payment; nothing renews unless you choose to. The price shown is the total you pay: no fees or charges are added at checkout.

    Choose a passI have a licence key

    It also opens every other in-depth part in Learn and every Pro tool. Sales are final, except where the law gives you a right to withdraw, for example in the EU and the UK (refund policy).

    In the answer:

    • Model answer
    • Follow-up answers
    • Common mistakes
    • Rubric
    • Variants
    • about 3 minutes

  2. Fresher to mid

    A site sets data-bs-theme on html from a script at the end of the body. Visitors who chose dark see a white flash on every page load, and a help panel marked data-bs-theme="light" inside the dark page shows pale grey text that is hard to read. Explain both problems and fix them.

    What it tests
    When a colour mode takes effect, how Bootstrap's variables and inherited colour behave in nested modes, and checking contrast.
    First step
    The browser paints before a script at the end of the body runs, so the first frame uses the light default. In the panel, Bootstrap sets color on body only, so plain text inherits the dark mode's #dee2e6, which measures 1.30:1 on the panel's white background.
    Follow-ups

    From the lesson Bootstrap 5.3: setup, Reboot and colour modes

    In the answer:

    • Model answer
    • Follow-up answers
    • Common mistakes
    • Rubric
    • Variants
    • about 3 minutes

  3. Fresher to mid

    A landing page has a full-width coloured band built as a .row placed straight in the body, so that its background reaches both edges. On phones the whole page can be dragged sideways by a few pixels. Explain the exact amount, and give two fixes with their trade-offs.

    What it tests
    What a row's negative margins are for, how gutters are built from padding and margins, and choosing between a container, g-0 and an outer wrapper.
    First step
    A row has margins of minus half the gutter on both sides, −12 px by default, to cancel a container's padding. With no container, nothing cancels them: the row runs from −12 px to the viewport width plus 12 px, so the page is 12 px wider than the screen.
    Follow-ups

    From the lesson The Bootstrap grid: containers, rows and columns

    In the answer:

    • Model answer
    • Follow-up answers
    • Common mistakes
    • Rubric
    • Variants
    • about 3 minutes

  4. Mid to senior

    A design shows filters left of the results on desktop and below them on phones. A developer kept the results first in the HTML and added order-md-first to the filters. An accessibility audit flags the page. Explain the finding, and how you would choose the fix with the designer.

    What it tests
    How order and the grid change only the visual order, what WCAG 2.2 asks of reading and focus order, and solving a layout requirement without breaking it.
    First step
    Focus and screen readers follow the HTML, not the order property. On desktop a keyboard user starts in the results on the right and then jumps back to the filters on the left, against the visual reading order, which WCAG 2.2's Focus Order and Meaningful Sequence criteria are about.
    Follow-ups

    From the lesson The Bootstrap grid: containers, rows and columns

    In the answer:

    • Model answer
    • Follow-up answers
    • Common mistakes
    • Rubric
    • Variants
    • about 3 minutes

All CSS interview questions · The CSS track