Blazorise Bootstrap 5 Usage

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

Install Packages

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

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.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  <link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet">

  <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  -->
  <!-- These are the standard js dependencies this provider tipically dependes upon, but Blazorise deems these as optional as Blazorise Components should work correctly without these  -->
  <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>

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.Bootstrap5;
using Blazorise.Icons.FontAwesome;

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

PWA & Offline Support (optional)

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

On this page