• NOTE: BootstrapDotnet is based on Preview-5 of ASP.NET 3.
• NOTE: Documentation is far from complete. TestClient may contain a working examples of how to use this library.

The idea is to make it less likely that somebody breaks the Bootstrap conventions and creates invalid "Bootstrap HTML", and at the same time keep syntax simple and similar to Bootstraps own. This is done by using and abusing C# ability to overload operators such as - and | and by using static to import instances of options classes from a factory.

This makes code like this compile:

And code like this fail at compile time:

At the moment, the functionality around Bootstraps grid system is done, i.e. the components <Container>, <Row> and <Column>. Almost all properties that can be set on one of the grid components are implemented. E.g. with <Column>, there is support for compile-time check of column options, e.g. col-{breakpoint}-{width} and col-auto.

The compile time check works by having a strongly typed parameter in Column, [Parameter] SpanParameter Span { get; set; }, and using static imports to make variants of "ISpanOption's" available in the Razor views. The last piece of the puzzle is utilizing C# implicit operator overloading to convert between the different subtypes of SpanParameter and int.

That makes it possible to specify complex column configurations such as <div class="col-12 col-md-8 col-lg-4"> as <Column Span="12 | md-8 | lg-4">, which the compiler checks. If you e.g. by accident mx-8 instead of md-8, i.e. <Column Span="12 | mx-8 | lg-4">, the compiler will complain.

In some cases the compiler cannot be made to validate that correct options are applied, so BootstrapDotNet resorts to runtime validation instead. Currently, this is done in the following cases:

• When specifying a number in a parameter or in a combination with another option, then the number range is validated at runtime.

1. Install the nuget package in your Blazor-client or Blazor-server-side application.
2. Add the following to your _Imports.razor, e.g. in the root of your application.

@using Egil.RazorComponents.Bootstrap
@using Egil.RazorComponents.Bootstrap.Grid
@using static Egil.RazorComponents.Bootstrap.Options.Factory.LowerCase.Abbr
@using static Egil.RazorComponents.Bootstrap.Options.SpacingOptions.Factory.LowerCase

3. If you are creating a Blazor client application based on the Blazor project template, you can delete the wwwroot/css/bootstrap/bootstrap.min.css file, since it is included in BootstrapDotNet. If you are creating a Blazor server-side project, then you should leave the file in place, and possible add Bootstrap 4.3's JavaScript files and jQuery, if you are using components that require JavaScript.

The following table compares specifying Bootstraps options using normal Bootstrap grid-syntax and that of using the library's syntax. That should make it possible for anyone familiar with Bootstraps syntax to quickly pick-up the library's syntax.

Responsive container:

Fluid container:

Row without options:

Row with no gutters:

Vertical alignment:

Horizontal alignment:

Column without options:

Span with width (1-12) and breakpoints:

Order with index (0-12), first, last, and breakpoints:

Offset with number (1-11) and breakpoint and number (0-11):

All components have the following parameters:

From Bootstraps documentation on their Spacing utilities, we see a number of different ways to specify margin and padding on Bootstrap components. On components that support padding and margin, currently Row and Column, one of the following syntax' are used:

• {size}
• {sides}-{size}
• {breakpoint}-{size}
• {sides}-{breakpoint}-{size}

Where size is:

• a number in the range from -5 to 5 for both Margin and Padding
• auto for Margin only.

Where sides is one of:

• top, which matches the Bootstrap side param t
• bottom, which matches the Bootstrap side param b
• left, which matches the Bootstrap side param l
• right, which matches the Bootstrap side param r
• horizontal, which matches the Bootstrap side param x
• vertical, which matches the Bootstrap side param y

And where breakpoint is one of:

• sm
• md
• lg
• xl

Examples, compared to Bootstrap: