# How to Use Bootstrap in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 15-20 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

Bootstrap can be added to Bubble through HTML elements that load the Bootstrap CDN and apply Bootstrap classes to custom HTML structures. While Bubble has its own Flexbox-based responsive engine, Bootstrap is useful for specific pre-built components like navbars, card grids, or accordions. This tutorial covers loading Bootstrap, embedding components, avoiding style conflicts, and knowing when native Bubble tools are better.

## Overview: Bootstrap in Bubble

This tutorial shows you how to integrate Bootstrap CSS into your Bubble app. Bubble has its own responsive engine, so Bootstrap is not always necessary. However, it can rapidly style complex components like navbars, card grids, or modals inside HTML elements. You will learn loading, embedding, conflict avoidance, and when native tools are better.

## Before you start

- A Bubble app where you want to add Bootstrap components
- Basic familiarity with HTML and CSS classes
- Understanding of Bubble's HTML element

## Step-by-step guide

### 1. Load Bootstrap CSS and JS via the page header

Go to Settings → SEO / metatags. In 'Script/meta tags in header', paste the Bootstrap CDN links. This loads Bootstrap on every page. If you only need Bootstrap on specific pages, load it inside an HTML element on those pages instead.

```
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
```

> Pro tip: Loading globally adds ~25KB CSS to every page. If you only need it on one page, load it inside an HTML element on that page only.

**Expected result:** Bootstrap CSS and JS are loaded and Bootstrap classes are available in HTML elements.

### 2. Embed a Bootstrap component in an HTML element

On your page in the Design tab, click '+' and add an HTML element. Resize it to fit where you want the component. Paste Bootstrap HTML code for your component — a card grid, navbar, or accordion. Classes like 'container', 'row', 'col-md-4', and 'card' will be styled automatically.

```
<div class="container">
  <div class="row g-3">
    <div class="col-md-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Feature 1</h5>
          <p class="card-text">Description here.</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Feature 2</h5>
          <p class="card-text">Description here.</p>
        </div>
      </div>
    </div>
  </div>
</div>
```

**Expected result:** A responsive Bootstrap card grid renders inside the HTML element with proper styling.

### 3. Scope Bootstrap styles to avoid conflicts with Bubble

Bootstrap's CSS can conflict with Bubble's native styles, changing buttons, fonts, or spacing unexpectedly. Wrap your Bootstrap code in a container with a unique class. You can also load only the specific Bootstrap modules you need rather than the full library, or download a custom build with a prefix from the Bootstrap website.

> Pro tip: If Bootstrap changes the look of your Bubble buttons or text, use CSS specificity to override Bootstrap's defaults on Bubble elements.

**Expected result:** Bootstrap styles only apply to your HTML elements and do not interfere with Bubble's native styling.

### 4. Pass dynamic Bubble data into Bootstrap components

To display dynamic data inside Bootstrap HTML, use Bubble's 'Insert dynamic data' button inside the HTML element editor. Click where you want data, then click 'Insert dynamic data' and choose your source. Bubble replaces the expression with actual values at runtime. For repeating data, use Bubble's native Repeating Group with custom CSS rather than Bootstrap grids.

**Expected result:** Bootstrap components display live data from your Bubble database.

### 5. Decide when to use Bootstrap versus Bubble's native tools

Bubble's built-in responsive engine handles most needs. Use Bubble's native tools for: elements needing workflows, database-connected displays, and forms. Use Bootstrap only for: complex HTML components that are purely presentational and do not need workflow integration. When a component needs both styling and Bubble data, prefer native elements with custom CSS.

**Expected result:** You can make informed decisions about when Bootstrap adds value versus when Bubble's native engine is better.

## Complete code example

File: `Workflow summary`

```text
BOOTSTRAP IN BUBBLE — SETUP SUMMARY
=====================================

LOADING BOOTSTRAP:
  Option A: Global (all pages)
    Settings → SEO / metatags → Header scripts
    Add Bootstrap CSS link + JS bundle

  Option B: Per-page
    Add HTML element to specific page
    Include CDN links inside the HTML element

EMBEDDING COMPONENTS:
  1. Add HTML element to page
  2. Paste Bootstrap HTML inside
  3. Classes auto-styled by loaded CSS
  4. Use 'Insert dynamic data' for Bubble data

CONFLICT PREVENTION:
  - Wrap Bootstrap HTML in scoped container
  - Override conflicts with custom CSS
  - Load only needed Bootstrap modules

WHEN TO USE:
  Bootstrap: Presentational navbars, accordions, grids
  Bubble native: Workflow-connected elements, forms,
    Repeating Groups, database displays

CDN (v5.3.3):
  CSS: cdn.jsdelivr.net/npm/bootstrap@5.3.3/.../bootstrap.min.css
  JS:  cdn.jsdelivr.net/npm/bootstrap@5.3.3/.../bootstrap.bundle.min.js
```

## Common mistakes

- **Loading Bootstrap globally when only one page needs it** — Adds ~25KB CSS to every page load, increasing times and WU consumption unnecessarily Fix: Load Bootstrap inside an HTML element only on pages that need it
- **Trying to use Bootstrap grid for Bubble Repeating Groups** — Bubble's Repeating Group renders its own HTML structure incompatible with Bootstrap's row/col system Fix: Use Bubble's native Repeating Group with layout settings for data lists; reserve Bootstrap grids for static HTML
- **Not scoping Bootstrap styles, causing Bubble elements to change** — Bootstrap resets many HTML elements by default, overriding Bubble's native styling Fix: Wrap all Bootstrap HTML in a container with a unique class to prevent style leakage

## Best practices

- Only load Bootstrap on pages that actually use Bootstrap components
- Scope Bootstrap styles inside a wrapper class to prevent conflicts
- Prefer Bubble's native responsive engine for workflow-connected elements
- Use Bootstrap for presentational components without Bubble data connections
- Keep Bootstrap components inside HTML elements only
- Use the Bootstrap CDN rather than uploading files to avoid version issues
- Test thoroughly across devices since Bootstrap and Bubble responsive behaviors can interact

## Frequently asked questions

### Is Bootstrap necessary for responsive design in Bubble?

No. Bubble has its own Flexbox-based responsive engine with Row, Column, and Align to Parent layouts. Bootstrap is only useful for specific pre-built components in HTML elements.

### Will Bootstrap slow down my Bubble app?

Loading the full Bootstrap adds ~50KB. Load it per-page or use a minimal custom build to reduce impact.

### Can I use Bootstrap modals and dropdowns in Bubble?

Yes. Include the Bootstrap JS bundle and they work inside HTML elements. However, Bubble has native popups and dropdowns that integrate better with workflows.

### Can I apply Bootstrap classes to Bubble's native elements?

Not directly. Bubble does not expose class attributes on native elements. Use Bootstrap classes only inside HTML elements.

### Can RapidDev help with custom UI styling in my Bubble app?

Yes. RapidDev can implement custom designs using native Bubble styling, custom CSS, and third-party libraries like Bootstrap where appropriate.

### Which Bootstrap version works best with Bubble?

Bootstrap 5 is recommended because it dropped jQuery, reducing conflicts with Bubble's JavaScript. Avoid Bootstrap 3 or 4.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/use-bootstrap-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/use-bootstrap-in-bubble