{"id":10596,"library":"bs-brain","title":"Bootstrap Brain Framework (BSB)","description":"Bootstrap Brain (BSB) Framework, currently at version 2.0.4, is an extension layer built on top of Bootstrap 5 (specifically v5.3.3). It aims to provide additional pre-styled basic components and templates, augmenting Bootstrap's core capabilities without fundamentally altering its underlying structure. The framework focuses on delivering readily usable HTML and CSS patterns, making it suitable for rapid web development. It differentiates itself by offering a curated collection of free components and templates directly available for download, streamlining the design and development process for projects utilizing Bootstrap 5. Its release cadence aligns with Bootstrap's ecosystem, providing updates and new assets that are compatible with the latest stable Bootstrap releases. Primarily, BSB is a styling and templating resource rather than a JavaScript library for programmatic use.","status":"active","version":"2.0.4","language":"javascript","source_language":"en","source_url":"https://github.com/BootstrapBrain/bs-brain","tags":["javascript","bootstrap","css","html"],"install":[{"cmd":"npm install bs-brain","lang":"bash","label":"npm"},{"cmd":"yarn add bs-brain","lang":"bash","label":"yarn"},{"cmd":"pnpm add bs-brain","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"BSB is built on top of Bootstrap 5 and requires Bootstrap's core CSS and JavaScript to function correctly.","package":"bootstrap","optional":false}],"imports":[{"note":"BSB is primarily a CSS framework; its main 'import' is linking the stylesheet in HTML. No direct JavaScript exports are typically used in application code.","symbol":"CSS Stylesheet","correct":""},{"note":"While BSB is mostly CSS, some components might include minimal JavaScript. This would typically be included via a script tag, often after Bootstrap's JS. The `index.js` file exists in the repository, but no specific named exports are indicated for direct ES module imports.","symbol":"JavaScript (optional)","correct":""},{"note":"For projects using Sass, BSB's styles can be imported into your main SCSS file to allow for customization and integration with your build process. This assumes a Sass-enabled build setup.","symbol":"Sass/SCSS","correct":"@import 'node_modules/bs-brain/scss/bsb';"}],"quickstart":{"code":"\n\n\n \n \n BSB Quickstart\n \n \n \n \n\n\n
\n\n \n \n\n","lang":"html","description":"Demonstrates how to integrate Bootstrap Brain's CSS alongside Bootstrap 5 in a basic HTML page, showcasing a custom BSB class."},"warnings":[{"fix":"Consult the BSB documentation and Bootstrap's release notes for compatibility guides before upgrading Bootstrap. Test thoroughly after any Bootstrap update.","message":"BSB Framework is built on Bootstrap 5. Any breaking changes or updates in major or minor versions of Bootstrap could potentially affect BSB's functionality or appearance. Always verify compatibility when updating Bootstrap.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Inspect element using browser developer tools to identify conflicting styles. Prioritize BSB's stylesheet loading after Bootstrap's, and your custom CSS after BSB's, to leverage CSS specificity. Consider using BSB's Sass files for better integration and customization.","message":"BSB extends Bootstrap's styles, meaning there's a possibility of class name conflicts or style overrides if custom CSS or other Bootstrap extensions use the same class names as BSB, leading to unexpected styling.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Monitor the GitHub repository for recent commits and issues to gauge ongoing development. Be aware that critical bug fixes or Bootstrap compatibility updates might not be as frequent as with actively developed libraries.","message":"The package currently shows 'not healthy version release cadence and project activity because the last version was released a year ago' on npm security analysis, despite the README stating v2.0.4. This might imply slower updates or maintenance.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure that `bsb.css` is included *after* `bootstrap.min.css` in your HTML `` section. If using custom CSS that should override BSB, place it after `bsb.css`.","cause":"Incorrect order of stylesheet inclusion or CSS specificity issues. Bootstrap's styles or other custom CSS are overriding BSB's rules.","error":"Custom BSB styles are not applying or are being overridden."},{"fix":"Verify that `bootstrap.bundle.min.js` (or individual Bootstrap JS files) is correctly linked via a `