Repro:
- Create the default Visual Studio Blazor Server Template with sample pages.
- Add a nuget reference to Microsoft.AspNetCore.Components.QuickGrid (10.0.0)
- Replace the weather page with a similar page, just using QuickGrid instead of a "manual" HTML table:
@page "/weather"
@using Microsoft.AspNetCore.Components.QuickGrid
<PageTitle>Weather</PageTitle>
<!-- QuickGrid default theme only -->
<QuickGrid Items="@forecasts">
<PropertyColumn Property="@(f => f.Date)" />
<PropertyColumn Property="@(f => f.TemperatureC)" Sortable="true" />
</QuickGrid>
<!-- Bootstrap table only -->
<QuickGrid Items="@forecasts" Class="table" Theme="nonExistingTheme">
<PropertyColumn Property="@(f => f.Date)" />
<PropertyColumn Property="@(f => f.TemperatureC)" Sortable="true" />
</QuickGrid>
<!-- Both QuickGrid default theme and Bootstrap table -->
<QuickGrid Items="@forecasts" Class="table">
<PropertyColumn Property="@(f => f.Date)" />
<PropertyColumn Property="@(f => f.TemperatureC)" Sortable="true" />
</QuickGrid>
@code {
IQueryable<WeatherForecast>? forecasts;
protected override void OnInitialized()
{
var startDate = DateOnly.FromDateTime(DateTime.Now);
forecasts = Enumerable.Range(1, 5).Select(index =>
new WeatherForecast(startDate.AddDays(index), Random.Shared.Next(-20, 55))
).AsQueryable();
}
private record WeatherForecast(DateOnly Date, int TemperatureC);
}
This yields the following three table layouts:
It appears that the combination of
- QuickGrid default theme and
- Bootstrap 5 table (seen in table 3) causes an unintended "indent" of the headers.
Neither table 1 (only QuickGrid default theme) nor table 2 (only Bootstrap 5 table) show that.
The default App.razor supplied by VS imports first bootstrap.min.css, then app.css and then the auto-generated {PACKAGE ID/ASSEMBLY NAME}.styles.css, which also includes the QuickGrid css directives.
I know that I can fix that by adding custom !important CSS overrides. That is not my question.
My question is this:
- Is this really an incompatibility between those two components (which seems odd, since the default Blazor template includes Bootstrap, and QuickGrid is the default grid control for Blazor) that every developer is supposed to fix by themselves,
- or am I just "holding it wrong" and missing something obvious?

bootstrap.min.css, then app.css and then the auto-generated{PACKAGE ID/ASSEMBLY NAME}.styles.css, which also includes the QuickGrid css directives.