Freshers 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.