Docs / Getting Started

Getting Started

A guide for integrating the Enterprise Bootstrap Theme into your project.

What You Get

The dist/ directory contains everything you need:

PathPurpose
css/custom.cssCompiled theme CSS (Bootstrap 5 + enterprise overrides)
js/bootstrap.bundle.min.jsBootstrap 5 JavaScript bundle (includes Popper.js)
icons/bootstrap-icons.cssBootstrap Icons CSS
icons/fonts/Bootstrap Icons font files
components/errordialog/errordialog.cssErrorDialog component styles
components/errordialog/errordialog.jsErrorDialog component script
docs/This documentation (HTML)

Minimal HTML Boilerplate

Copy this into your HTML file to start using the theme:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My App</title>

    <!-- Google Fonts: Inter (body) + JetBrains Mono (code) -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">

    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="icons/bootstrap-icons.css">

    <!-- Enterprise Theme CSS -->
    <link rel="stylesheet" href="css/custom.css">
</head>
<body>
    <div class="container py-4">
        <h1>Hello, Enterprise Theme</h1>
        <p>Your content here.</p>
        <button class="btn btn-primary">Action</button>
    </div>

    <!-- Bootstrap JS -->
    <script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>

Loading Order

The load order matters:

  1. Google Fonts — must come before any CSS so fonts are available when styles are parsed.
  2. Bootstrap Icons CSS — if you use icons anywhere.
  3. Theme CSS (custom.css) — contains Bootstrap 5 + all enterprise overrides.
  4. Component CSS — load per-component CSS only if you use that component.
  5. Bootstrap JS — at the end of <body> for modals, dropdowns, tooltips, etc.
  6. Component JS — after Bootstrap JS, since components depend on its Modal/Collapse APIs.

Adding a Component (ErrorDialog example)

<!-- Additional CSS in <head> -->
<link rel="stylesheet" href="components/errordialog/errordialog.css">

<!-- Additional JS before </body> -->
<script src="components/errordialog/errordialog.js"></script>

<!-- Container element somewhere in <body> -->
<div id="error-dialog-container"></div>

<!-- Trigger an error dialog -->
<script>
    showErrorDialog("error-dialog-container", {
        title: "Connection Lost",
        message: "The server is not responding. Your changes have been saved locally.",
        suggestion: "Check your network connection and try again.",
        errorCode: "NET_TIMEOUT",
        correlationId: "a1b2c3d4-e5f6-7890"
    });
</script>

See the Component Reference for full API documentation.

Verification Checklist

After integrating, verify these items:

Theme Design Principles

This theme is designed for enterprise SaaS applications with these characteristics:

See DESIGN_TOKENS.md for every customisable variable.

Next Steps