Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/vikramlearning/blazorbootstrap

An Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS frameworks.
https://github.com/vikramlearning/blazorbootstrap

blazor blazor-autocomplete blazor-bootstrap blazor-charts blazor-components blazor-dialog blazor-grid blazor-modal blazor-offcanvas blazor-server blazor-ui-components blazor-webassembly blazorbootstrap bootstrap bootstrap-5 bootstrap5

Last synced: 28 days ago
JSON representation

An Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS frameworks.

Awesome Lists containing this project

README

        

๏ปฟ



Blazor Bootstrap logo

Blazor Bootstrap Component Library


An Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS frameworks.


Getting Started ยป



**NOTE:** We strongly recommend all BlazorBootstrap users migrate to version 2.x.x. [Read more...](https://docs.blazorbootstrap.com/blog/2024/02/25/upgrade-to-v2.0.0)

## Status

[![NuGet](https://img.shields.io/nuget/vpre/blazor.bootstrap)](https://www.nuget.org/packages/blazor.bootstrap/absoluteLatest)
[![NuGet](https://img.shields.io/nuget/dt/blazor.bootstrap.svg)](https://www.nuget.org/packages/blazor.bootstrap/absoluteLatest)
[![Backers on Open Collective](https://img.shields.io/opencollective/backers/blazorbootstrap?logo=opencollective&logoColor=fff)](#backers)
[![Sponsors on Open Collective](https://img.shields.io/opencollective/sponsors/blazorbootstrap?logo=opencollective&logoColor=fff)](#sponsors)

## Docs & Demos

- [Docs Website](https://docs.blazorbootstrap.com/)
- [Demo Website - Blazor Server](https://demos.blazorbootstrap.com/)
- [Demo Website - Blazor WebAssembly](https://demos.getblazorbootstrap.com/)

## Table of contents

- [Install](#install)
- [Install Blazor Bootstrap templates](#install-blazor-bootstrap-templates)
- [Components](#blazor-bootstrap-components)
- [Documentation](#documentation)
- [Creators](#creators)
- [Copyright and license](#copyright-and-license)

## Install

Install with [NuGet](https://www.nuget.org/): `Install-Package Blazor.Bootstrap -Version 3.0.0`

## Install Blazor Bootstrap templates

Install [Blazor Bootstrap templates](https://github.com/vikramlearning/blazorbootstrap-project-templates) with **.NET CLI**: `dotnet new install Blazor.Bootstrap.Templates::1.10.0`

![image](https://user-images.githubusercontent.com/2337067/233800604-43986ae7-27dd-4f17-9af6-c2f1a6f07097.png)

- Read the [Getting started page](https://docs.blazorbootstrap.com/getting-started/blazor-webassembly-net-8) for information on the framework installation, contents, examples, and more.

## Blazor Bootstrap Components

| Component Name | Docs | Demos |
|:--|:--|:--|
| Accordion | [Docs](https://docs.blazorbootstrap.com/components/accordion) | [Demos](https://demos.blazorbootstrap.com/accordion) |
| Alerts | [Docs](https://docs.blazorbootstrap.com/components/alerts) | [Demos](https://demos.blazorbootstrap.com/alerts) |
| AutoComplete | [Docs](https://docs.blazorbootstrap.com/forms/autocomplete) | [Demos](https://demos.blazorbootstrap.com/autocomplete) |
| Badge | [Docs](https://docs.blazorbootstrap.com/components/badge) | [Demos](https://demos.blazorbootstrap.com/badge) |
| Breadcrumb | [Docs](https://docs.blazorbootstrap.com/components/breadcrumb) | [Demos](https://demos.blazorbootstrap.com/breadcrumb) |
| Buttons | [Docs](https://docs.blazorbootstrap.com/components/buttons) | [Demos](https://demos.blazorbootstrap.com/buttons) |
| Callout | [Docs](https://docs.blazorbootstrap.com/components/callout) | [Demos](https://demos.blazorbootstrap.com/callout) |
| Card | [Docs](https://docs.blazorbootstrap.com/components/card) | [Demos](https://demos.blazorbootstrap.com/card) |
| Carousel | [Docs](https://docs.blazorbootstrap.com/components/carousel) | [Demos](https://demos.blazorbootstrap.com/carousel) |
| Charts: Bar chart | [Docs](https://docs.blazorbootstrap.com/data-visualization/bar-chart) | [Demos](https://demos.blazorbootstrap.com/charts/bar-chart) |
| Charts: Doughnut chart | [Docs](https://docs.blazorbootstrap.com/data-visualization/doughnut-chart) | [Demos](https://demos.blazorbootstrap.com/charts/doughnut-chart) |
| Charts: Line chart | [Docs](https://docs.blazorbootstrap.com/data-visualization/line-chart) | [Demos](https://demos.blazorbootstrap.com/charts/line-chart) |
| Charts: Pie chart | [Docs](https://docs.blazorbootstrap.com/data-visualization/pie-chart) | [Demos](https://demos.blazorbootstrap.com/charts/pie-chart) |
| Charts: Polar Area chart | [Docs](https://docs.blazorbootstrap.com/data-visualization/polar-area-chart) | [Demos](https://demos.blazorbootstrap.com/charts/polar-area-chart) |
| Charts: Radar chart | [Docs](https://docs.blazorbootstrap.com/data-visualization/radar-chart) | [Demos](https://demos.blazorbootstrap.com/charts/radar-chart) |
| Charts: Scatter chart | [Docs](https://docs.blazorbootstrap.com/data-visualization/scatter-chart) | [Demos](https://demos.blazorbootstrap.com/charts/scatter-chart) |
| Collapse | [Docs](https://docs.blazorbootstrap.com/components/collapse) | [Demos](https://demos.blazorbootstrap.com/collapse) |
| Confirm Dialog | [Docs](https://docs.blazorbootstrap.com/components/confirm-dialog) | [Demos](https://demos.blazorbootstrap.com/confirm-dialog) |
| Currency Input | [Docs](https://docs.blazorbootstrap.com/forms/currency-input) | [Demos](https://demos.blazorbootstrap.com/form/currency-input) |
| Date Input | [Docs](https://docs.blazorbootstrap.com/forms/date-input) | [Demos](https://demos.blazorbootstrap.com/form/date-input) |
| Dropdown | [Docs](https://docs.blazorbootstrap.com/components/dropdown) | [Demos](https://demos.blazorbootstrap.com/dropdown) |
| Google Map | [Docs](https://docs.blazorbootstrap.com/components/google-map) | [Demos](https://demos.blazorbootstrap.com/google-map) |
| Grid | [Docs](https://docs.blazorbootstrap.com/components/grid) | [Demos](https://demos.blazorbootstrap.com/grid) |
| Icons | [Docs](https://docs.blazorbootstrap.com/content/icons) | [Demos](https://demos.blazorbootstrap.com/icons) |
| Images | [Docs](https://docs.blazorbootstrap.com/content/images) | [Demos](https://demos.blazorbootstrap.com/images) |
| Modals | [Docs](https://docs.blazorbootstrap.com/components/modal) | [Demos](https://demos.blazorbootstrap.com/modals) |
| Number Input | [Docs](https://docs.blazorbootstrap.com/forms/number-input) | [Demos](https://demos.blazorbootstrap.com/form/number-input) |
| Offcanvas | [Docs](https://docs.blazorbootstrap.com/components/offcanvas) | [Demos](https://demos.blazorbootstrap.com/offcanvas) |
| Pagination | [Docs](https://docs.blazorbootstrap.com/components/pagination) | [Demos](https://demos.blazorbootstrap.com/pagination) |
| PDF Viewer | [Docs](https://docs.blazorbootstrap.com/components/pdf-viewer) | [Demos](https://demos.blazorbootstrap.com/pdf-viewer) |
| Placeholders | [Docs](https://docs.blazorbootstrap.com/components/placeholders) | [Demos](https://demos.blazorbootstrap.com/placeholders) |
| Preload | [Docs](https://docs.blazorbootstrap.com/components/preload) | [Demos](https://demos.blazorbootstrap.com/preload) |
| Progress | [Docs](https://docs.blazorbootstrap.com/components/progress) | [Demos](https://demos.blazorbootstrap.com/progress) |
| RangeInput | [Docs](https://docs.blazorbootstrap.com/forms/range-input) | [Demos](https://demos.blazorbootstrap.com/form/range-input) |
| Ribbon | [Docs](https://docs.blazorbootstrap.com/components/ribbon) | [Demos](https://demos.blazorbootstrap.com/ribbon) |
| Script Loader | [Docs](https://docs.blazorbootstrap.com/components/script-loader) | [Demos](https://demos.blazorbootstrap.com/script-loader) |
| Sidebar | [Docs](https://docs.blazorbootstrap.com/components/sidebar) | [Demos](https://demos.blazorbootstrap.com/sidebar) |
| Sidebar2 | [Docs](https://docs.blazorbootstrap.com/components/sidebar2) | [Demos](https://demos.blazorbootstrap.com/sidebar2) |
| Sortable List | [Docs](https://docs.blazorbootstrap.com/components/sortable-list) | [Demos](https://demos.blazorbootstrap.com/sortable-list) |
| Spinners | [Docs](https://docs.blazorbootstrap.com/components/spinners) | [Demos](https://demos.blazorbootstrap.com/spinners) |
| Switch | [Docs](https://docs.blazorbootstrap.com/forms/switch) | [Demos](https://demos.blazorbootstrap.com/form/switch) |
| Tabs | [Docs](https://docs.blazorbootstrap.com/components/tabs) | [Demos](https://demos.blazorbootstrap.com/tabs) |
| Time Input | [Docs](https://docs.blazorbootstrap.com/forms/time-input) | [Demos](https://demos.blazorbootstrap.com/form/time-input) |
| Toasts | [Docs](https://docs.blazorbootstrap.com/components/toasts) | [Demos](https://demos.blazorbootstrap.com/toasts) |
| Tooltips | [Docs](https://docs.blazorbootstrap.com/components/tooltips) | [Demos](https://demos.blazorbootstrap.com/tooltips) |

More components coming...

## Documentation

Blazor Bootstrap's documentation, which is included in this repository's root directory, is built with [Docusaurus](https://docusaurus.io/) and publicly hosted on GitHub Pages at . The docs may also be run locally.

## Screenshots

### Blazor Bootstrap - Accordion
![Blazor Bootstrap - Accordion](https://i.imgur.com/g4zpMXp.png "Blazor Bootstrap - Accordion")

### Blazor Bootstrap - Alerts
![Blazor Bootstrap - Alerts](https://i.imgur.com/D9tJpSl.jpg "Blazor Bootstrap - Alerts")

### Blazor Bootstrap - Auto Complete
![Blazor Bootstrap - Auto Complete](https://i.imgur.com/gRcdvc0.png "Blazor Bootstrap - Auto Complete")

### Blazor Bootstrap - Badge
![Blazor Bootstrap - Badge](https://i.imgur.com/ux0sTs9.png "Blazor Bootstrap - Badge")

### Blazor Bootstrap - Breadcrumb
![Blazor Bootstrap - Breadcrumb](https://i.imgur.com/hO90HoC.jpg "Blazor Bootstrap - Breadcrumb")

### Blazor Bootstrap - Buttons
![Blazor Bootstrap - Buttons](https://i.imgur.com/ENKhcXR.jpg "Blazor Bootstrap - Buttons")

### Blazor Bootstrap - Callout
![Blazor Bootstrap - Callout](https://i.imgur.com/vmibzEu.png "Blazor Bootstrap - Callout")

### Blazor Bootstrap - Card
![Blazor Bootstrap - Card](https://i.imgur.com/RhytwPa.png "Blazor Bootstrap - Card")

### Blazor Bootstrap - Carousel
![Blazor Bootstrap - Carousel](https://i.imgur.com/YoZd9Hy.png "Blazor Bootstrap - Carousel")

### Blazor Bootstrap - Charts: Bar Chart
![Blazor Bootstrap - Charts: Bar Chart](https://i.imgur.com/JLV7oss.png "Blazor Bootstrap - Charts: Bar Chart")

### Blazor Bootstrap - Charts: Doughnut Chart
![Blazor Bootstrap - Charts: Doughnut Chart](https://i.imgur.com/e5fnMXQ.png "Blazor Bootstrap - Charts: Doughnut Chart")

### Blazor Bootstrap - Charts: Line Chart
![Blazor Bootstrap - Charts: Line Chart](https://i.imgur.com/CzdXpqr.png "Blazor Bootstrap - Charts: Line Chart")

### Blazor Bootstrap - Charts: Pie Chart
![Blazor Bootstrap - Charts: Pie Chart](https://i.imgur.com/jr3w0fM.png "Blazor Bootstrap - Charts: Pie Chart")

### Blazor Bootstrap - Charts: Polar Area Chart
![Blazor Bootstrap - Charts: Polar Area Chart](https://i.imgur.com/MSFDsSo.png "Blazor Bootstrap - Charts: Polar Area Chart")

### Blazor Bootstrap - Collapse
![Blazor Bootstrap - Collapse](https://i.imgur.com/8A0emQe.png "Blazor Bootstrap - Collapse")

### Blazor Bootstrap - Confirm Dialog
![Blazor Bootstrap - Confirm Dialog](https://i.imgur.com/FisZXwK.png "Blazor Bootstrap - Confirm Dialog")

### Blazor Bootstrap - Currency Input
![Blazor Bootstrap - Currency Input](https://i.imgur.com/mihpoXk.png "Blazor Bootstrap - Currency Input")

### Blazor Bootstrap - Date Input
![Blazor Bootstrap - Date Input](https://i.imgur.com/1mVjqQv.png "Blazor Bootstrap - Date Input")

### Blazor Bootstrap - Dropdown
![Blazor Bootstrap - Dropdown](https://i.imgur.com/beAr31J.png "Blazor Bootstrap - Dropdown")

### Blazor Bootstrap - Google Map
![Blazor Bootstrap - Google Map](https://i.imgur.com/AbyDP51.png "Blazor Bootstrap - Google Map")

### Blazor Bootstrap - Grid
![Blazor Bootstrap - Grid](https://i.imgur.com/36RsWZ3.png "Blazor Bootstrap - Grid")

### Blazor Bootstrap - Icon
![Blazor Bootstrap - Icon](https://i.imgur.com/ko7c6k3.jpg "Blazor Bootstrap - Icon")

### Blazor Bootstrap - Image
![Blazor Bootstrap - Image](https://i.imgur.com/eiSTmvO.png "Blazor Bootstrap - Image")

### Blazor Bootstrap - Modal
![Blazor Bootstrap - Modal](https://i.imgur.com/n0m4Fhq.jpg "Blazor Bootstrap - Modal")

### Blazor Bootstrap - Number Input
![Blazor Bootstrap - Number Input](https://i.imgur.com/iUNBkki.png "Blazor Bootstrap - Number Input")

### Blazor Bootstrap - Offcanvas
![Blazor Bootstrap - Offcanvas](https://i.imgur.com/1vNz5Ci.jpg "Blazor Bootstrap - Offcanvas")

### Blazor Bootstrap - Pagination
![Blazor Bootstrap - Pagination](https://i.imgur.com/SCbZVd4.jpg "Blazor Bootstrap - Pagination")

### Blazor Bootstrap - PDF Viewer
![Blazor Bootstrap - PDF Viewer](https://i.imgur.com/7Vz9Efi.png "Blazor Bootstrap - PDF Viewer")

### Blazor Bootstrap - Placeholder
![Blazor Bootstrap - Placeholder](https://i.imgur.com/Mw13qfX.png "Blazor Bootstrap - Placeholder")

### Blazor Bootstrap - Preload
![Blazor Bootstrap - Preload](https://i.imgur.com/3pvzbXY.png "Blazor Bootstrap - Preload")

### Blazor Bootstrap - Progress
![Blazor Bootstrap - Progress](https://i.imgur.com/MK142lQ.png "Blazor Bootstrap - Progress")

### Blazor Bootstrap - Range Input
![Blazor Bootstrap - Range Input](https://i.imgur.com/rWDDHaf.png "Blazor Bootstrap - Range Input")

### Blazor Bootstrap - Ribbon
![Blazor Bootstrap - Ribbon](https://i.imgur.com/LpZVLbF.png "Blazor Bootstrap - Ribbon")

### Blazor Bootstrap - Script Loader
![Blazor Bootstrap - Script Loader](https://i.imgur.com/sBiYPeQ.png "Blazor Bootstrap - Script Loader")

### Blazor Bootstrap - Sidebar
![Blazor Bootstrap - Sidebar](https://i.imgur.com/d91Q9Zt.png "Blazor Bootstrap - Sidebar")

### Blazor Bootstrap - Sidebar2
![Blazor Bootstrap - Sidebar2](https://i.imgur.com/HUP7ydv.png "Blazor Bootstrap - Sidebar2")

### Blazor Bootstrap - Sortable List
![Blazor Bootstrap - Sortable List](https://i.imgur.com/bfzP8Yi.png "Blazor Bootstrap - Sortable List")

### Blazor Bootstrap - Switch
![Blazor Bootstrap - Switch](https://i.imgur.com/ALKzreq.png "Blazor Bootstrap - Switch")

### Blazor Bootstrap - Tabs
![Blazor Bootstrap - Tabs](https://i.imgur.com/NdE5oqH.png "Blazor Bootstrap - Tabs")

### Blazor Bootstrap - Time Input
![Blazor Bootstrap - Time Input](https://i.imgur.com/TlvjRlP.png "Blazor Bootstrap - Time Input")

### Blazor Bootstrap - Toasts
![Blazor Bootstrap - Toasts](https://i.imgur.com/OCQUchu.png "Blazor Bootstrap - Toasts")

### Blazor Bootstrap - Tooltips
![Blazor Bootstrap - Tooltips](https://i.imgur.com/2xuTx6b.png "Blazor Bootstrap - Tooltips")

## Creators

**Vikram Reddy**

-

## Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/blazorbootstrap#sponsor)]

[![OC sponsor 0](https://opencollective.com/blazorbootstrap/sponsor/0/avatar.svg)](https://opencollective.com/blazorbootstrap/sponsor/0/website)
[![OC sponsor 1](https://opencollective.com/blazorbootstrap/sponsor/1/avatar.svg)](https://opencollective.com/blazorbootstrap/sponsor/1/website)
[![OC sponsor 2](https://opencollective.com/blazorbootstrap/sponsor/2/avatar.svg)](https://opencollective.com/blazorbootstrap/sponsor/2/website)
[![OC sponsor 3](https://opencollective.com/blazorbootstrap/sponsor/3/avatar.svg)](https://opencollective.com/blazorbootstrap/sponsor/3/website)
[![OC sponsor 4](https://opencollective.com/blazorbootstrap/sponsor/4/avatar.svg)](https://opencollective.com/blazorbootstrap/sponsor/4/website)
[![OC sponsor 5](https://opencollective.com/blazorbootstrap/sponsor/5/avatar.svg)](https://opencollective.com/blazorbootstrap/sponsor/5/website)
[![OC sponsor 6](https://opencollective.com/blazorbootstrap/sponsor/6/avatar.svg)](https://opencollective.com/blazorbootstrap/sponsor/6/website)
[![OC sponsor 7](https://opencollective.com/blazorbootstrap/sponsor/7/avatar.svg)](https://opencollective.com/blazorbootstrap/sponsor/7/website)
[![OC sponsor 8](https://opencollective.com/blazorbootstrap/sponsor/8/avatar.svg)](https://opencollective.com/blazorbootstrap/sponsor/8/website)
[![OC sponsor 9](https://opencollective.com/blazorbootstrap/sponsor/9/avatar.svg)](https://opencollective.com/blazorbootstrap/sponsor/9/website)

## Backers

Thank you to all our backers! ๐Ÿ™ [[Become a backer](https://opencollective.com/blazorbootstrap#backer)]

[![Backers](https://opencollective.com/blazorbootstrap/backers.svg?width=890)](https://opencollective.com/blazorbootstrap#backers)

## Copyright and license

Code and documentation copyright 2024 [Blazor Bootstrap](https://docs.blazorbootstrap.com/) Code released under the [Apache-2.0 License](https://github.com/vikramlearning/blazorbootstrap/blob/main/LICENSE.txt).