All Bootstrap Interview Questions

How do you create a carousel in Bootstrap?

The structure: a .carousel.slide wrapper, a .carousel-inner with several .carousel-item (one of them has .active), and the control buttons with data-bs-slide="prev" and "next". Add data-bs-ride="carousel" for autoplay. See Carousel.

How do you use Bootstrap Icons?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.css">

<i class="bi bi-heart-fill text-danger"></i>

Bootstrap Icons is a separate package, not included in the Bootstrap CSS. You can also use the SVG files. See Bootstrap Icons.

What is the difference between bootstrap.bundle.js and bootstrap.js?

See Setup and Installation.

How do you show or hide elements on different screen sizes in Bootstrap?

<div class="d-none d-md-block bg-success-subtle p-2 mb-2">Visible from md and up</div>
<div class="d-block d-md-none bg-warning-subtle p-2">Visible only below md</div>

Combine d-none with d-{breakpoint}-block (or inline, flex) to show an element from that size. See Utilities.

How do you create a form in Bootstrap 5?

<form>
  <div class="mb-3">
    <label for="e1" class="form-label">Email</label>
    <input type="email" class="form-control" id="e1">
  </div>
  <div class="form-check mb-3">
    <input class="form-check-input" type="checkbox" id="k1">
    <label class="form-check-label" for="k1">Remember me</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

The old .form-group is removed in Bootstrap 5. See Forms.

What are gutters in the Bootstrap grid?

In Bootstrap 5 the gutter classes are .g-0 to .g-5 (both directions), .gx-* (horizontal) and .gy-* (vertical). They can be responsive, like g-2 g-md-4. In Bootstrap 4 the class .no-gutters was used, and now it is .g-0. See Grid: Gutters, Offset and Order.

Is jQuery required for Bootstrap 5?

Bootstrap 4 needed jQuery for its plugins. Bootstrap 5 does not need it. The plugins are plain JavaScript classes (bootstrap.Modal, bootstrap.Tooltip and others). This makes the page lighter. If your old code uses jQuery with Bootstrap 4, it can stay, but it is not a part of Bootstrap anymore. See Migrating from Bootstrap 4 to 5.

What is the difference between d-none, invisible and visually-hidden?

Use .visually-hidden (the old name was .sr-only) for labels like “Loading…” in a spinner. See Utilities.

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.