Skip to content
This repository was archived by the owner on Jan 21, 2020. It is now read-only.

Home

Jump to bottom
Mika Berglund edited this page Dec 30, 2019 · 15 revisions

Blazor Bootstrap

Blazor Bootstrap defines Bootstrap components as Razor components that are designed to be used in Blazor applications. These components make it easier to leverage Bootstrap in your Blazor applications.

Live Demo

A live demo containing all of the components in Blazor Bootstrap is available as a WebAssembly version at mikaberglund.github.io/Blazor-Bootstrap.

Getting Started

This section outlines the steps you need to take to start using Blazor Bootstrap in your Blazor application. Be also sure to check the Design Principles to better understand why the components are design the way they are.

Create a Blazor Application

First you need to have a Blazor application that you want to use Blazor Bootstrap in. Refer to Get started with AS.NET Core Blazor for details.

Referencing Blazor Bootstrap

Blazor Bootstrap is available on Nuget, so you you can simply add it to your project from from Visual Studio, or use the dotnet CLI to do the same.

You can also download the code or clone the Blazor Bootstrap repository, for instance as a submodule to your main repository, and add a reference to the BlazorBootstrap.Components library.

Configure Bootstrap

First you need to configure Boostrap for your application. This means that you need to add references to the Bootstrap CSS and JavaScript resources to your application. In Blazor, you do this in the _host.cshtml file, which you find in the Pages folder in your Blazor application. This is demonstrated in the ServerAppDemo application, which is part of the Blazor Bootstrap repository.

In the <head> section of your HTML document, add the following CSS reference.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

Then, just before the closing </body> tag on your HTML document, add the following script references.

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Blazor Bootstrap Scripts

Blazor Bootstrap uses JavaScript to communicate with the Boostrap JavaScript functions, so you need to add that too to the script references you added above.

After the <script> references above, add the following script reference.

    <script src="_content/BlazorBootstrap.Components/bbs.js"></script>

Please note! The BlazorBootstrap.Components library will automatically expose the above script file in any ASP.NET Core web application that references it. Read more about this on Consume content from a referenced RCL.

Contents

Clone this wiki locally