Articles in this section
Category / Section

Applying Bootstrap Themes to Bold Reports Report Viewer


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="" rel="stylesheet" />

Bootstrap Dark Theme

For the Bootstrap Dark theme, use this stylesheet link:

<link href="" 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="">
    <title>Report Viewer with Bootstrap Light Theme</title>
    <!-- Report Viewer component styles -->
    <link href="" rel="stylesheet" />
    <script src=""></script>
    <!-- Report Viewer component dependent scripts -->
    <script src=""></script>
    <script src=""></script>
    <!-- Report Viewer component script -->
    <script src=""></script>
    <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 () {
		        reportServiceUrl: "",
			reportPath: '~/Resources/docs/sales-order-detail.rdl'

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.

See Also:
Was this article useful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied