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.
Prerequisites
- 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
Load Bootstrap CSS and JS via the page header
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.
1<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">2<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.
Embed a Bootstrap component in an HTML element
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.
1<div class="container">2 <div class="row g-3">3 <div class="col-md-4">4 <div class="card">5 <div class="card-body">6 <h5 class="card-title">Feature 1</h5>7 <p class="card-text">Description here.</p>8 </div>9 </div>10 </div>11 <div class="col-md-4">12 <div class="card">13 <div class="card-body">14 <h5 class="card-title">Feature 2</h5>15 <p class="card-text">Description here.</p>16 </div>17 </div>18 </div>19 </div>20</div>Expected result: A responsive Bootstrap card grid renders inside the HTML element with proper styling.
Scope Bootstrap styles to avoid conflicts with Bubble
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.
Pass dynamic Bubble data into Bootstrap components
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.
Decide when to use Bootstrap versus Bubble's native tools
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 working example
1BOOTSTRAP IN BUBBLE — SETUP SUMMARY2=====================================34LOADING BOOTSTRAP:5 Option A: Global (all pages)6 Settings → SEO / metatags → Header scripts7 Add Bootstrap CSS link + JS bundle89 Option B: Per-page10 Add HTML element to specific page11 Include CDN links inside the HTML element1213EMBEDDING COMPONENTS:14 1. Add HTML element to page15 2. Paste Bootstrap HTML inside16 3. Classes auto-styled by loaded CSS17 4. Use 'Insert dynamic data' for Bubble data1819CONFLICT PREVENTION:20 - Wrap Bootstrap HTML in scoped container21 - Override conflicts with custom CSS22 - Load only needed Bootstrap modules2324WHEN TO USE:25 Bootstrap: Presentational navbars, accordions, grids26 Bubble native: Workflow-connected elements, forms,27 Repeating Groups, database displays2829CDN (v5.3.3):30 CSS: cdn.jsdelivr.net/npm/bootstrap@5.3.3/.../bootstrap.min.css31 JS: cdn.jsdelivr.net/npm/bootstrap@5.3.3/.../bootstrap.bundle.min.jsCommon mistakes when using Bootstrap in Bubble
Why it's a problem: Loading Bootstrap globally when only one page needs it
How to avoid: Load Bootstrap inside an HTML element only on pages that need it
Why it's a problem: Trying to use Bootstrap grid for Bubble Repeating Groups
How to avoid: Use Bubble's native Repeating Group with layout settings for data lists; reserve Bootstrap grids for static HTML
Why it's a problem: Not scoping Bootstrap styles, causing Bubble elements to change
How to avoid: 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
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to add Bootstrap 5 to my Bubble.io app for a responsive navbar and card components. How do I load Bootstrap without conflicting with Bubble's native styling?
Add a responsive navigation bar using Bootstrap 5. Load the CDN in the header, create an HTML element with a Bootstrap navbar linking to Home, Products, and About. Make sure it does not break existing Bubble elements.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation