Getting Started

Set up the Bootstrap Component Library (BCL) TagHelpers in an MVC app.

Quick start

Start by referencing the BCL packages, registering the services, and loading Bootstrap assets in your MVC layout. The examples below focus on the BCL-specific wiring that lets Razor views dogfood Bootstrap tag helpers.

CDN links

Use Bootstrap 5.3 CSS and JavaScript from your approved CDN or local static assets. Keep Popper available when using dropdowns, popovers, or tooltips.

1) Install and reference libraries

Ensure your project references the BCL libraries (Projects or NuGet):

  • CopelandSyst.BootstrapComponents
  • CopelandSyst.BootstrapModels
  • CopelandSyst.StandardTagsLibrary

2) Configure Program.cs

Register MVC + BCL view locations and required services. Add the nonce middleware before static files and endpoints with app.UseMiddleware<NonceMiddleware>(); so generated nonces are available to captured styles and scripts.

csharp 

builder.Services
.AddControllersWithViews()
.AddBootstrapComponents();

builder.Services.AddStandardTagsLibrary();
builder.Services.AddHttpContextAccessor();

var app = builder.Build();
app.UseMiddleware<NonceMiddleware>();
app.UseStaticFiles();
app.MapStandardTagLibraryResources();
app.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");

3) Update layout

Include Bootstrap CSS/JS and Prism (optional) and use the BCL TagHelpers.

aspnet 


<link rel="stylesheet" href="~/_content/CopelandSyst.BootstrapComponents/lib/Bootstrap/dist/css/bootstrap.min.css" />
<script src="~/_content/CopelandSyst.BootstrapComponents/lib/Bootstrap/dist/js/bootstrap.bundle.min.js"></script>

Next steps

After the layout is wired, validate a simple helper, then move on to JavaScript-backed components and form validation.

4) Use TagHelpers

Use Bootstrap tag helpers directly in Razor views. Helpers emit Bootstrap classes and data attributes while still allowing normal HTML attributes and utility classes.

aspnet 

<bs-div display="Flex" flex-wrap="Wrap" gap="Default2" align-items="Center">
    <bs-button btn-style="Primary">Primary action</bs-button>
    <bs-button btn-style="Secondary" outline="true">Secondary action</bs-button>
    <bs-spinner spinner-type="BorderSmall">Loading...</bs-spinner>
</bs-div>

JS components

Bootstrap JavaScript-backed components use child configuration tags. Keep the configuration inside the triggering element.

aspnet 

<bs-button btn-style="Primary">
Save changes
<bs-tooltip placement="Top">Submit the current form</bs-tooltip>
</bs-button>

<bs-dropdown btn-style="Secondary">
Actions
<bs-dropdown-menu>
    <bs-dropdown-menu-item href="#">Open</bs-dropdown-menu-item>
    <bs-dropdown-menu-item href="#">Archive</bs-dropdown-menu-item>
</bs-dropdown-menu>
</bs-dropdown>

Important globals

Bootstrap applies global browser and document assumptions. Keep these baseline requirements in the app shell so component helpers render into the same environment as Bootstrap's own examples.

HTML5 doctype

Use the HTML5 doctype in the shared layout so browser rendering modes stay standards-based.

Viewport meta

Include the responsive viewport meta tag in the layout head before rendering responsive grid, table, and component examples.

Box-sizing

Bootstrap sets global box sizing through Reboot. Avoid overriding it globally unless the override is deliberate and tested across helpers.

Reboot

Reboot normalizes element defaults used by BCL helpers, including form controls, headings, tables, buttons, and body typography.

BCL notes

  • Nonce-based CSP is supported via INonceService. Register it as scoped so nonce values are request scoped, not application lifetime. Inline scripts/styles in views should use provided helpers.
  • MapStandardTagLibraryResources() exposes required static assets.
  • In debug, Tag Stack Capture helps diagnose TagHelper misuse.

Community

Bootstrap community resources still apply to the emitted markup. For BCL-specific behavior, prefer these docs pages and the component source as the local source of truth.