Bootstrap Blazor Component

English | 中文

.NET Foundation

This project is part of the .NET Foundation and operates under their code of conduct.

Online Examples

Environment

• Install .net core sdk Official website
• Install Visual Studio 2022 latest Official website

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

Contribution

1. Fork
2. Create Feat_xxx branch
3. Commit
4. Create Pull Request

Code of Conduct

This project has adopted the code of conduct defined by the Contributor Covenant to clarify expected behavior in our community. For more information see the .NET Foundation Code of Conduct.

Donate

If this project is helpful to you, please scan the QR code below for a cup of coffee.

Sponsor

Thanks to JetBrains for providing free open source license