-
Notifications
You must be signed in to change notification settings - Fork 7
Getting Started
To get started, you first need to set up your development environment for Blazor applications. Refer to this documentation from Microsoft to learn more.
When you have your standard Blazor application created, there are a few things you need to do to get Blazorade Bootstrap up and running.
Blazorade Bootstrap is available on Nuget, so you you can simply add a reference to it in Visual Studio, or use the dotnet CLI to do the same.
You need to add a a reference to the Bootstrap CSS and JavaScript resources. The simplest way to do this is to add these to the root page of your application.
In Blazor Server applications, this is by default the /Pages/_Host.cshtml file. In Blazor WebAssembly projects, the same file is found at /wwwroot/index.html.
In the <head> section of this file, add the following reference to a compiled version of the Bootstrap CSS styles.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">If you have your own themed version of Bootstrap, then you add a reference to the CSS you've built instead of the above.
Many of Bootstrap's components require JavaScript in order to work properly, so you need to add the following JavaScript references too. Scripts are typically added as the last elements before the closing </body> element.
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 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.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>Blazorade Bootstrap comes with a JavaScript file that its components use to communicate with the Bootstrap JavaScript implementations. Add the following script after the scripts you added above.
<script src="_content/Blazorade.Bootstrap.Components/bbs.js"></script>
- Home
- Design Principles
- Getting Started
- Components
- Content
- Layout Components
- Generic Elements
- Utilities
- Releases