Skip to main content

Usage & CDN

Include boodoo in your project using easy-to-use CDN links for quick prototyping, or reference the compiled bundles locally.

CSS only

The quickest way to get started is to drop the compiled and minified CSS into your page. Just one file gets you the global styles, grid, all components, and utilities.

<link href="https://cdn.dihadiwala.com/s/app_299a167f351ab3de/2026/09/boodoo.min-f5986ea1.css" rel="stylesheet">

You can also load just the grid, reboot, or utilities separately for the leanest possible page:

<!-- Grid only -->
<link href="https://cdn.dihadiwala.com/s/app_299a167f351ab3de/2026/09/boodoo-grid.min-f2180304.css" rel="stylesheet">

<!-- Utilities only -->
<link href="https://cdn.dihadiwala.com/s/app_299a167f351ab3de/2026/09/boodoo-utilities.min-6a1dbb55.css" rel="stylesheet">

Quick CDN Demo

Once included, all Boodoo components, typography, buttons, and responsive grid work immediately out of the box with no build step required:

<div class="alert alert-primary d-flex align-items-center gap-2 mb-3" role="alert">
  <span>✨</span>
  <div>
    <strong><span>CDN Ready!</span></strong>
    <span>Boodoo loaded instantly via CDN link with zero bundler setup.</span>
  </div>
</div>
<div class="d-flex flex-wrap gap-2">
  <button type="button" class="btn btn-primary"><span>Primary Action</span></button>
  <button type="button" class="btn btn-outline-secondary"><span>Secondary</span></button>
  <button type="button" class="btn btn-success"><span>Live Demo</span></button>
</div>

JavaScript

Many boodoo components require the JavaScript bundle to function. Add it right before the closing </body> tag:

<script src="https://cdn.dihadiwala.com/s/app_299a167f351ab3de/2026/09/boodoo-22f6ff5d.js"></script>

If you only need a subset, import individual components from the ESM build:

<script type="module">
  import { Modal, Toast, Dropdown } from 'https://cdn.dihadiwala.com/s/app_299a167f351ab3de/2026/09/boodoo.esm-a232cde6.js';
  // components are auto-initialized from their data-* attributes
</script>

Local bundle

Prefer hosting yourself? Copy the contents of dist/ from the download into a folder and reference them relatively:

<link rel="stylesheet" href="css/boodoo.min.css">
<script src="js/boodoo.js"></script>

JavaScript modules

Our JavaScript is split into modules. The UMD-format bundle assigns a global boodoo object with every component, so you can call them programmatically:

<script>
  boodoo.toast('Hello from boodoo!', { title: 'Welcome' });
  new boodoo.Modal(document.getElementById('myModal')).show();
</script>