AugusteVN.Razor.Components.Bootstrap
1.0.6
There is a newer version of this package available.
See the version list below for details.
See the version list below for details.
dotnet add package AugusteVN.Razor.Components.Bootstrap --version 1.0.6
NuGet\Install-Package AugusteVN.Razor.Components.Bootstrap -Version 1.0.6
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="AugusteVN.Razor.Components.Bootstrap" Version="1.0.6" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
<PackageVersion Include="AugusteVN.Razor.Components.Bootstrap" Version="1.0.6" />
<PackageReference Include="AugusteVN.Razor.Components.Bootstrap" />
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package.
paket add AugusteVN.Razor.Components.Bootstrap --version 1.0.6
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
#r "nuget: AugusteVN.Razor.Components.Bootstrap, 1.0.6"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
#:package AugusteVN.Razor.Components.Bootstrap@1.0.6
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package.
#addin nuget:?package=AugusteVN.Razor.Components.Bootstrap&version=1.0.6
#tool nuget:?package=AugusteVN.Razor.Components.Bootstrap&version=1.0.6
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
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,ContentDetailContactInfo,ContentDetailSocialInfo,ProfilePageCard,AddressLink,SocialIcons - 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,OfferModal,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. |
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.
-
net10.0
- AugusteVN._Shared.Extensions (>= 1.1.2)
- 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.
Add more CSS to utilities.css.