SteveTeece / BlazorStrap

Bootstrap 4 Components for Blazor Framework

Home Page:https://blazorstrap.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

BlazorStrap

Bootstrap 4 and Bootstrap 5 Components for Blazor Framework

Install

NuGet Pre Release Nuget (with prereleases) Nuget GitHub stars Gitter chat

Bootstrap 5

Important: Target V5 for bootstrap 5

<PackageReference Include="BlazorStrap" Version="5.*.*" />

Bootstrap 5 Components for Blazor Framework

Install

Blazor WebAssembly
  1. Download the V5.0 package from nuget: nuget
  2. Modify your index.html with the following.
    1. Inside the <head> add
      1. <link href="YourAssemblyName.styles.css" rel="stylesheet"> )
    2. At the end of the <body> add
      1. <script src="_content/BlazorStrap/popper.min.js"></script>
      2. <script src="_content/BlazorStrap/blazorstrap.js"></script>
  3. In Program.cs add
    1. builder.Services.AddBlazorStrap();
  4. In _Imports.razor add
    1. @using BlazorStrap

Blazor Server (Server-side Blazor)
  1. Download the V5.0 package from nuget:nuget
  2. Modify your _host.cshtml with the following.
    1. Inside the <head> add
      1. <link href="YourAssemblyName.styles.css" rel="stylesheet">
    2. At the end of the <body> add
      1. <script src="_content/BlazorStrap/popper.min.js"></script>
      2. <script src="_content/BlazorStrap/blazorstrap.js"></script>
  3. In Program.cs or Startup.cs add
    1. Services.AddBlazorStrap(); to your build pipeline
  4. In _Imports.razor add
    1. @using BlazorStrap

Bootstrap 4

Important: Target V1 for bootstrap 4

<PackageReference Include="BlazorStrap" Version="1.*.*" />

Blazor WebAssembly (Client-side Blazor)

  1. Inside the <head> element of your wwwroot/index.html, add <script src="_content/BlazorStrap/blazorStrap.js"></script><script src="_content/BlazorStrap/popper.min.js"></script>.
  2. In Program, add builder.Services.AddBootstrapCss();.

Blazor Server (Server-side Blazor)

  1. Inside the <head> element of your Pages/_Host.cshtml, add <script src="_content/BlazorStrap/blazorStrap.js"></script><script src="_content/BlazorStrap/popper.min.js"></script>.
  2. In Startup, add Services.AddBootstrapCss();.

Docs

https://blazorstrap.io

BlazorStyled

If you want to manage your styles in code and use dynamic styles you can check out my other project: BlazorStyled

Change Log

https://github.com/chanan/BlazorStrap/releases

Components:

  • Alerts
  • Badges
  • Breadcrumbs
  • Buttons
  • ButtonGroups
  • Cards
  • Carousals
  • Collapse
  • Dropdowns
  • OffCanvas V5
  • Images
  • Jumbotrons
  • Figures
  • Forms
  • Layout (Container, Row, Col)
  • Listgroups
  • Navs
  • Navbars
  • Media
  • Modals
  • Pagination
  • Popover
  • Progress
  • Tables
  • Tabs
  • Tooltip

V1 Extensions:

  • NuGet Pre Release BlazorStrap.Extensions.BSDataTable
  • NuGet Pre Release BlazorStrap.Extensions.FluentValidation
  • NuGet Pre Release BlazorStrap.Extensions.TreeView

About

Bootstrap 4 Components for Blazor Framework

https://blazorstrap.io

License:The Unlicense


Languages

Language:HTML 48.1%Language:C# 39.7%Language:CSS 10.2%Language:JavaScript 1.9%Language:Smalltalk 0.2%