Blazor SizeCheck - puts a small badge top-right of the screen on Bootstrap 4.x - see also the DevOnly component

SizeCheck.razor

@* see DevOnly at https://gist.github.com/conficient/aca15e92931a15d76047cee598df2e0c *@
@* a small coloured badge appears on the top right of the screen to show the current Bootstrap 4.x 
   screen breakpoint (see https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)
   This component can be put into your `MainLayout.razor` template so it appears on every page.
   It's wrapped in a `<DevOnly>` component, so will only render in Debug mode. In production it won't appear.
*@
<DevOnly>
    <div style="position:absolute; top: 10px; right: 10px;">
        <span class="badge badge-primary d-none d-xl-inline">xl</span>
        <span class="badge badge-info d-none d-lg-inline d-xl-none">lg</span>
        <span class="badge badge-dark d-none d-md-inline d-lg-none">md</span>
        <span class="badge badge-warning d-none d-sm-inline d-md-none">sm</span>
        <span class="badge badge-danger d-xs-inline d-sm-none">xs</span>
    </div>
</DevgOnly>