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:
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.Icons.FontAwesome/v6/css/all.min.css" rel="stylesheet"> <link href="_content/Blazorise/blazorise.css?v=1.7.1.0" rel="stylesheet" /> <link href="_content/Blazorise.Bulma/blazorise.bulma.css?v=1.7.1.0" rel="stylesheet" />
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.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.