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.

<!DOCTYPE html>
<html>
<head>
  <title>Your Application</title>
  <!-- Optional: enable Bootstrap 3 if your application still depends on it.
       Note that Bootstrap 3 is an older framework and no longer maintained;
       consider upgrading to a modern CSS solution for new development. -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
</head>
<body>
  <ivion></ivion>
  <!-- Your Bootstrap-based UI here -->
</body>
</html>

2. Add the Bootstrap Reset (Recommended)

1. Create a reset file bootstrap-reset.scss (or .css) to prevent Bootstrap from affecting IVION styles.

/* 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.

// your-app-styles.scss
@use './bootstrap-reset.scss';
// Your other styles here

Or link it directly in HTML.

<link rel="stylesheet" href="path/to/bootstrap-reset.css">

3. Verify Application Behavior

Load your embedded IVION application.
Open IVION dialogs and forms.
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.