BlazorBootstrap Namespace

Bootstrap is a front-end framework for developing responsive, mobile-first projects on the web.
It is a collection of CSS and JavaScript components that represent common UI elements.
It also provides a grid system for layout and responsive design.

To use it for Blazor, we have created a set of components that wrap the Bootstrap components,
allowing us to interact with them using SignalR and Blazor's component model.
The Bootstrap documentation is available at the official website.

Remarks

Bootstrap for Blazor libraries do exist, but most of them are proprietary and very expensive,
and the open-source ones are of dubious quality; this library is a fork of an existing library, though heavily modified;
the original contained memory leaks, non-bootstrap features nobody wanted, performance issues and a lot of bugs.

Classes

Alert Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages.
This component is based on the Bootstrap Alert component.
Badge The Blazor Bootstrap Badge component shows the small count and labels.
See Bootstrap Badge for more information.
BarChart A bar chart provides a way of showing data values represented as vertical bars.
It is sometimes used to show trend data, and the comparison of multiple data sets side by side.
For more information, visit https://www.chartjs.org/docs/latest/charts/bar.html
BarChartDataset The bar chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. https://www.chartjs.org/docs/latest/charts/bar.html#dataset-properties
BlazorBootstrapChartTData The abstract base class for all chart components.
BlazorBootstrapComponentBase Root component for all Blazor Bootstrap components.
BootstrapIconUtility Utility class for Bootstrap icons.
Breadcrumb Blazor Bootstrap breadcrumb component indicates the current page's location within a navigational hierarchy that automatically adds separators.
This component is based on the Bootstrap Breadcrumb component.
BreadcrumbItem An item to be displayed in a Breadcrumb.
Button Use Blazor Bootstrap button styles for actions in forms, dialogs, and more with support for multiple sizes, states, etc.
This component is based on the Bootstrap Button component.
CallOut Blazor Bootstrap CallOut component provides content presentation in a visually distinct manner.
Card Bootstrap's cards provide a flexible and extensible content container with multiple variants and options.
This component is based on the Bootstrap Card component.
CardBody This component represents the body of a Card.
CardFooter This component represents the footer of a Card.
If no footer is required, it can be omitted from the card implementation.
CardHeader This component represents the header of a Card.
If no header is required, it can be omitted from the card implementation.
CardText This component represents the text of a Card.
If no text is required, it can be omitted from the card implementation.
CardTitle This component represents the title of a Card.
If no title is required, it can be omitted from the card implementation.
ChartAxes Chart axes settings
ChartAxesAdapter Adapter for the chart axes. https://www.chartjs.org/docs/latest/axes/
ChartAxesAdapterDate Data settings of the ChartAxesAdapter
ChartAxesBorder Define options for the border that run perpendicular to the axis. https://www.chartjs.org/docs/latest/axes/styling.html
ChartAxesGrid Defines options for the grid lines that run perpendicular to the axis. https://www.chartjs.org/docs/latest/samples/scale-options/grid.html
ChartAxesTicks Chart axes tick styling https://www.chartjs.org/docs/latest/samples/scale-options/ticks.html
ChartAxesTicksMajor Defines options for the major tick marks that are generated by the axis.
ChartAxesTime Time section of the chart axes. https://www.chartjs.org/docs/latest/axes/cartesian/time.html
ChartAxesTitle The chart title defines text to draw at the top of the chart. https://www.chartjs.org/docs/latest/configuration/title.html
ChartDataTData Represents the data for a chart.
ChartDataLabels Data labels for the BlazorBootstrapChartTData
ChartDatasetTData This type represents a data structure in ChartJS, and is an implementation of
ChartDatasetDataT Individual data item to be used in a ChartDatasetTData.
ChartDatasetDataLabels Highly customizable Chart.js plugin that displays labels on data for any type of charts. https://chartjs-plugin-datalabels.netlify.app/guide/options.html#options.
ChartFonthttps://www.chartjs.org/docs/latest/general/fonts.html
ChartLabel Represents a label in a chart.
ChartLayout Namespace: options.layout, the global options for the chart layout is defined in Chart.defaults.layout. https://www.chartjs.org/docs/latest/configuration/layout.html#layout.
ChartOptionshttps://www.chartjs.org/docs/latest/general/options.html
ChartPlugins Plugins for a BlazorBootstrapChartTData
ChartPluginsLegend The chart legend displays data about the datasets that are appearing on the chart.
ChartPluginsLegendLabels The chart label settings https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration
ChartPluginsLegendTitle The chart legend title
ChartPluginsTitle The chart title defines text to draw at the top of the chart. https://www.chartjs.org/docs/latest/configuration/title.html
ChartPluginsTooltip Tooltip for bubble, doughnut, pie, polar area, and scatter charts https://www.chartjs.org/docs/latest/configuration/tooltip.html
ChartPluginsTooltipFonthttps://www.chartjs.org/docs/latest/general/fonts.html
CodeExtensions Extensions for code highlighting
Collapse Toggle the visibility of content across your project with the Blazor Bootstrap Collapse component. This component is based on the Bootstrap Collapse component.
ColorExtensions Extensions for Color items.
ComponentExtensions Extensions for rendering ComponentBase items more efficiently.
Config Configuration for Blazor Bootstrap, to be used in the Startup class in program.cs of the Blazor application
ConfirmDialog A modal dialog to display if you want the user to verify or accept something.
ConfirmDialogOptions Options to be displayed in a ConfirmDialog
CssColorSet Represents a set of colors: primary, secondary, danger, dark, light, info, success, and warning,
to be applied to a specific component or section of the application.
CurrencyFormatOptions Format options for a CurrencyInputTValue, used for JS interop.
CurrencyInputTValue Input form for currency values, such as dollars, euros or pounds.
DateInputTValue Blazor Bootstrap DateInputTValue component is constructed using an HTML input of type="date" which limits user input based on pre-defined parameters. This component enables users to input a date using a text box with validation or a special date picker interface.
DoughnutChart Doughnut charts are probably the most commonly used charts.
They are divided into segments, the arc of each segment shows the proportional value of each piece of data.
For more information, visit https://www.chartjs.org/docs/latest/charts/doughnut.html
DoughnutChartDataset The doughnut/pie chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. https://www.chartjs.org/docs/latest/charts/doughnut.html#dataset-properties.
Dropdown Dropdowns are toggleable, contextual overlays for displaying lists of links and more.
They are toggled by clicking, not by hovering; this is an intentional design decision by bootstrap.
For more information, visit https://getbootstrap.com/docs/5.0/components/dropdowns/.
DropdownActionButton Action button within a Dropdown, which is used to make only
the part defined in this component open up the Dropdown rather than the whole DropdownToggleButton
For more information, see
DropdownDivider Renders a divider within a Dropdown component, to separate different sections.
DropdownHeader Title element for a Dropdown
DropdownItem Represents an item in a Dropdown
DropdownMenu Represents the menu section in a Dropdown component.
DropdownToggleButton The toggle button the user can press to deploy the contents of the Dropdown
EnumExtensions Enum extensions Pattern matching: https://learn.microsoft.com/en-us/dotnet/csharp/fundamentals/functional/pattern-matching Discard pattern: https://learn.microsoft.com/en-us/dotnet/csharp/language-reference/operators/patterns#discard-pattern
ExpressionExtensions Extensions for Expression objects, in use for GridColumnTModel, TProperty
FilterOperatorInfo Represents a filter operator, usually used in a GridTItem.
FilterOperatorUtility Utility class to retrieve filter operators for different types of GridColumnTModel, TProperty value types.
GridTItem Use Blazor Bootstrap grid component to display tabular data from the data source. It supports client-side and server-side paging and sorting.
GridColumnTModel, TProperty Represents a column in the GridTItem.
GridDataProviderRequestTItem The class that handles a request from a GridTItem to filter/sort its data based on user interaction, or JavaScript interop.
GridDataProviderResultTItem Represents the result of a data provider request for a GridTItem
GridExtensions Extensions for GridTItem and GridColumnTModel, TProperty mechanisms.
GridRowEventArgsTItem Represents the event arguments for the RowClick(UTP, MouseEventArgs) (and double-click) events.
GridState User state of the GridTItem.
Icon Blazor Bootstrap icon component will display an icon from any icon font.
Use the parameter Name to specify the Bootstrap icon name. The values from IconName are derived from the official Bootstrap icons set.
IdUtility Generates GUID's for use in Blazor components to use as the ID of HTML elements.
Interaction Namespace: options.interaction, the global interaction configuration is at Chart.defaults.interaction. https://www.chartjs.org/docs/latest/configuration/interactions.html#interactions.
LineChart A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets.
For more information, visit https://www.chartjs.org/docs/latest/charts/line.html
LineChartDataset The line chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. https://www.chartjs.org/docs/latest/charts/line.html#dataset-properties.
Modal Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
For more information, visit the Bootstrap Modal documentation.
ModalOption Represents the options for a Modal that the user can interact with.
ModalService Service to show Modal dialogs during runtime.
NavElement Navigation element component for sidebars.
NavItem Class to determine a navigation from one route to the other, regardless if we're moving to another website, doing a full page load or only a partial component load.
NavLinkExtensions Extension methods to help with navigation links.
NumberInputTValue Blazor Bootstrap NumberInputTValue> component is built around HTML input of type="number" that prevents the user input based on the parameters set.
Pagination Use Blazor Bootstrap pagination component to indicate a series of related content exists across multiple pages.
For more information, visit the Bootstrap Pagination documentation.
PaginationItem Represents a pagination item within a Pagination component.
PaginationLink Represents a pagination link within a Pagination component.
PieChart Pie charts are probably the most commonly used charts.
They are divided into segments, the arc of each segment shows the proportional value of each piece of data.
For more information, visit https://www.chartjs.org/docs/latest/charts/doughnut.html
PieChartDataset The doughnut/pie chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. https://www.chartjs.org/docs/latest/charts/doughnut.html#dataset-properties.
PolarAreaChart Polar Area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.
PolarAreaChartDataset A radar chart is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets. https://www.chartjs.org/docs/latest/charts/polar.html.
Preload Indicate the loading state of a page with Blazor Bootstrap preload component.
PreloadService Service to display a loading spinner on the screen. (Preload)
Progress Documentation and examples for using the Blazor Bootstrap progress component featuring support for stacked bars, animated backgrounds, and text labels.
For more information, visit the Bootstrap Progress documentation.
ProgressBar Represents a colored bar within a Progress. A Progress may contain multiple ProgressBar components.
RadarChart Radar charts are a way of showing multiple data points and the variation between them.
RadarChartDataset A radar chart is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets. https://www.chartjs.org/docs/latest/charts/radar.html#dataset-properties.
RangeInputTValue Represents a Blazor component that provides a range input for numeric values.
See Bootstrap Range Input for more information.
Ribbon A bootstrap ribbon with tabs and items.
RibbonGroup Represents a group of RibbonTab's within a Ribbon component.
RibbonItem Represents a single item within a Ribbon component, usually as part of a RibbonItemGroup.
RibbonItemGroup Represents a small set of RibbonItems within a RibbonTab component.
RibbonTab Represents a tab within a Ribbon component. This component is intended to contain RibbonGroup and RibbonItem components.
Scales Chart scales settings
ScatterChart Scatter charts are similar to line charts, but each data point is represented by a marker.
ScatterChartDataset Scatter charts are based on basic line charts with the x-axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties. https://www.chartjs.org/docs/latest/charts/scatter.html#dataset-properties. The scatter chart supports all the same properties as the line chart. By default, the scatter chart will override the showLine property of the line chart to .
SortableListTItem Represents a sortable list component.
SortableListEventArgs Represents the event arguments for the SortableListTItem events.
SortableListJsInterop This class provides JavaScript interop methods for the SortableListTItem component.
Spinner Visualize the loading state of a component or page using the Blazor Bootstrap Spinner component.
For more information, visit the Bootstrap Spinner documentation.
SpinnerCircle Represents a circle in the spinner.
SubstExpressionVisitor Custom expression visitor to substitute parameters.
Switch Use the Blazor Bootstrap Switch> component to show the consistent cross-browser and cross-device custom checkboxes.
Tab Represents an individual tab within a Tabs component.
Tabs Represents a set of tabbed pages. Each tab should be defined using a Tab component.
Each Tab contains its own content, and can be optionally disabled.
TickMark Mark for a RangeInputTValue
TimeInputTValue Blazor Bootstrap TimeInputTValue component is constructed using an HTML input of type="time" which limits user input based on pre-defined parameters. This component enables users to input a time using a text box with validation or a special time picker interface.
Toast Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
For more information, visit the Bootstrap Toasts documentation.
ToastMessage A message to be displayed on the ToastService
Toasts Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
For more information, visit the Bootstrap Toasts documentation.
ToastService Service to display toast messages on the screen. See for more information.
Tooltip Represents a tooltip that appears when the user hovers over an element that has the tooltip encased in it.
For more information, visit the documentation.

Structures

CssOpacity Represents the opacity of a color or CSS element based on a provided value.
This structure exists so both integers ranging from 0 to 255 and doubles ranging from 0 to 1 can be used interchangeably.
TimeChartItem Represents a single item in a time chart (within a line chart).

Interfaces

IGridColumnTModel Represents a GridColumnTModel, TProperty interface. This interface is created so the GridTItem can use the columns without needing to know the concrete type.

Delegates

GridDataProviderMethodTItem Data provider (delegate).
GridFiltersTranslationMethod Grid filters translation provider (delegate).

Enumerations

AlertColor Color for an Alert component
Alignment Indicates the alignment of a component.
Anchor The anchor to be used as a point of reference for a ChartDatasetDataLabels.
BadgeColor Color of a Badge
BadgeIndicatorType The border-radius style of the Badge
BadgePlacement Placement for Badge elements relative to its parent.
ButtonColor Bootstrap color of a Button
ButtonSize Define the size of the Button.
By default, the size of a Button is None
ButtonType Type of the Button to display('a' html element, 'button' html element, etc.)
CalloutColor Color for a CallOut component.
CardColor Color for a Bootstrap Card
CheckboxState The state a GridTItem's selector item can be in.
CurrencySign Currency sign options for a CurrencyInputTValue
DialogSize The size of a ConfirmDialog.
DropdownAutoCloseBehavior Behavior invoked when a Dropdown closes.
DropdownColor Color for a Bootstrap Dropdown
DropdownDirection Direction the items in a Dropdown should be ordered in.
DropdownItemType The type of item in a Dropdown.
GridSelectionMode Rule for row selection in a GridTItem
HeadingSize Element type for a heading in HTML (H1-6)
IconColor The color to employ for an Icon. See for more information.
IconName Represents a Bootstrap Icon, as specified in the Bootstrap Icons library.
See https://icons.getbootstrap.com/ for more information.
IconSize Represents the size of an IconName
InteractionMode Interaction modes for the chart.
LanguageCodehttps://prismjs.com/#supported-languages
LanguageCodeStyles Language code styles for PrismJS highlighting
ModalSize Represents the size of a Modal.
ModalType Represents the color of a Modal.
NavStyle Visual style for a nav element.
Position The position of a Bootstrap Badge component.
ProgressColor Color for a Bootstrap Progress bar
ProgressType The way the progress indicator inside a Progress is displayed.
SortDirection Sorting direction for a Grid's column.
SpinnerColor Color for a Bootstrap Spinner
SpinnerType Type of Spinner to display
StringFilterOperator Defines the string filter operator, which defines the String method of the same name to invoke.
Target The target of an 'A' HTML element.
ToastType Color for the background of a Toast
TooltipColor Color used for a Bootstrap Tooltip
TooltipPlacement Placement for a Tooltip

See Also

Other Resources