Bootstrap 5 CDN Fallback

Bootstrap 5 has a lot of changes and one of them is the fallback method in case the CDN link doesn’t load. Here is the Razor syntax for Bootstrap 5 fallback:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
  asp-fallback-src="js/bootstrap.bundle.min.js"
  asp-fallback-test="window.bootstrap">
</script>

<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
  asp-fallback-href="css/bootstrap.min.css"
  asp-fallback-test-class="visually-hidden" 
  asp-fallback-test-property="position" 
  asp-fallback-test-value="absolute"
  integrity="..." 
  crossorigin="..." />

These samples still use Bootstrap 4 but there are still a lot of good information on the following pages:

2 thoughts on “Bootstrap 5 CDN Fallback

    1. I’ve updated the post so that both are shown. The CSS test class changed from “sr-only” to “visually-hidden” because that class was renamed in BS5.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s