How to Resolve Bootstrap Style Conflicts in Bold BI

How to Resolve Bootstrap Style Conflicts in Bold BI

This article explains the steps to resolve Bootstrap style conflicts in the Bold BI embedding application while using Bootstrap CSS.

Cause:

When working with embedded dashboards you may experience UI glitches when using your own Bootstrap CSS. The master-slave configuration dialog, adding more rows in the dashboard designer, and auto-refresh settings dialog is some of the areas where the style issues occur.

Master-slave configuration dialog:

Solution:

Step 1: Download the CSS file

• To resolve the Bootstrap style conflicts, you need to download the CSS file named “boldbi.bootstrapcompatibility.min.css” attached here.

Step 2: Move the CSS file to the Bold BI installation location

• Extract the downloaded attachment and move the “boldbi.bootstrapcompatibility.min.css” file to the following directory in your Bold BI installed location:
  “…\BoldServices\bi\web\wwwroot\webdesignerservice\themes\boldbi.bootstrapcompatibility.min.css”.

Step 3: Refer to the CSS file in your application

• Refer to the “boldbi.bootstrapcompatibility.min.css” file in your embedding application from the above-mentioned directory.
• We suggest you to refer the “bootstrap.min.css” before the Bold BI script files get referred.
  
  

Note: Replace http://example.boldbi.com/ with your Bold BI root URL.

This article provides a workaround for resolving Bootstrap style conflicts in the Bold BI embedding application while using Bootstrap CSS.
After following the above steps, the Bootstrap style conflicts in your Bold BI embedding application should be resolved.

Related Links:

• https://help.boldbi.com/embedded-bi/working-with-dashboards/dashboard-theme/