Bootstrap Blazor Component

A set of enterprise-class UI components based on Bootstrap and Blazor.

Features

• Enterprise-class UI designed for web applications.
• A set of high-quality Blazor components out of the box.
• Supports WebAssembly-based client-side and SignalR-based server-side UI event interaction.
• Supports Progressive Web Applications (PWA).
• Build with C#, a multi-paradigm static language for an efficient development experience.
• .NET 6.0, with direct reference to the rich .NET ecosystem.
• Seamless integration with existing ASP.NET Core MVC and Razor Pages projects.

Online Examples

Installation Guide

• Install .net core sdk Official website
• Install Visual Studio lastest Official website

git clone https://github.com/dotnetcore/BootstrapBlazor.git
cd BootstrapBlazor/src/BootstrapBlazor.Server
dotnet run

Quick Installation Guide

Install Package

dotnet add package BootstrapBlazor

Add the following to _Imports.razor

@using BootstrapBlazor.Components

Add the following to the MainLayout.razor

<BootstrapBlazorRoot>
    @Body
</BootstrapBlazorRoot>

Add the following to your HTML head section

it's either index.html or _Layout.cshtml/_Host.cshtml/App.razor depending on whether you're running WebAssembly or Server

<link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" />

Add the following script at the end of the body

<script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>

Add the following to the relevant sections of Program.cs

builder.Services.AddBootstrapBlazor();

Usage

<Display Value="@_text"></Display>
<Button Text="Button" OnClick="@ClickButton"></Button>

@code {
    private string? _text;
    private void ClickButton(MouseEventArgs e)
    {
        _text = DateTime.Now.ToString();
    }
}

Install CLI Template

1. Install the template

dotnet new install Bootstrap.Blazor.Templates::*

2. Create the Boilerplate project with the template

dotnet new bbapp