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: 1 day ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/vikramlearning/blazorbootstrap
• Owner: vikramlearning
• License: apache-2.0
• Created: 2021-08-29T14:26:35.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2025-04-10T14:39:23.000Z (5 days ago)
• Last Synced: 2025-04-14T11:18:37.215Z (1 day ago)
• Topics: 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
• Language: HTML
• Homepage: https://docs.blazorbootstrap.com/
• Size: 60.1 MB
• Stars: 960
• Watchers: 15
• Forks: 73
• Open Issues: 174
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE.txt
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome-blazor - BlazorBootstrap -   High-performance, lightweight, and responsive blazor bootstrap components in a single package from the developers for the developers. ([Docs as Demo](https://demos.blazorbootstrap.com/)). (Libraries & Extensions / Component bundles)

README

        



  

    

  



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.3.1`

## 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) |

| Checkbox Input | [Docs](https://docs.blazorbootstrap.com/forms/checkbox-input) | [Demos](https://demos.blazorbootstrap.com/form/checkbox-input) |

| 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) |

| Markdown | [Docs](https://docs.blazorbootstrap.com/content/markdown) | [Demos](https://demos.blazorbootstrap.com/markdown) |

| 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) |

| Password Input | [Docs](https://docs.blazorbootstrap.com/forms/password-input) | [Demos](https://demos.blazorbootstrap.com/form/password-input) |

| 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) |

| Radio Input | [Docs](https://docs.blazorbootstrap.com/forms/radio-input) | [Demos](https://demos.blazorbootstrap.com/form/radio-input) |

| 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) |

| Text Input | [Docs](https://docs.blazorbootstrap.com/forms/text-input) | [Demos](https://demos.blazorbootstrap.com/form/text-input) |

| TextArea Input | [Docs](https://docs.blazorbootstrap.com/forms/textarea-input) | [Demos](https://demos.blazorbootstrap.com/form/text-area-input) |

| Theme Switcher | [Docs](https://docs.blazorbootstrap.com/components/theme-switcher) | [Demos](https://demos.blazorbootstrap.com/theme-switcher) |

| 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 - Checkbox Input

![Blazor Bootstrap - Checkbox Input](https://i.imgur.com/kqSggFK.png "Blazor Bootstrap - Checkbox Input")

### 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 - Markdown

![Blazor Bootstrap - Markdown](https://i.imgur.com/FhN1caj.png "Blazor Bootstrap - Markdown")

### 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 - Password Input

![Blazor Bootstrap - Password Input](https://i.imgur.com/0k1C2XS.png "Blazor Bootstrap - Password Input")

### 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 - Radio Input

![Blazor Bootstrap - Radio Input](https://i.imgur.com/8koE00q.png "Blazor Bootstrap - Radio Input")

### 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 - Text Input

![Blazor Bootstrap - Text Input](https://i.imgur.com/N2VUHIn.png "Blazor Bootstrap - Text Input")

### Blazor Bootstrap - TextArea Input

![Blazor Bootstrap - TextArea Input](https://i.imgur.com/aSVKMqv.png "Blazor Bootstrap - TextArea Input")

### Blazor Bootstrap - Theme Switcher

![Blazor Bootstrap - Theme Switcher](https://i.imgur.com/2eixWho.png "Blazor Bootstrap - Theme Switcher")

### 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).