Blazorise Bootstrap 5 Usage

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

Note: Before continuing please make sure that you already have a Blazor project created. If not please go to the official Blazor website and learn how to create one.

Step 1: Download Blazorise from NuGet

First step is to install a Bootstrap provider for Blazorise:

Install-Package Blazorise.Bootstrap5

You also need to install the icon package:

Install-Package Blazorise.Icons.FontAwesome

Step 2: Add Static Files

The next step is to change your index.html or _Layout.cshtml / _Host.cshtml file and include the CSS and JS source files:

<html>
<head>
  <!-- inside of head section -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">

  <link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
  <link href="_content/Blazorise.Bootstrap5/blazorise.bootstrap5.css" rel="stylesheet" />
</head>
<body>
  <div id="app"></div>

  <!-- inside of body section and after the div/app tag  -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>

Note: When Blazor project is created it will also include it’s own Bootstrap and FontAwesome files that can sometime be of older versions. To ensure we’re using the appropriate Bootstrap and FontAwesome files, you need to remove them or replace them with the links from above. If you forget to remove them, it’s possible that some components will not work as expected. Also, the links provided here might not always be the most up to date. You may update your sources, but do take note, that Blazorise has been tested with the versions listed here.

Step 3. Define Usings

In your main _Imports.razor add:

@using Blazorise

Step 4. Register Blazorise Services

Add the following lines to the relevant sections of Program.cs.

using Blazorise;
using Blazorise.Bootstrap5;
using Blazorise.Icons.FontAwesome;

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

Step 5. PWA & Offline Support (optional)

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