Blazor Bootstrap: Quick Start

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.

BlazorBootstrap is deisgned to work with Bootstrap 5 CSS framework.

Please follow below setps to setup BlazorBootstrap in your peoject.

1. NuGet packages

First step is to install BlazorBootstrap package:

Install-Package Blazor.Bootstrap -Version 0.0.1

2. Source files

Change your index.html file and include the CSS and JS files:

  • Add Bootstrap 5 CSS and JS files as recomended in the official Bootstrap website.
  • Include blazor.bootstrap.js file
<!DOCTYPE html>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>BlazorBootstrap Quick Start</title>
    <base href="/" />
    <link href="" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="">
    <link href="BlazorBootstrap.UI.styles.css" rel="stylesheet" />
    <div id="app">Loading...</div>
    <script src="_framework/blazor.webassembly.js"></script>
    <script src="" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
    <script src="_content/Blazor.Bootstrap/blazor.bootstrap.js"></script>

3. Usings

In your main _Imports.razor add:

@using BlazorBootstrap

4. Add BlazorBootstrap service

Add BlazorBootstrap service in Program.cs.

using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.DependencyInjection;
using System;
using System.Net.Http;
using System.Threading.Tasks;

namespace BlazorBootstrap.UI
    public class Program
        public static async Task Main(string[] args)
            var builder = WebAssemblyHostBuilder.CreateDefault(args);

            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

            // Inject services           

            await builder.Build().RunAsync();

That's it.

Blazor Bootstrap Links:

  1. Blazor Bootstrap: Quick Start
  2. Blazor Bootstrap: Alert Component Examples
  3. Blazor Bootstrap: Buttons Examples
  4. Blazor Bootstrap: Icons Component Examples
  5. Blazor Bootstrap: Modal Component Examples
  6. Blazor Bootstrap: Offcanvas Component Example
  7. Blazor Bootstrap: Toasts Component Examples
  8. Blazor Bootstrap: Tooltip Component Examples