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>
<html>
<head>
    <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="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css">
    <link href="BlazorBootstrap.UI.styles.css" rel="stylesheet" />
</head>
<body>
    <div id="app">Loading...</div>
    <script src="_framework/blazor.webassembly.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
    <script src="_content/Blazor.Bootstrap/blazor.bootstrap.js"></script>
</body>
</html>

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.RootComponents.Add<App>("#app");

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

            // Inject services           
            builder.Services.AddBlazorBootstrap();

            await builder.Build().RunAsync();
        }
    }
}

That's it.

Blazor Bootstrap Links:

Created
Nov 25, 2021
Updated
Dec 12, 2021
Views
3,026

Fixed: Blazor Webassembly - Google Authentication Issue - Access to XMLHttpRequest at 'https://login.microsoftonline.com/.well-known/openid-configuration' from origin 'https://localhost:7215' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Blazor Bootstrap: Tooltip Component Examples

Blazor Bootstrap: Alert Component Examples

Blazor Bootstrap: Icon Component Examples

Blazor Bootstrap: Toasts Component Examples

Blazor Bootstrap: Modal Component Examples

Blazor Bootstrap: Offcanvas examples

Blazor Bootstrap: Button Examples

How to migrate Blazor WebAssembly App to .NET 5

Blazor: How to bind employees to table / grid