Hi Blazor,
Greetings from Syncfusion support.
We have validated your reported query “i have copied and paste it same code, here is my result. Am i missing something ?” at our end. You have referred to the bootstrap theme on your blazor project. So, you can get this output. If you need the output like mentioned on the UG you need to refer material theme on your project like the below code.
[_Host.cshtml]
@page "/"
@namespace WebApplication1.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WebApplication1</title>
<base rel='nofollow' href="~/" />
<link rel="stylesheet" rel='nofollow' href="css/bootstrap/bootstrap.min.css" />
<link rel='nofollow' href="css/site.css" rel="stylesheet" />
<link rel='nofollow' href="_content/Syncfusion.Blazor/styles/material.css" rel="stylesheet" />
</head>
<body>
<app>
<component type="typeof(App)" render-mode="ServerPrerendered" />
</app>
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
<a rel='nofollow' href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
Kindly try the above sample and get back to us If you would require further assistance.
Regards,
Ravikumar Venkatesan
