styling/bootstrap
A Bootstrap 5 Playground and Online Editor
Load Bootstrap 5 from the CDN and its grid, components and JavaScript modals and toasts work in the preview at once — a playground and online editor in one tab, with nothing to install.
<!-- CSS + JS loaded from the CDN, then just markup -->
<div class="card shadow-sm" style="max-width: 22rem">
<div class="card-body">
<h5 class="card-title">Ship faster</h5>
<p class="card-text text-secondary">
Components that just work.
</p>
<button class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#hello">
Open modal
</button>
</div>
</div>01 platform
What ships the moment you load Bootstrap 5
Bootstrap's appeal was never that it is clever — it is that a responsive layout and a working modal are a link and a class away. Use it as a quick playground, a full online IDE, or a sandbox for a whole multi-page project, with the link already in place.
-
The grid and utilities, ready
The twelve-column flexbox grid, spacing, color and display utilities are all available the instant the page loads. You lay out with
row,col-md-4andd-flex, not with hand-written media queries. -
Components that already work
Cards, navbars, forms, buttons and badges are stock classes. The interactive ones — modal, dropdown, tooltip, toast, offcanvas — work too, because the Bootstrap JavaScript bundle is loaded alongside the CSS.
-
No jQuery, no build
Bootstrap 5 dropped jQuery, so the components run on vanilla JavaScript with Popper for positioning. Nothing compiles; the CDN's CSS and JS are the whole dependency.
-
Private and installable
The project lives in your browser, never on a server, and installs as a PWA — so a dashboard you are prototyping keeps working offline and stays yours.
02 deep dive
The JavaScript components, actually working
A screenshot of a modal is easy. A modal that opens, traps focus and closes on escape is the part that usually needs setup — and here it does not.
Data attributes wire them up. data-bs-toggle="modal" and data-bs-target="#id" are enough — Bootstrap's bundle finds them on load and attaches the behavior, so a modal, dropdown or collapse works with no initialization code from you.
Popper handles positioning. Tooltips and dropdowns are placed by Popper, which ships inside the bundle, so they flip and shift to stay on screen the way they do in a production Bootstrap app.
Or drive them from JavaScript. When you need to open a toast or a modal in response to your own logic, new bootstrap.Toast(el).show() is there — the same API the docs describe, available in the console beside the preview.
- toggle
- data-bs-toggle
- positioning
- Popper, bundled
- api
- new bootstrap.Modal(el)
- jquery
- none needed
<button class="btn btn-primary"
data-bs-toggle="toast"
data-bs-target="#saved">Save</button>
<div id="saved" class="toast" role="status">
<div class="toast-body">Changes saved.</div>
</div>03 features
What the Bootstrap editor gives you
Everything below is on the moment you open the Bootstrap editor, which starts as a full admin dashboard — a data table, stat cards, progress bars and a working modal, dropdown, tooltip and toast.
-
Live preview, four ways
Full width, split beside the code, in real device frames, or in its own tab. The device frames are how you confirm the grid collapses the way
col-md-*promises. -
The interactive bundle
The Bootstrap JavaScript is loaded, so modals, dropdowns, tooltips, toasts, offcanvas and collapse all respond — the components that a plain CSS import would leave inert.
-
The VS Code engine
Monaco brings multi-cursor, find-and-replace across files and the command palette, which is what a page full of utility and component classes needs to stay editable.
-
npm as an alternative
Prefer a pinned version over the CDN? Install bootstrap from the npm panel and it resolves through esm.sh into the import map — same components, your chosen version.
-
The console beside the page
Drive a component from JavaScript and watch it in the console next to the preview, so a programmatic modal or toast is easy to debug as you wire it up.
-
Export and keep it
Export the project as a zip and open it locally; it is ordinary HTML, CSS and JavaScript with a CDN link, so there is no proprietary format to unwind.
04 deep dive
Recoloring Bootstrap with its CSS variables
Bootstrap 5.3 exposes its design tokens as CSS custom properties, which is what makes theming possible here without recompiling anything.
Override the --bs- variables. Bootstrap reads --bs-primary, --bs-body-bg, --bs-border-radius and dozens more at runtime, so setting them in your own stylesheet recolors the framework live — no Sass, no build.
Dark mode is one attribute. data-bs-theme="dark" on the root switches Bootstrap's whole color system to its built-in dark palette, and data-bs-theme on a single element themes just that section.
Honest about the boundary. Recompiling Bootstrap's Sass with changed $variables — the deepest form of customization — is a local build step, because it rebuilds the framework itself. In the browser you theme through the CSS variables and data-bs-theme, which covers most of what that Sass rebuild was for.
- tokens
- --bs-* variables
- dark mode
- data-bs-theme
- live
- no recompile
- deep Sass
- local build
:root {
--bs-primary: #6d28d9;
--bs-body-bg: #0f172a;
--bs-border-radius: 0.75rem;
}
/* or flip the whole palette: */
/* <html data-bs-theme="dark"> */05 pipeline
How the CDN gives you Bootstrap with no build
Four steps, all in the browser, between an empty document and a working component. There is no compile in the middle of it.
-
Load the CSS
A single stylesheet link from the jsDelivr CDN brings in the grid, utilities and component styles, so the visual half of Bootstrap is present before you write a line.
-
Load the bundle
The Bootstrap JavaScript bundle — vanilla JS with Popper inside — loads from the same CDN and is what makes the interactive components more than static markup.
-
Write markup
You add components as classes and
data-bs-*attributes. There is nothing to import per component and no initialization step to remember for the common cases. -
Auto-initialize
On load the bundle finds the data attributes and attaches behavior, so a modal opens and a tooltip appears without any code of your own — and the console is there when you want to drive one manually.
06 workflow
From an empty page to a working dashboard
No install, no compile, no dev server — the whole loop from a blank document to a responsive dashboard with live components.
- new project → Bootstrap Admin
- created index.html · Bootstrap 5.3 CSS + JS linked
- add: row > col-md-4 stat cards
- grid live · collapses to one column under 768px
- add: data-bs-toggle="modal"
- bundle wired the modal · opens, traps focus
- set --bs-primary: #6d28d9
- buttons, links and accents recolored live
- export project.zip
- plain HTML/CSS/JS · opens anywhere
-
Nothing to initialize
The common components wire themselves up from data attributes, so a working modal is markup, not a setup routine.
-
Responsive by default
The grid is responsive out of the box; the device frames show each breakpoint so a
col-md-*collapse is something you see. -
Honest about deep theming
CSS variables and data-bs-theme recolor live; a full Sass rebuild of the framework is the one step that belongs on a local machine.
07 ecosystem
Bootstrap beside the rest of the toolkit
Bootstrap is one way to style a page among several the editor supports, and it compiles or runs everything beside it per file.
08 languages
What the editor renders and runs with Bootstrap
Bootstrap markup sits beside everything else the editor compiles in the browser, renders natively, or executes on demand.
Compiled in your browser11
Zero build step. Transform runs on a Web Worker, so typing never blocks.
- JSX
- TSX
- TypeScript
- Vue SFC
- Svelte
- Angular (JIT)
- SolidJS
- SCSS
- Sass
- Less
- Pug
Rendered natively8
Straight to the live preview, no transform in the way.
- HTML
- CSS
- JavaScript
- JSON
- Markdown
- Jupyter (.ipynb)
- SVG
- YAML
Executed on demand22
70+ languages run through a self-hosted Piston engine. stdout, stderr, images and tracebacks land in the console.
- Python
- Java
- C
- C++
- C#
- Go
- Rust
- Ruby
- PHP
- Kotlin
- Swift
- Lua
- Scala
- Perl
- Haskell
- Elixir
- Dart
- R
- Julia
- SQLite
- Bash
- PowerShell
09 questions
Bootstrap in the browser — common questions
Do I need to install or build anything to use Bootstrap?
No. XCODX loads Bootstrap 5 from the jsDelivr CDN — the CSS and the JavaScript bundle — so the grid, utilities and interactive components are available the moment the page loads. There is no npm install, no Sass build and nothing to configure.
Which version of Bootstrap does the editor load?
Bootstrap 5.3 from the CDN, both the stylesheet and the bundled JavaScript. If you need a specific pinned version, you can install bootstrap from the npm panel instead and it resolves through esm.sh into the import map.
Do the JavaScript components like modals and toasts work?
Yes. The Bootstrap bundle is loaded, so modals, dropdowns, tooltips, toasts, offcanvas and collapse all work. Add the data-bs-* attributes and the bundle wires them up on load, or drive them from JavaScript with the documented API.
Does Bootstrap 5 still need jQuery?
No. Bootstrap dropped jQuery in version 5; the components run on vanilla JavaScript with Popper for positioning, both included in the bundle the editor loads. There is nothing extra to add for them to work.
Can I theme Bootstrap without recompiling Sass?
Yes. Bootstrap 5.3 exposes its tokens as --bs- CSS variables, so overriding --bs-primary or --bs-body-bg recolors the framework live, and data-bs-theme="dark" flips the whole palette. A full Sass rebuild is only needed for the deepest customization, which is a local step.
Can I use the full Bootstrap grid and utilities?
Yes. The complete twelve-column responsive grid and the spacing, color, flex and display utilities are all present, so row, col-md-4, d-flex and the rest behave exactly as they do in a local Bootstrap project.
Can I install Bootstrap from npm instead of the CDN?
Yes. Search for bootstrap in the npm panel and install it; it resolves through esm.sh into a native import map. That is the route to pin an exact version or to import only the pieces you use.
Can I build a fully custom Sass theme in the browser?
Recompiling Bootstrap's Sass with your own $variables rebuilds the framework itself, which is a local build step. In the browser you customize through the --bs- CSS variables and data-bs-theme, which covers the color, radius and dark-mode changes most projects actually make.
Do I need to install anything to use XCODX Studio?
No. XCODX Studio is a browser-based IDE — the editor, the compilers and the preview all run client-side. There is no download, no package manager to set up and no configuration file to write. Opening the editor is the whole setup step.
Where is my code stored?
In your own browser. Projects, file history and Git objects live in local storage on your device and are never uploaded to a server. That also means XCODX works offline: it is a Progressive Web App, so you can install it and keep coding with no connection.
Is XCODX Studio free?
Yes. The editor, the live preview, the 70+ language runtimes, npm installs, Git and the integrated terminal are all free to use.
Can I use XCODX on a tablet or Chromebook?
Yes. The editor is a responsive web app, so a Chromebook, an iPad or an Android tablet gets the same compilers and the same preview a laptop does — there is no desktop-only build, because there is no build to install at all. The layout adapts to the screen rather than shrinking a desktop UI into it.
Can I export a project or move it to my own machine?
Yes. Export the whole project as a zip with its folder structure intact and open it locally, or commit it and push. It is ordinary source on disk from that point on — no proprietary format and no lock-in, which is also why importing an existing repository from GitHub works the same way in reverse.
Nothing to install
Open the Bootstrap editor now
A responsive dashboard with working components on screen in under a minute — loaded from the CDN, with no account wall and nothing to install.