Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
CSS Stylesheet (for bundlers)
✓ import 'ode-bootstrap/dist/css/ode-bootstrap.min.css';
✗ const odeBootstrap = require('ode-bootstrap');
This import statement is used by module bundlers (like Webpack, Vite) to include the minified CSS into your JavaScript/TypeScript project. Ensure your build configuration handles CSS files.
SCSS Source (for customization)
✓ @import 'ode-bootstrap/scss/ode-bootstrap';
If you are extending or overriding ODE Bootstrap styles using Sass/SCSS, import the source SCSS file within your main stylesheet. Requires a Sass compiler in your build process.
HTML Link Tag
✓ <link rel="stylesheet" href="/path/to/ode-bootstrap.min.css">
For direct inclusion in HTML, typically from a CDN or local static assets, not usually managed by JavaScript module imports.
This quickstart demonstrates how to import ODE Bootstrap's CSS into a modern TypeScript project using LitElement, and showcases basic usage of its customized Bootstrap components.
import 'ode-bootstrap/dist/css/ode-bootstrap.min.css';
// Assuming Bootstrap's JavaScript is also handled, if needed for interactive components
// import 'bootstrap/dist/js/bootstrap.bundle.min.js';
import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';
@customElement('ode-app')
export class OdeApp extends LitElement {
static styles = css`
/* Your application-specific styles, potentially overriding ODE Bootstrap */
.custom-section {
padding: 1.5rem;
background-color: var(--bs-light);
border-radius: 0.5rem;
margin-top: 1.5rem;
}
`;
@property({ type: String })
appName = 'My ODE Project';
render() {
return html`
<header class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#">${this.appName}</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</header>
<main class="container mt-4">
<div class="alert alert-success" role="alert">
Welcome to your ODE-styled application! This alert uses custom theme colors.
</div>
<button type="button" class="btn btn-secondary me-2">Secondary Button</button>
<button type="button" class="btn btn-outline-info">Info Outline Button</button>
<div class="custom-section">
<h4>Feature Section</h4>
<p>This area demonstrates custom content styled with ODE Bootstrap utility classes and some internal overrides.</p>
<span class="badge bg-warning text-dark">New Feature</span>
</div>
</main>
`;
}
}
// To integrate this web component into an HTML page:
// document.body.appendChild(document.createElement('ode-app'));
Errors
Common errors & fixes
Module not found: Error: Can't resolve 'ode-bootstrap/dist/css/ode-bootstrap.min.css'
The import path for the CSS file is incorrect or the package is not installed correctly.
fixVerify the package is installed (`npm install ode-bootstrap`) and check the exact file path in `node_modules/ode-bootstrap`.
Styles are not applied to my HTML elements after importing the CSS.
Your build tool (e.g., Webpack) is not configured to process CSS files, or the CSS is being overridden by other styles with higher specificity.
fixEnsure your bundler has the necessary CSS loaders (e.g., `css-loader` and `style-loader` for Webpack). Inspect element styles in the browser developer tools to check CSS specificity and inheritance.
Audit
Dependencies
bootstraprequiredCore CSS framework that ode-bootstrap extends and customizes.