Blazorise is a component library built on top of Blazor and CSS frameworks like Bootstrap, Bulma and Material.

• Bootstrap Demo
• Material Demo
• Bulma Demo
• eFrolic Demo

• Bootstrap Demo

Note: This project is still experimental so it's possible that some components will be removed or refactored.

Releases and Roadmap

Before you continue, please make sure you have upgraded your project for the latest version of Blazor. Please look at the official blog post to find all the required steps.

There are 4 diferent NuGet packages for each of the supported CSS frameworks. Available packages are:

Install-Package Blazorise.Bootstrap
Install-Package Blazorise.Bulma
Install-Package Blazorise.Material
Install-Package Blazorise.Frolic

Choose one of them and modify your source files and your code accordingly. This guide will show you how to setup Blazorise with Bootstrap provider and FontAwesome icons.

First step is to install a Bootstrap provider for Blazorise:

Install-Package Blazorise.Bootstrap

You also need to install the icon package:

Install-Package Blazorise.Icons.FontAwesome

The next step is to change your index.html file located in the _wwwroot_folder and include the following css and js source files:

<!-- inside of head section -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

<!-- inside of body section and after the <app> tag  -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

NOTE Don't forget to remove default bootstrap css and js files that comes with the Blazor/RC project template. If you forget to remove them it's possible that some of component will not work as they should be.

In your main _Imports.razor add:

@using Blazorise

Finally in the Startup.cs you must tell the Blazor to register Bootstrap provider and extensions:

using Blazorise;
using Blazorise.Bootstrap;
using Blazorise.Icons.FontAwesome;

public void ConfigureServices( IServiceCollection services )
{
  services
    .AddBlazorise( options =>
    {
      options.ChangeTextOnKeyPress = true; // optional
    } )
    .AddBootstrapProviders()
    .AddFontAwesomeIcons();
}

Depending on the hosting model of your Blazor project you only need to apply either step 4.a or 4.b. You should not include both of them as that is generally not supported.

To Learn more about the different project types you can go to the official documentation.

This step is mandatory for Blazor WebAssembly(client-side) and for ASP.NET Core hosted project types. You should place the code into the client project.

public void Configure( IComponentsApplicationBuilder app )
{
  app.Services
    .UseBootstrapProviders()
    .UseFontAwesomeIcons();

  app.AddComponent<App>( "app" );
}

This step is going only into the Startup.cs of your Blazor Server project.

public void Configure( IComponentsApplicationBuilder app )
{
  // other settings
  
  app.UseRouting();
  
  app.ApplicationServices
    .UseBootstrapProviders()
    .UseFontAwesomeIcons();

  app.UseEndpoints( endpoints =>
  {
      endpoints.MapBlazorHub();
      endpoints.MapFallbackToPage( "/_Host" );
  } );
}

The final step is mandatory for all Blazor project types. Unlike in previous versions of Blazorise from now on you must set the path for static file manually. When consuming nuget packages that contains static files you must follow the convention _content/{LIBRARY.NAME}/{FILE.NAME}. So for this guide the required files are:

<link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
<link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" rel="stylesheet" />

<script src="_content/Blazorise/blazorise.js"></script>
<script src="_content/Blazorise.Bootstrap/blazorise.bootstrap.js"></script>

If you want to learn more about the reason behind this decision please look at the oficial Blazor documentation.

@page "/counter"

<Heading Size="HeadingSize.Is1">Counter</Heading>

<Paragraph>Current count: @currentCount</Paragraph>

<Button Color="Color.Primary" Clicked="IncrementCount">Click me</Button>

@code {
    int currentCount = 0;

    void IncrementCount()
    {
        currentCount++;
    }
}

To setup Blazorise for other css frameworks, please refer the Usage page in the documentation.