GlobalOptions.BootstrapVersion Property
Specifies the Bootstrap version.
Namespace: DevExpress.Blazor.Configuration
Assembly: DevExpress.Blazor.v21.2.dll
NuGet Package: DevExpress.Blazor
Declaration
[DefaultValue(BootstrapVersion.v4)]
public BootstrapVersion BootstrapVersion { get; set; }Property Value
| Type | Default | Description |
|---|---|---|
| BootstrapVersion | v4 | A BootstrapVersion enumeration value. |
Available values:
| Name | Description |
|---|---|
| v4 | Bootstrap v4 |
| v5 | Bootstrap v5 |
Remarks
DevExpress Blazor components support Bootstrap v4 and v5.
Bootstrap Version in DevExpress Templates
When you use DevExpress project templates to create a Blazor application, the project wizard’s Settings tab allows you to select the Bootstrap version.
The wizard does the following:
- Links version-specific CSS files (dx-blazor.css or dx-blazor.bs5.css) in the layout file (_Host.cshtml, _Layout.cshtml, or index.html).
- Sets up the global
BootstrapVersionoption (in the Startup.cs (for .NET 5.0) or Program.cs (for .NET 6.0) file, or in the Program.Main() method).
Bootstrap Version in Microsoft Templates
When you use Microsoft project templates to create a Blazor application, the project contains links to the following version of Bootstrap files:
- .NET 6.0: Bootstrap v5
- .NET 5.0: Bootstrap v4
You can follow the instructions below to change Bootstrap version.
1. Add Bootstrap Files to Your Project
If your project uses the standard Bootstrap theme, do the following:
- Download the required version of Bootstrap CSS files (v5 or v4).
- Add these files to the wwwroot/css/bootstrap folder.
If your project uses one of DevExpress Bootstrap themes, do the following:
- Download this theme from the open source GitHub repository.
- Copy the bootstrap.min.css file from the dist.v5/{theme-name} or dist/{theme-name} folder.
- Add this file to the corresponding folder in the project’s wwwroot/css folder.
2. Link Bootstrap Files in the Layout File
Make sure that the theme’s CSS files are linked in the layout file (_Host.cshtml, _Layout.cshtml, or index.html).
<head>
@*...*@
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
@*...*@
</head>
3. Link the Version-Specific CSS File
Make sure that the version-specific CSS file (dx-blazor.bs5.css or dx-blazor.css) is linked in the layout file (_Host.cshtml, _Layout.cshtml, or index.html).
If you configured your application to use DxRichEdit, link dx-blazor-richedit.bs5.css or dx-blazor-richedit.css.
<head>
@* <link href="_content/DevExpress.Blazor/dx-blazor.css" rel="stylesheet" /> *@
<link href="_content/DevExpress.Blazor/dx-blazor.bs5.css" rel="stylesheet" />
@* To use DxRichEdit*@
@* <link href="_content/DevExpress.Blazor.RichEdit/dx-blazor-richedit.css" rel="stylesheet" /> *@
<link href="_content/DevExpress.Blazor.RichEdit/dx-blazor-richedit.bs5.css" rel="stylesheet" />
</head>
4. Specify the BootstrapVersion Property
Use the GlobalOptions.BootstrapVersion property to specify Bootstrap version. The way how to do this depends on your application’s hosting model and .NET version.
Blazor Server or Blazor WebAssembly .NET 6.0
Use any of the following ways:
Call the AddDevExpressBlazor(IServiceCollection, Action<GlobalOptions>) method.
using DevExpress.Blazor; builder.Services.AddDevExpressBlazor(configure => configure.BootstrapVersion = BootstrapVersion.v5);Call the services.Configure method that registers a configuration instance with the specified global option’s value.
using DevExpress.Blazor; using DevExpress.Blazor.Configuration; builder.Services.Configure<GlobalOptions>((options) => options.BootstrapVersion = BootstrapVersion.v5);Define the global option’s value in the
appsettings.jsonfile.{ "DevExpress": { "BootstrapVersion": "v5" } }Call the services.Configure method. Use the ConfigurationBinder.Bind method to register a configuration instance with the specified global option’s value.
using DevExpress.Blazor; using DevExpress.Blazor.Configuration; builder.Services.Configure<GlobalOptions>(options => builder.Configuration.Bind("DevExpress", options));
Blazor Server .NET 5.0
Use any of the following ways:
Call the AddDevExpressBlazor(IServiceCollection, Action<GlobalOptions>) method.
using Microsoft.Extensions.DependencyInjection; class Startup { public void ConfigureServices(WebHostBuilderContext context, IServiceCollection services) { ... services.AddDevExpressBlazor(configure => configure.BootstrapVersion = DevExpress.Blazor.BootstrapVersion.v5); } }Call the services.Configure method that registers a configuration instance with the specified global option’s value.
using Microsoft.Extensions.DependencyInjection; class Startup { public void ConfigureServices(WebHostBuilderContext context, IServiceCollection services) { ... services.Configure<GlobalOptions>((options) => options.BootstrapVersion = BootstrapVersion.v5); } }Define the global option’s value in the
appsettings.jsonfile.{ "DevExpress": { "BootstrapVersion": "v5" } }Then use the services.Configure method to register a configuration instance with the specified global option’s value.
using Microsoft.Extensions.DependencyInjection; class Startup { public void ConfigureServices(WebHostBuilderContext context, IServiceCollection services) { ... services.Configure<GlobalOptions>(Configuration.GetSection("DevExpress")); } }
Blazor WebAssembly .NET 5.0
Use any of the following ways:
Call the AddDevExpressBlazor(IServiceCollection, Action<GlobalOptions>) method.
using Microsoft.Extensions.DependencyInjection; public class Program { public static async Task Main(string[] args) { ... builder.Services.AddDevExpressBlazor((options) => options.BootstrapVersion = BootstrapVersion.v5); await builder.Build().RunAsync(); } }Call the services.Configure method that registers a configuration instance with the specified global option’s value.
using Microsoft.Extensions.DependencyInjection; public class Program { public static async Task Main(string[] args) { ... builder.Services.Configure<GlobalOptions>((options) => options.BootstrapVersion = BootstrapVersion.v5); await builder.Build().RunAsync(); } }Define the global option’s value in the
appsettings.jsonfile.{ "DevExpress": { "BootstrapVersion": "v5" } }Call the AddDevExpressBlazor(IServiceCollection, Action<GlobalOptions>) method from your project’s
Program.Main()method. Use the ConfigurationBinder.Bind method to register a configuration instance with the specified global option’s value.using Microsoft.Extensions.Configuration; public class Program { public static async Task Main(string[] args) { var builder = WebAssemblyHostBuilder.CreateDefault(args); // ... builder.Services.AddDevExpressBlazor(options => builder.Configuration.Bind("DevExpress", options)); await builder.Build().RunAsync(); } }