DOCSEARCHbyAlgolia
Submit Docs

Bootstrap Blazor Documentation

repository·main·Indexed 26 days ago

https://github.com/dotnetcore/bootstrapblazor

An enterprise-level UI component library built on top of Bootstrap and Blazor. This documentation provides guides on installation via NuGet, configuring the BootstrapBlazorRoot component, registering services in Program.cs, and using CLI templates for project scaffolding.

Tokens
1.5K
Snippets
6
Records
14
Agent score
89%

What's inside Bootstrap Blazor

  3. Add Bootstrap Blazor Static Assets (CSS and JS)

    main

    You must include the library's bundled CSS and JavaScript files in your host HTML file (e.g., index.html for WebAssembly or _Host.cshtml/App.razor for Server).

    • CSS: Add to the <head> section.
    • JS: Add to the end of the <body> section.

  4. Configure Bootstrap Blazor in a Blazor Project

    main

    Follow these steps to integrate Bootstrap Blazor into your Blazor application:

    1. Add Namespace: Add the following to your _Imports.razor file:

      @using BootstrapBlazor.Components

    2. Wrap Layout: Wrap the @Body content in MainLayout.razor with the BootstrapBlazorRoot component:

      <BootstrapBlazorRoot>
    @Body
</BootstrapBlazorRoot>

    3. Add Styles: Add the CSS bundle to your HTML head section (e.g., index.html, _Layout.cshtml, _Host.cshtml, or App.razor depending on your project type):

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

    4. Add Scripts: Add the JavaScript bundle at the end of your HTML body:

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

    5. Register Services: Register the Bootstrap Blazor services in Program.cs:

      builder.Services.AddBootstrapBlazor();
    builder.Services.AddBootstrapBlazor();

  5. Security considerations for reproduction projects

    main

    When creating a reproduction project for BootstrapBlazor, adhere to the following security and privacy rules:

    • No sensitive information: Never include credentials, API keys, or any sensitive data.
    • No private code: Never include code that is not intended to be public.
    • No external dependencies: Do not reference any external services or external data sources in your reproduction project.

  7. Quick Installation Guide for Bootstrap Blazor

    main

    Follow these steps to integrate Bootstrap Blazor into your Blazor project:

    1. Install the NuGet package using the .NET CLI.
    2. Update _Imports.razor to include the necessary component namespace.
    3. Wrap your application content in MainLayout.razor with the <BootstrapBlazorRoot> component.
    4. Add CSS assets to your HTML head section (e.g., index.html, _Layout.cshtml, _Host.cshtml, or App.razor).
    5. Add JavaScript assets to the end of your HTML body.
    6. Register services in Program.cs.

  10. Create a minimal reproduction project for bug reports

    main

    When reporting an issue with BootstrapBlazor, providing a minimal reproduction project (repro) helps speed up investigations and eliminates ambiguity. A repro project should demonstrate the reported behavior with the absolute minimum amount of code required.

    How to create a repro project via GitHub:

    1. Create a new project: Use a Blazor Server or Blazor WebAssembly project template. If available, use the Empty* project templates.
    2. Minimize code: Add only the code necessary to reproduce the specific behavior being reported.
    3. Isolate dependencies: Do not include any dependencies that are irrelevant to the reported behavior.
    4. Clean the project: Ensure you do not include any binaries (specifically the bin and obj folders).
    5. Host publicly: Upload the project to a public GitHub repository.

    Note: Do not send zip attachments with issues, as they are treated as potential security risks and may not be opened.

  12. Use Bootstrap Blazor Components

    main

    Once installed and configured, you can use components like Display and Button in your Razor components. Here is a basic example of data binding and event handling:

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

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