Blazorise Bulma Usage

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

Note: Before proceeding, ensure you have already created a Blazor project. If not, the simplest way to start with Blazorise is by using our Templates.

👀 Want to see it in action? Check out the Bulma Demo here !

Install Packages

First step is to install a Bulma provider for Blazorise:

dotnet add package Blazorise.Bulma

You also need to install the icon package:

dotnet add package Blazorise.Icons.Lucide

Add Static Files

Add these lines inside the <head> section:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css" />
<link href="_content/Blazorise.Icons.Lucide/blazorise.icons.lucide.css?v=2.4.0.0" rel="stylesheet" />

<link href="_content/Blazorise/blazorise.css?v=2.4.0.0" rel="stylesheet" />
<link href="_content/Blazorise.Bulma/blazorise.bulma.css?v=2.4.0.0" rel="stylesheet" />

Update wwwroot/index.html.

Note: Don't forget to remove Bootstrap JS and CSS files that comes with the default Blazor project template.

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.Lucide;

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

Offline Support

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