GlobalOptions.BootstrapVersion Property
Specifies the Bootstrap version.
Namespace: DevExpress.Blazor.Configuration
Assembly: DevExpress.Blazor.v21.1.dll
NuGet Package: DevExpress.Blazor
Declaration
[DefaultValue(BootstrapVersion.v4)]
public BootstrapVersion BootstrapVersion { get; set; }Property Value
| Type | Default | Description |
|---|---|---|
| BootstrapVersion | **v4** | An enumeration value. |
Available values:
| Name | Description |
|---|---|
| v4 | Bootstrap v4 |
| v5 | Bootstrap v5 |
Remarks
DevExpress Blazor components support Bootstrap v4 and v5.
Specify the Bootstrap Version in a Project (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 in the layout file (_Host.cshtml or index.html).
- Sets up the
GlobalOptions.BootstrapVersionproperty (in the Startup.cs file or in the Program.Main() method).
Specify the Bootstrap Version in a Project (Microsoft Templates)
When you use Microsoft project templates to create a Blazor application, the project contains links to Bootstrap files v4. Follow the instructions below to configure your project to use Bootstrap v5.
1. Add Bootstrap Files v5 to Your Project
If your project uses the standard Bootstrap theme, download Bootstrap CSS files and add them to the wwwroot/css/bootstrap folder.
If your project uses one of DevExpress Bootstrap themes, download this theme from the open source GitHub repository, copy the bootstrap.min.css file from the dist.v5/{theme-name} folder and add it to the corresponding folder in the project’s wwwroot/css folder.
2. Link These Files in the Layout File
Make sure that the theme’s CSS files are linked in the layout file (_Host.cshtml or index.html).
<head>
@*...*@
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
@*...*@
</head>
3. Link the *.bs5.css Files
In the layout file (_Host.cshtml or index.html), do the following:
- Replace the dx-blazor.css file’s link with the dx-blazor.bs5.css file’s link.
If you configured your application to use DxRichEdit, replace the dx-richedit.css file’s link with the dx-richedit.bs5.css file’s link.
<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-richedit.css" rel="stylesheet" /> *@ <link href="_content/DevExpress.Blazor.RichEdit/dx-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.
Blazor Server
Use any of the following ways:
The AddDevExpressBlazor(IServiceCollection, Action<GlobalOptions>) method and dependency injection.
using Microsoft.Extensions.DependencyInjection; class Startup { public void ConfigureServices(WebHostBuilderContext context, IServiceCollection services) { ... services.AddDevExpressBlazor(configure => configure.BootstrapVersion = DevExpress.Blazor.BootstrapVersion.v5); } }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
Use any of the following ways:
The AddDevExpressBlazor(IServiceCollection, Action<GlobalOptions>) method and dependency injection.
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(); } }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
wwwroot/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(); } }