Experienced Bootstrap Interview Questions

What are the main differences between Bootstrap 4 and Bootstrap 5?

• jQuery is removed, and the JavaScript is plain JavaScript.
• Internet Explorer is not supported.
• data-toggle became data-bs-toggle (all data attributes have bs).
• Left and right became start and end: ml-2 to ms-2, text-left to text-start, float-right to float-end.
• New breakpoint xxl (1400px), a new offcanvas component, RTL support, and in 5.3 color modes (dark mode).
• Removed: .form-group, .btn-block, .jumbotron, .media, .card-deck, input-group prepend and append.

See the full list in Migrating from Bootstrap 4 to 5.

What are data-bs-* attributes in Bootstrap?

Bootstrap reads attributes that start with data-bs-. They start a component and give its target and options, so for many components you do not write any JavaScript.

In Bootstrap 4 the attributes were data-toggle and so on. See Bootstrap JavaScript.

How do you initialize tooltips and popovers in Bootstrap 5?

document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => new bootstrap.Tooltip(el));
document.querySelectorAll('[data-bs-toggle="popover"]').forEach(el => new bootstrap.Popover(el));

They do not start by themselves because of performance. Put this script after the Bootstrap JS file. See Tooltips and Popovers.

How does dark mode work in Bootstrap 5.3?

<html lang="en" data-bs-theme="dark">

The attribute can be on the html element for the full page, or on one component (for example a navbar or a card). In your own CSS use variables like var(--bs-body-bg), and prefer .bg-body-tertiary to .bg-light. A theme switcher only changes the attribute with JavaScript. See Color Modes.

How do you customize Bootstrap with Sass?

$primary: #6f42c1;
$border-radius: 0.75rem;

@import "node_modules/bootstrap/scss/bootstrap";

The variables must be set before the import. Compile with Sass (npx sass custom.scss custom.css). Current Dart Sass shows a deprecation warning for @import, but the build works. See Bootstrap Customization.

How do you override the default Bootstrap CSS?

• Load your CSS after the Bootstrap CSS.
• Change the CSS variables: for a button use --bs-btn-bg, --bs-btn-border-color, and for the page use --bs-body-font-family, --bs-border-radius.
• If a rule does not win, make your selector a little more specific. Avoid !important when possible.
• For a big change, use Sass variables.
• Never edit the files in node_modules or the downloaded Bootstrap files.

See Bootstrap Customization.

What is the offcanvas component in Bootstrap?

Offcanvas is new in Bootstrap 5. It has a header, a body and placement classes (offcanvas-start, offcanvas-end, offcanvas-top, offcanvas-bottom). It opens with data-bs-toggle="offcanvas" or bootstrap.Offcanvas, it has a backdrop, and it closes with the Escape key. See Offcanvas.

How do you validate a form with Bootstrap 5?

const form = document.querySelector('.needs-validation');
form.addEventListener('submit', event => {
  if (!form.checkValidity()) {
    event.preventDefault();
    event.stopPropagation();
  }
  form.classList.add('was-validated');
});

Write .valid-feedback and .invalid-feedback messages under the fields. For server side results, add .is-valid and .is-invalid on the fields. Always validate again on the server. See Form Validation.

What is RTL support in Bootstrap 5?

Bootstrap 5 can show pages for right to left languages. Use the RTL CSS file (bootstrap.rtl.min.css), and set dir="rtl" and the lang attribute on the html tag. This is the reason why the left and right classes were renamed to start and end (ms-*, me-*, text-start), which follow the reading direction.

How do you make cards of equal height in Bootstrap?

<div class="row row-cols-1 row-cols-md-3 g-2">
  <div class="col"><div class="card h-100"><div class="card-body">Short text</div></div></div>
  <div class="col"><div class="card h-100"><div class="card-body">This card has more text, so it is taller, and the other cards become the same height.</div></div></div>
  <div class="col"><div class="card h-100"><div class="card-body">Short</div></div></div>
</div>

The preview is narrow, so the cards are stacked. On a wide screen they are in a row with the same height. See Cards.

What are CSS variables in Bootstrap 5?

<p id="p1" class="mb-0">Text</p>

const root = getComputedStyle(document.documentElement);
console.log('--bs-primary = ' + root.getPropertyValue('--bs-primary').trim());
console.log('--bs-body-font-size = ' + root.getPropertyValue('--bs-body-font-size').trim());
console.log('--bs-border-radius = ' + root.getPropertyValue('--bs-border-radius').trim());

The variables are defined in :root (and per component, like --bs-btn-bg). You can change them in your CSS or in JavaScript. See Bootstrap Customization.

How do you use Bootstrap with React or Vue?

• The CSS classes work the same in React and Vue. Import the CSS file once.
• For the JavaScript components (modal, dropdown, tooltip), avoid using the Bootstrap JS directly, because both Bootstrap and the framework want to control the DOM.
• Use a wrapper library: React-Bootstrap for React, or BootstrapVue Next for Vue 3.
• If you use the Bootstrap JS, create the instances in the lifecycle hooks and call dispose() when the component is removed.

How do you keep a Bootstrap page accessible?

• Use real button, nav, table and heading tags, not only div.
• Connect every field with a label (for and id).
• Keep the aria attributes in the Bootstrap examples (aria-label, aria-expanded, role="alert").
• Add .visually-hidden text for icon-only buttons and spinners.
• Do not use only color to show a meaning. Check the contrast of your custom colors.
• Do not remove the focus outline. Bootstrap handles the keyboard in modals, dropdowns and tabs, so test with the keyboard too.

How can you reduce the size of the Bootstrap CSS and JS?

• Sass: import only the components you need, instead of the full bootstrap.scss file. See Bootstrap Customization.
• JavaScript: with a bundler, import only the plugins you use: import { Modal } from 'bootstrap';
• Use the utility API of Sass to remove the utilities you do not use.
• Serve the files with gzip or brotli and a long cache time (a CDN does it).
• A tool that removes the unused CSS (like PurgeCSS) can also help, but test it well.

What is Popper and why does Bootstrap need it?

Popper calculates the best position for an element which floats near another element, and moves it if there is no space (for example, flips a menu from the bottom to the top). Bootstrap uses it for dropdowns, tooltips and popovers. The file bootstrap.bundle.js includes it, and bootstrap.js does not. See Setup and Installation.

What happens if the columns in a Bootstrap row add up to more than 12?

<div class="container text-center">
  <div class="row">
    <div class="col-8 border bg-light py-2">col-8</div>
    <div class="col-6 border bg-light py-2">col-6 (wraps to a new line)</div>
    <div class="col-4 border bg-light py-2">col-4</div>
  </div>
</div>

The first column takes 8, the second needs 6 (total 14), so it moves to the next line. The third (4) fits next to it. This is useful for some designs, but it is also a common mistake. See Grid System.

What is the difference between Bootstrap and Tailwind CSS?

Both are good. Bootstrap is great for fast development and for teams which want a ready design system. Tailwind is great when you need a custom design.

How do you use the Bootstrap JavaScript API?

<div class="collapse" id="c1"><div class="card card-body">Content</div></div>

const el = document.getElementById('c1');
const instance = bootstrap.Collapse.getOrCreateInstance(el, { toggle: false });
el.addEventListener('shown.bs.collapse', () => console.log('event: shown.bs.collapse'));
instance.show();
await new Promise(r => setTimeout(r, 600));
console.log('open: ' + el.classList.contains('show'));

See Bootstrap JavaScript.