Applying Bootstrap Themes to Bold Reports Report Designer

Published:

Updated:

Bold Reports offers you the flexibility to elevate the visual appeal of your reports by applying different themes. This guide will walk you through the process of applying the Bootstrap Light and Bootstrap Dark themes using their corresponding stylesheets within the Report Designer v2.0 component.

Bootstrap Light Theme

To apply the Bootstrap Light theme to your Report Designer, include the following stylesheet link in your HTML file:

<link href="https://cdn.boldreports.com/5.4.35/content/v2.0/bootstrap-light/bold.report-designer.min.css" rel="stylesheet" />

Bootstrap Dark Theme

For the Bootstrap Dark theme, use this stylesheet link:

<link href="https://cdn.boldreports.com/5.4.35/content/v2.0/bootstrap-dark/bold.report-designer.min.css" rel="stylesheet" />

Sample HTML Page for Report Designer with Bootstrap Light Theme

Here is an example of an HTML page setup for the Report Designer using the Bootstrap Light theme:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Report Designer with Bootstrap Light Theme</title>
	
    <!-- Report Designer component styles -->
    <link href="https://cdn.boldreports.com/5.4.35/content/v2.0/bootstrap-light/bold.report-designer.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/show-hint.min.css" rel="stylesheet" />
    <script src="https://cdn.boldreports.com/external/jquery-1.10.2.min.js" type="text/javascript"></script>
	
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/show-hint.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/sql-hint.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/mode/sql/sql.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/mode/vb/vb.min.js" type="text/javascript"></script>

    <!-- Report Designer component dependent scripts -->
    <script src="https://cdn.boldreports.com/5.4.35/scripts/v2.0/common/bold.reports.common.min.js"></script>
    <script src="https://cdn.boldreports.com/5.4.35/scripts/v2.0/common/bold.reports.widgets.min.js"></script>

    <!-- Report Viewer and Designer component scripts -->  
    <script src="https://cdn.boldreports.com/5.4.35/scripts/v2.0/bold.report-viewer.min.js"></script>
    <script src="https://cdn.boldreports.com/5.4.35/scripts/v2.0/bold.report-designer.min.js"></script>				  
</head>
<body>
    <!-- Creating a div tag which will act as a container for boldReportDesigner widget.-->
    <div style="height: 600px; width: 950px; min-height: 400px;" id="designer"></div>
        <script type="text/javascript">
            $(function () {
                $("#designer").boldReportDesigner({
                    serviceUrl: "https://demos.boldreports.com/services/api/ReportingAPI"
                });
            });
        </script>		
</body>
</html>

Bootstrap Light Theme Preview:

Bootstrap Dark Theme Preview:

You can download the complete sample application for the Embedded JavaScript Report Designer with the Bootstrap themes from the provided link.

Applying Bootstrap Themes to Bold Reports Report Designer

Bootstrap Light Theme

Bootstrap Dark Theme

Sample HTML Page for Report Designer with Bootstrap Light Theme

See Also:

Access denied