All Bootstrap Interview Questions

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.