Bootstrap 5 CheatSheet is an open-source, interactive web reference from ThemeSelection for looking up Bootstrap 5 utility classes, Sass variables, and mixins, with built-in comparison against Bootstrap 4. It runs entirely in the browser and is free to use under the MIT license.
What is Bootstrap 5 CheatSheet?
Bootstrap 5 CheatSheet is an interactive list that indexes Bootstrap 5 classes, variables, and mixins. You type a keyword into the search bar and the tool returns matching entries, shows a live HTML preview with the rendered style, and lets you copy the code snippet with one click. It is built by ThemeSelection and available as an open-source project on GitHub, licensed under MIT.
Key Features
- Instant search — Filter the full list of Bootstrap 5 classes, variables, and mixins as you type; results update without a page reload.
- Bootstrap 4 diff highlighting — Entries that changed between Bootstrap 4 and 5 are marked so you can spot renamed, removed, or new classes at a glance.
- Live preview — Each class displays a rendered HTML example alongside the CSS snippet, powered by Ace Editor for in-browser code display.
- Editable snippets — You can modify the code snippet on the fly and see the preview update immediately.
- One-click copy — Copy any snippet to your clipboard for direct use in your own projects.
- Three dedicated pages — Classes at the root URL, variables at /variables.html, and mixins at /mixins.html, so you can jump straight to the category you need.
- Built with Gulp — The project source uses Gulp to compile SCSS and PUG files into the CSS, JS, and HTML that powers the site, making it easy for contributors to rebuild and extend it.
Who is it for?
- Front-end developers upgrading from Bootstrap 4 — Check which utility classes changed names or behavior between versions before migrating a codebase.
- Web designers who write HTML/CSS — Look up the exact class name for spacing, typography, colors, and layout without browsing the full Bootstrap docs.
- Bootstrap theme and template authors — Confirm variable and mixin names when customizing Sass source files, using the variables and mixins pages.
What can you do with it?
- Rapid prototyping: Look up a utility class, copy its snippet, and paste it into your markup to style elements quickly.
- Learning Bootstrap 5: Compare the old Bootstrap 4 class against the new one to understand what changed and why.
- Customizing themes: Find the right Sass variable or mixin name for your own overrides and check its default value.
