---
title: "How to Adapt Your Applications After Bootstrap 3 Removal"
slug: "bootstrap-3-removed-from-navvis-ivion"
updated: 2026-02-06T09:21:47Z
published: 2026-02-06T09:21:47Z
---
> ## Documentation Index
> Fetch the complete documentation index at: https://knowledge.navvis.com/llms.txt
> Use this file to discover all available pages before exploring further.
# How to Adapt Your Applications After Bootstrap 3 Removal
Bootstrap is a third-party CSS framework used for styling web applications. Earlier versions of IVION bundled Bootstrap 3 for basic UI components. Starting with NavVis IVION v11.10, Bootstrap 3 is no longer bundled with the IVION application. IVION now uses Angular Material exclusively for UI components.
## Overview of Changes
- Bootstrap 3 will no longer be included with IVION.
- IVION UI components will be based entirely on Angular Material framework.
- Embedded IVION applications continue to work without changes.
- Applications that use Bootstrap alongside IVION may require minor style adjustments.
## Impact Assessment
### **1. For Applications without Bootstrap**
No action is required and your embedded IVION applications will continue to function as before.
### **2. For Applications with Bootstrap**
Expect minor visual differences in IVION such as:
- Font size or font weight changes in dialogs
- Spacing or margin inconsistencies
- Form labels appearing differently
These issues can be resolved using the steps described below.
## Recommended Procedure
### **1. Remove Bootstrap**
If Bootstrap was only used because it was bundled with IVION, remove it from your application. Doing this ensures the following:
- Reduced page size
- Fewer CSS conflicts
- Modern, maintained UI framework
- No additional maintenance
## Alternate Procedure
### **1. Continue Using Bootstrap in Isolation**
If your application actively depends on Bootstrap 3, you can continue using it by isolating Bootstrap styles from IVION.
---
### How to Add Bootstrap Back (If Required)
**1. Import Bootstrap Explicitly**
Add Bootstrap to your HTML page.
```plaintext
Your Application
```
**2. Add the Bootstrap Reset (Recommended)**
1. Create a reset file `bootstrap-reset.scss` (or `.css`) to prevent Bootstrap from affecting IVION styles.
```plaintext
/* bootstrap-reset.scss
* This file neutralizes Bootstrap's interference with IVION components
* Import this AFTER Bootstrap but BEFORE your own styles
*/
html {
font-size: 16px !important;
}
.ivion .mdc-label,
.cdk-overlay-container .mdc-label {
font-weight: normal !important;
margin-bottom: 0 !important;
}
```
2. Import it to your stylesheet.
```plaintext
// your-app-styles.scss
@use './bootstrap-reset.scss';
// Your other styles here
```
Or link it directly in HTML.
```plaintext
```
#### 3. Verify Application Behavior
1. Load your embedded IVION application.
2. Open IVION dialogs and forms.
3. Confirm IVION styling and Bootstrap components behave as expected.
---
## About `bootstrap-reset.scss`
The `bootstrap-reset.scss` file targets specific style conflicts between Bootstrap and IVION, such as:
- **Resets Font Size**: Ensures `html` font-size remains 16px (Bootstrap changes this)
- **Fixes Label Styling**: Prevents Bootstrap from making Material Design labels bold
- **Removes Margin Issues**: Corrects margin problems on form labels in IVION dialogs
### Scope of Reset
The reset is **very minimal** and only targets:
- `.ivion` elements (the embedded IVION instance)
- `.cdk-overlay-container` elements (IVION dialogs, tooltips, etc.)
> The Bootstrap components outside IVION remain unaffected since the reset uses specific selectors.
#### When To Use
- If Bootstrap is imported and styling issues occur in IVION.
- As a preventive measure when embedding IVION.
- **Not** required if Bootstrap is not used.
---
## Reference
You can find working examples in the IVION API examples:
**Location:** `api-examples/poi-app/`
#### Key Files
| File | Description |
| --- | --- |
| `src/index.html` | Bootstrap import example |
| `src/assets/bootstrap-reset.scss` | Reset file |
| --- | --- |
| `src/assets/index.scss` | Reset import usage |
### Why This Change Was Made
Bootstrap 3 was removed to:
- Improve security as Bootstrap reached end-of-life in 2019 and no longer receives updates.
- Eliminate global CSS conflicts.
- Reduce bundle size (~120 KB)
- Modernize by using Angular Material, which is actively maintained and better suited for modern web applications.
- Simplify UI framework maintenance.
###