Applying Bootstrap Themes to Bold Reports Report Viewer

Published:

Updated:

Bold Reports allows you to utilize various themes to improve the aesthetics of your reports. This guide will demonstrate how to apply Bootstrap Light and Bootstrap Dark themes to the Report Viewer v2.0 component.

Bootstrap Light Theme

To apply the Bootstrap Light theme to your Report Viewer, 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-viewer.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-viewer.min.css" rel="stylesheet" />

Sample HTML Page for Report Viewer with Bootstrap Light Theme

Here’s an example of an HTML page setup for the Report Viewer using the Bootstrap Light theme:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Report Viewer with Bootstrap Light Theme</title>
    <!-- Report Viewer component styles -->
    <link href="https://cdn.boldreports.com/5.4.35/content/v2.0/bootstrap-light/bold.report-viewer.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    
    <!-- Report Viewer 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 component script -->
    <script src="https://cdn.boldreports.com/5.4.35/scripts/v2.0/bold.report-viewer.min.js"></script>
</head>
<body>
    <div style="height: 600px; width: 1000px;">
        <!-- Creating a div tag which will act as a container for boldReportViewer widget.-->
        <div style="height: 600px; width: 1000px; min-height: 400px;" id="viewer"></div>
        <!-- Setting property and initializing boldReportViewer widget.-->		
	    <script type="text/javascript">
	        $(function () {
		    $("#viewer").boldReportViewer({
		        reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
			reportPath: '~/Resources/docs/sales-order-detail.rdl'
		    });
		});
	    </script>
    </div>
</body>
</html>

Preview snapshot of the Bootstrap Light theme:

Preview snapshot of the Bootstrap Dark theme:

You can download the sample application with the configurations described above from the provided link.

Applying Bootstrap Themes to Bold Reports Report Viewer

Bootstrap Light Theme

Bootstrap Dark Theme

Sample HTML Page for Report Viewer with Bootstrap Light Theme

See Also:

Access denied