AugusteVN.Razor.Components.Bootstrap
1.0.1
See the version list below for details.
dotnet add package AugusteVN.Razor.Components.Bootstrap --version 1.0.1
NuGet\Install-Package AugusteVN.Razor.Components.Bootstrap -Version 1.0.1
<PackageReference Include="AugusteVN.Razor.Components.Bootstrap" Version="1.0.1" />
<PackageVersion Include="AugusteVN.Razor.Components.Bootstrap" Version="1.0.1" />
<PackageReference Include="AugusteVN.Razor.Components.Bootstrap" />
paket add AugusteVN.Razor.Components.Bootstrap --version 1.0.1
#r "nuget: AugusteVN.Razor.Components.Bootstrap, 1.0.1"
#:package AugusteVN.Razor.Components.Bootstrap@1.0.1
#addin nuget:?package=AugusteVN.Razor.Components.Bootstrap&version=1.0.1
#tool nuget:?package=AugusteVN.Razor.Components.Bootstrap&version=1.0.1
Bootstrap Components for Blazor
A reusable Razor component library for .NET 10 / Blazor built on Bootstrap 5. Bootstrap CSS/JS and Bootstrap Icons ship inside the package's wwwroot, so consuming apps reference everything locally — no CDNs.
Getting Started
Install the package:
dotnet add package AugusteVN.Razor.Components.Bootstrap
Reference the bundled assets in index.html (Blazor WebAssembly) or _Host.cshtml (Blazor Server):
<link href="_content/AugusteVN.Razor.Components.Bootstrap/css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="_content/AugusteVN.Razor.Components.Bootstrap/css/bootstrap-icons-1.10.5/font/bootstrap-icons.min.css" rel="stylesheet" />
<link href="_content/AugusteVN.Razor.Components.Bootstrap/css/utilities.css" rel="stylesheet" />
<script src="_content/AugusteVN.Razor.Components.Bootstrap/js/bootstrap.bundle.min.js"></script>
Usage Example
@using AugusteVN.Razor.Components.Bootstrap.Components.Layout.Cards
<ThumbnailCard Accent="AccentColor.Warning"
Icon="bi bi-heart-fill"
OnClick="@(() => NavigateToDetail(item))">
<Image>
<img class="card-thumbnail-img" src="@coverUrl" alt="@title" />
</Image>
<Footer>
<h6 class="card-title text-truncate">@title</h6>
</Footer>
</ThumbnailCard>
Add an "add new" tile with an overlay:
<ThumbnailCard OnClick="@HandleAddClicked">
<Image>
<img class="card-thumbnail-img" src="@coverUrl" alt="Add item" />
</Image>
<Overlay>
<div class="placeholder-overlay">
<h2 class="bi bi-plus-circle mb-2"></h2>
<h6>Add item</h6>
</div>
</Overlay>
</ThumbnailCard>
Components
Layout
- Cards:
ThumbnailCard,CompactCard,HorizontalCard,NarrowCard,FeaturedCard,ProductCard,ReviewCard,AccentOverlay - Navbars:
TopBar,TopBarNav,BackBar,CloseBar,PageHeaderNav - Panels:
PanelLayout,PanelPrevNextButtons - Accordion:
AccordionLayout,AccordionItemLayout - Tabs:
TabsLayout,TabLayout,TabPaneLayout - HScroll:
HScrollLayout,HScrollThumbnails - Content layouts:
ContentDetailDescription,ContentDetailSocialInfo,ProfilePageCard - Layout helpers:
Section,StickySidebar,DesktopOnly,MobileOnly - Template layouts:
NoResultsLayout,StatusMessageLayout
Functionals
- Buttons:
BackButton,CloseButton - Content:
ContentDetailImagesCarousel - Filters:
CoordinatesFilterLayout,CurrentLocationPicker,MonthPicker,NumericRangeSlider - Forms:
FormLabel - Modals:
CancelModal,RemoveModal,SearchModal,TosModal,TosLayout - Navigation:
CollapsibleSidebar,PanelsFlow,UpDownButtons,UpDownScrollingButtons - SEO:
MetaTagsLayout - Share:
ContentShareLayout,ShareLayout,ShareModal - Standalone:
CaptchaLayout,FiveStarLayout,ToastLayout
Extensions & Models
JSRuntimeExtensionsPanelSelector,ShareData
Brought to you by: kiss-code.com.
| Product | Versions Compatible and additional computed target framework versions. |
|---|---|
| .NET | net10.0 is compatible. net10.0-android was computed. net10.0-browser was computed. net10.0-ios was computed. net10.0-maccatalyst was computed. net10.0-macos was computed. net10.0-tvos was computed. net10.0-windows was computed. |
-
net10.0
- AugusteVN._Shared.Extensions (>= 1.1.1)
- Markdig (>= 0.40.0)
- Microsoft.AspNetCore.Components.Web (>= 10.0.1)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.
Adds the SocialIcons layout component (data-driven social platform icons with brand colors, size/justify/gap options, and a black-and-white mode).