Blazorise Bulma Usage

Quickly install Blazorise with Bulma, one of the world's most popular Blazor UI framework.

Install Packages

First step is to install a Bulma provider for Blazorise:
Install-Package Blazorise.Bulma
You also need to install the icon package:
Install-Package Blazorise.Icons.FontAwesome

Add Static Files

Modify your project's HTML template to include the necessary CSS files. The files you add depend on whether you're working with a WebAssembly or Server project:

  • For WebAssembly, update index.html.
  • For Server, update _Layout.cshtml or _Host.cshtml.
  • For .NET 8, update App.razor.

Add these lines inside the <head> section:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css" />
<link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
<link href="_content/Blazorise.Bulma/blazorise.bulma.css" rel="stylesheet" />

<link href="_content/Blazorise.Icons.FontAwesome/v6/css/all.min.css" rel="stylesheet">

Add Imports

In your main _Imports.razor add:
@using Blazorise

Register Services

Add the following lines to the relevant sections of Program.cs.
using Blazorise;
using Blazorise.Bulma;
using Blazorise.Icons.FontAwesome;

builder.Services
    .AddBlazorise( options =>
    {
        options.Immediate = true;
    } )
    .AddBulmaProviders()
    .AddFontAwesomeIcons();

PWA & Offline Support (optional)

For information about PWAs & offline support, please take a look at our PWA docs.

On this page