Breaking Change T1081253
Visible to All Users

The location of CSS resources for DevExpress Blazor controls has changed

What Changed

DevExpress Blazor themes and CSS styles that apply Bootstrap themes to DevExpress controls are now shipped with the DevExpress.Blazor.Themes NuGet package.

Reasons for Change

This change allows Blazor developers to apply DevExpress themes using NuGet instead of downloading CSS stylesheets from GitHub. It also simplifies version control and minimizes the risk of upgrade issues as the version of DevExpress themes is updated automatically with other DevExpress Blazor packages.

Impact on Existing Apps

All Blazor applications that use DevExpress controls have to be updated to reference CSS stylesheets from the DevExpress.Blazor.Themes NuGet package. This change does not affect the appearance of DevExpress controls or theme customizations, only the stylesheet reference syntax.

How to Update Existing Apps

Follow the steps below to update your application.

  1. Remove the link to the dx-blazor.css and dx-blazor.bs5.css stylesheets in the _Layout.cshtml file for Blazor Server apps or the index.html file in Blazor WebAssembly apps.
Razor
// For Bootstrap 5 @*<link href="_content/DevExpress.Blazor/dx-blazor.bs5.css" rel="stylesheet" />*@ // For Bootstrap 4 @*<link href="_content/DevExpress.Blazor/dx-blazor.css" rel="stylesheet" />*@
  1. Update the theme link in the same file.
    • If you use one of the DevExpress themes, replace the old link to the stylesheet with the following:
      Razor
      // For Bootstrap 5 @*<link rel="stylesheet" href="css/bootstrap/<theme-name>.min.css" />*@ <link href="_content/DevExpress.Blazor.Themes/<theme-name>.bs5.min.css" rel="stylesheet" /> // For Bootstrap 4 @*<link rel="stylesheet" href="css/bootstrap/<theme-name>.min.css" />*@ <link href="_content/DevExpress.Blazor.Themes/<theme-name>.bs4.min.css" rel="stylesheet" />
      Note that words in a theme name are separated by a hyphen: office-white, blazing-berry, blazing-dark.
    • If you use the standard Bootstrap theme that comes with Microsoft Blazor templates or any other Boostrap-based theme, add a link to the bootstrap-external stylesheet below your theme's stylesheet reference:
      Razor
      <link rel="stylesheet" href="css/pulse/bootstrap.min.css" /> // For Bootstrap 5 <link href="_content/DevExpress.Blazor.Themes/bootstrap-external.bs5.min.css" rel="stylesheet" /> // For Bootstrap 4 <link href="_content/DevExpress.Blazor.Themes/bootstrap-external.bs4.min.css" rel="stylesheet" />
  2. If you use Bootstrap 5, specify your Bootstrap version explicitly in Program.cs.
C#
builder.Services.AddDevExpressBlazor(configure => configure.BootstrapVersion = DevExpress.Blazor.BootstrapVersion.v5);

If you want to customize a DevExpress theme, refer to the following topic for more information: Themes.

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.