Fix CLS with Bootstrap: Eliminate Layout Shift on Bootstrap Sites

Bootstrap is the most widely deployed CSS framework on the web, yet it ships with several behaviors that directly cause Cumulative Layout Shift. Carousels that do not reserve slide height, modals that remove the scrollbar and jank the viewport by 15 pixels, responsive images without explicit dimensions, alert components that collapse on load, and Bootstrap Icons loading via a web font without font-display:swap — each of these can push a site's CLS from a healthy 0.03 into the failing range above 0.25. The fixes are almost entirely CSS and a small amount of HTML attribute discipline. No framework swap required. This guide walks through every major Bootstrap-specific CLS source, with before-and-after measurements and production-ready code for Bootstrap 5.x.

Expected results

The following improvements represent a typical Bootstrap 5 marketing site with a hero carousel, a modal sign-up form, Bootstrap Icons in navigation, and dismissible alerts at the top of key pages. Results measured in Lighthouse 12 lab testing and confirmed in Chrome User Experience Report field data over a 28-day collection window.

Common causes of CLS in Bootstrap sites

Bootstrap does not cause CLS by itself. The framework provides utilities that, when used incorrectly or with missing attributes, leave the browser unable to reserve space for content before it loads. The most common sources, in rough order of CLS impact:

• Carousel slides without reserved height. Bootstrap's .carousel-inner has no intrinsic height until the first image loads. On slow connections, the browser renders the carousel container at zero height, then reflowing the entire page when the image arrives.
• Images missing width and height attributes. Bootstrap's .img-fluid class sets max-width:100%; height:auto, which correctly scales images responsively, but relies on the browser knowing the intrinsic dimensions. Without width and height HTML attributes, the browser cannot calculate the aspect ratio before the image downloads, so the space collapses to zero until load completes.
• Modal dialog removing the scrollbar. When a Bootstrap modal opens, the modal-open class is applied to body, which sets overflow:hidden. The scrollbar disappears, and the viewport widens by the scrollbar width (typically 15-17px on Windows). Every element that was laid out relative to the viewport width reflows. This single event is responsible for more than 30% of Bootstrap-related CLS reports.
• Alert auto-dismiss shifting above-fold content. Bootstrap's dismiss button fires a collapse animation that removes the element from document flow. If an alert sits above the fold and dismisses within 500ms of page load (a common pattern for "welcome back" banners), that collapse counts toward CLS.
• Bootstrap Icons web font loading without font-display:swap. The Bootstrap Icons CDN delivers a web font (bootstrap-icons.woff2) via a @font-face rule that defaults to font-display:block (or the browser default, which is equivalent). The browser renders an invisible space for icon glyphs during font load, then snaps them in once the font arrives, shifting any inline text adjacent to those icons.
• Popper.js dropdown and tooltip initialization during scroll. Bootstrap 5 uses Popper.js for dropdowns, tooltips, and popovers. When these are initialized lazily on the first scroll event rather than at DOMContentLoaded, Popper's layout measurement triggers a synchronous reflow that can cause visible shift on pages where dropdowns are positioned near other content.
• Grid recalculations from dynamically appended columns. Adding or removing .col-* columns via JavaScript after initial paint forces Bootstrap's grid to recalculate widths and gutters. If the DOM manipulation happens before the CLS measurement window closes, each reflow registers as layout shift.

Step-by-step fix

<!-- No height reservation — browser reflows on load -->
<iframe
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  frameborder="0"
  allowfullscreen>
</iframe>

<!-- ratio helper reserves 16:9 space before iframe loads -->
<div class="ratio ratio-16x9">
  <iframe
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    title="Product overview video"
    allowfullscreen>
  </iframe>
</div>

<!-- Ultra-wide cinematic banner -->
<div class="ratio ratio-21x9">
  <video autoplay muted loop playsinline>
    <source src="/hero.mp4" type="video/mp4">
  </video>
</div>

<!-- Custom 3:2 ratio -->
<div class="ratio" style="--bs-aspect-ratio: 66.67%">
  <iframe src="/map-embed" title="Location map"></iframe>
</div>

<div id="heroCarousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <!-- No width/height — browser cannot reserve space -->
      <img src="/slide-1.jpg" class="d-block w-100" alt="Slide one">
    </div>
    <div class="carousel-item">
      <img src="/slide-2.jpg" class="d-block w-100" alt="Slide two">
    </div>
  </div>
</div>

<!-- Preload first carousel image in <head> -->
<link rel="preload" as="image" href="/slide-1.jpg">

<div id="heroCarousel" class="carousel slide" data-bs-ride="carousel">
  <!-- Reserve height before images load -->
  <div class="carousel-inner" style="min-height: 480px">
    <div class="carousel-item active">
      <!-- Explicit width/height enables aspect-ratio calculation -->
      <img
        src="/slide-1.jpg"
        class="d-block w-100"
        alt="Slide one"
        width="1200"
        height="480"
        fetchpriority="high">
    </div>
    <div class="carousel-item">
      <img
        src="/slide-2.jpg"
        class="d-block w-100"
        alt="Slide two"
        width="1200"
        height="480"
        loading="lazy">
    </div>
  </div>
  <button class="carousel-control-prev" type="button"
    data-bs-target="#heroCarousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button"
    data-bs-target="#heroCarousel" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

/* Force uniform height across all carousel slides */
.carousel-inner {
  min-height: 480px;
}

.carousel-item img {
  height: 480px;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

@media (max-width: 768px) {
  .carousel-inner,
  .carousel-item img {
    min-height: 260px;
    height: 260px;
  }
}

/* Reserve scrollbar space permanently — prevents modal shift */
html {
  scrollbar-gutter: stable;
}

/* Bootstrap 5 adds padding-right to body on modal open
   to compensate for the scrollbar it removes.
   With scrollbar-gutter:stable the gutter is always reserved,
   so the padding compensation is no longer needed. */
body.modal-open {
  padding-right: 0 !important;
  overflow: hidden;
}

// Bootstrap 5's built-in ScrollBarHelper measures the scrollbar
// and applies the correct padding. Do not override modal events
// that clear this padding before Bootstrap has finished.

// WRONG — clears Bootstrap's padding compensation early
const modal = document.getElementById('myModal');
modal.addEventListener('hidden.bs.modal', () => {
  document.body.style.paddingRight = '0'; // breaks compensation
});

// CORRECT — let Bootstrap manage the padding, only act on content
modal.addEventListener('hidden.bs.modal', () => {
  // Only touch modal content, not body styles
  document.getElementById('modal-form').reset();
});

/* Reserve space for validation messages before they appear */
.invalid-feedback,
.valid-feedback {
  display: block !important; /* Override Bootstrap's display:none */
  visibility: hidden;         /* Invisible but occupies space */
  min-height: 1.25rem;        /* Reserve one line of message height */
  font-size: 0.875em;
}

/* Show message text when validation fires */
.was-validated .form-control:invalid ~ .invalid-feedback,
.form-control.is-invalid ~ .invalid-feedback {
  visibility: visible;
}

.was-validated .form-control:valid ~ .valid-feedback,
.form-control.is-valid ~ .valid-feedback {
  visibility: visible;
}

// WRONG — initializing on scroll triggers Popper reflows mid-page
window.addEventListener('scroll', () => {
  document.querySelectorAll('[data-bs-toggle="tooltip"]')
    .forEach(el => {
      if (!el._tooltip) {
        el._tooltip = new bootstrap.Tooltip(el);
      }
    });
}, { once: true });

// CORRECT — all Popper-based components initialized before first paint
document.addEventListener('DOMContentLoaded', () => {
  // Tooltips
  const tooltipTriggerList = document.querySelectorAll(
    '[data-bs-toggle="tooltip"]'
  );
  tooltipTriggerList.forEach(el => new bootstrap.Tooltip(el));

  // Popovers
  const popoverTriggerList = document.querySelectorAll(
    '[data-bs-toggle="popover"]'
  );
  popoverTriggerList.forEach(el => new bootstrap.Popover(el));

  // Dropdowns (usually auto-initialized by Bootstrap's data-api,
  // but explicit initialization ensures no scroll-triggered init)
  const dropdownTriggerList = document.querySelectorAll(
    '[data-bs-toggle="dropdown"]'
  );
  dropdownTriggerList.forEach(el => new bootstrap.Dropdown(el));
});

/* Override Bootstrap Icons @font-face to enable font-display:swap.
   Place this AFTER the Bootstrap Icons CSS link in your stylesheet. */
@font-face {
  font-family: "bootstrap-icons";
  src: url("/fonts/bootstrap-icons.woff2") format("woff2"),
       url("/fonts/bootstrap-icons.woff") format("woff");
  font-display: swap;
}

/* If self-hosting is not possible, use the CDN URL directly */
@font-face {
  font-family: "bootstrap-icons";
  src: url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/fonts/bootstrap-icons.woff2") format("woff2");
  font-display: swap;
}

// Delay auto-dismiss until after the CLS measurement window
// Google's heuristic: layout shifts within 500ms of load count
// toward the initial session window.
document.addEventListener('DOMContentLoaded', () => {
  const autoDismissAlerts = document.querySelectorAll(
    '.alert[data-auto-dismiss]'
  );

  autoDismissAlerts.forEach(alert => {
    const delay = parseInt(alert.dataset.autoDismiss, 10) || 5000;
    // Minimum 1500ms delay keeps dismissal outside CLS window
    const safeDelay = Math.max(delay, 1500);

    setTimeout(() => {
      // Use Bootstrap's Alert hide method for proper event firing
      const bsAlert = bootstrap.Alert.getOrCreateInstance(alert);
      bsAlert.close();
    }, safeDelay);
  });
});

Verification

After applying all six fixes, measure CLS using both lab and field tools. Lab tools (Lighthouse, WebPageTest) give instant feedback during development. Field data from the Chrome User Experience Report (CrUX) reflects real-user conditions across all device types and network speeds.

Lighthouse (Chrome DevTools): Run a Lighthouse Performance audit in an incognito window to avoid extensions. Look for the "Avoid large layout shifts" diagnostic. Lighthouse 12 reports CLS at the 75th percentile of its simulated runs. Click the individual CLS records to see which DOM elements are shifting and by how much.

WebPageTest (webpagetest.org): WebPageTest's filmstrip view shows layout shifts frame by frame. Set the test location to "Dulles, VA" (Moto G4, 3G Fast) to simulate a realistic low-end mobile experience. The "Cumulative Layout Shift" column in the waterfall view shows shift scores per resource load, which helps pinpoint whether the carousel image load, font load, or modal trigger is the primary source.

Chrome DevTools Performance panel: Record a page load in the Performance panel with screenshots enabled. Layout shift records appear as red bars in the Experience track. Click any red bar to see the shift score, the source rectangles that moved, and the timestamp relative to page load. This is the fastest way to confirm that a specific fix eliminated a specific shift.

PageSpeed Insights: Submit the production URL to PageSpeed Insights to read CrUX field data. Wait 28 days after deploying fixes for the field data to fully reflect improvements, since CrUX aggregates 28 days of Chrome user sessions. The "Lab Data" section shows the current Lighthouse score for immediate feedback.

Common pitfalls

• Setting min-height on the wrong carousel element. The min-height must go on .carousel-inner, not on .carousel or .carousel-item. Bootstrap's CSS positions .carousel-item elements absolutely inside .carousel-inner, so the inner element is what determines the container height.
• Using overflow: hidden on html instead of body for modal fix. Setting overflow: hidden on the html element also hides the scrollbar, but it prevents the scrollbar-gutter property from taking effect. Keep scrollbar-gutter: stable on html and let Bootstrap apply overflow: hidden to body only.
• Forgetting fetchpriority="high" on the first carousel image. Adding width and height attributes reserves the aspect-ratio space, but if the first slide image is still low priority in the browser's resource queue, there can be a brief period where the reserved space shows an empty background before the image arrives. Add fetchpriority="high" to the active slide's img element to bring it forward in the preload queue.
• Overriding Bootstrap's modal padding compensation without scrollbar-gutter. Some developers override body.modal-open { padding-right: 0 !important; } to fix visual issues without first adding scrollbar-gutter: stable. This re-introduces the full scrollbar shift. Always add scrollbar-gutter: stable to html before removing Bootstrap's padding compensation.
• Applying font-display: swap to Bootstrap Icons without preloading the font file. font-display: swap reduces the block period but introduces a swap period during which a fallback font renders. On slow connections, icons may show fallback characters for several seconds before swapping. Add a <link rel="preload" as="font" type="font/woff2" crossorigin> for the Bootstrap Icons font file to minimize the swap window. See the font loading CLS guide for a complete treatment of web font CLS strategies.

Frequently asked questions

Quick checklist