Bootstrap Components Accordion Alert Badge Card Carousel Modal Nav Tabs Navbar Pagination Placeholder Sidebar Spinner Toast Tooltip Custom Components Centered Column Code Block Loading Button Main (FOUC Protector) Theme Toggle

Bootstrap 5 Web Components

I like web components.

Bootstrap is great, and I use it for pretty much everything. However, the fact that there's a lot of copy-and-paste that happens with it means that it can be tedious to maintain and update. Also, it's just sometimes a pain to read. This repo is a collection of web components that I've created to make Bootstrap easier to use and faster to write. (This page is written using them--check the source!)

Hey, you!
This is a collection of web components that I created to make my personal Bootstrap sites easier to write quickly. It is not a complete and thorough implementation of Bootstrap's functionality, nor will it likely ever be. You are welcome to use these components as you see fit, but I make no guarantees that they will work for you. With that being said, contributions are welcome and accepted!

Every component that starts with bs- is a web component that wraps Bootstrap's functionality for that component. Every component is stylable by passing classes into the web component; the classes will be applied as expected to the Bootstrap component underneath.

Any other component is a custom component that involves Bootstrap in some way, but also includes additional functionality. These components include things like a button that automatically handles its own loading spinner and a main element that prevents the Flash of Unstyled Content (FOUC) common when using web components.

Usage

Start by laying out your normal Bootstrap HTML structure, like this:

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous"> </head> <body> <h1>Hello, world!</h1> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"> </script> </body> </html>

Once you have your basic template, copy the *.js files into your project that you want and include them at the bottom of your html file. With the script tags in place, you can use the web components in your html just like you would use Bootstrap's components.

<body> <!-- custom component alert! --> <bs-alert variant="info">Hi, I'm an alert!</bs-alert> <h1>Hello, world!</h1> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"> </script> <!-- Here's the script that defines the custom element above --> <script src="static/alert.js"></script> </body>

Flashes of Unstyled Content (FOUC)

One of the major pitfalls of web components (besides their relative verbosity) is that they take time to load. The HTML content will load in, but the browser won't know what to do with it until the web component is upgraded. This can cause a flash of unstyled content (FOUC) when the page loads. To prevent this, you can use the main-container component, which will prevent FOUC by preventing the page from rendering until all web components are upgraded.

This provides a nice loading screen (that loads in first) for your users while the web components load in. In practice, this takes very little time, but it hides the FOUC from your users and feels pretty slick.

<style> /* Mandatory styles for main-container FOUC protection */ main-container { opacity: 0; transition: opacity 0.5s ease-in-out; } </style> <!-- Note that the main.js script is loaded first --> <script src="static/main.js"></script> <main-container> <bs-alert variant="info">Loading...</bs-alert> <p>Your content here.</p> </main-container> <!-- Now that the main component has loaded, we can --> <!-- let it do its work while this loads --> <script src="static/alert.js"></script> Note that the main-container component is loaded in above the content so that it gives time for the other components to load and initialize.