Blazorise Display Utilities

Show, hide, or switch display modes at each breakpoint with a fluent display builder.

Display utilities let you control visibility and layout directly from components, keeping responsive rules close to the markup and consistent across providers.

How it works

Set the Display parameter on any component and chain display values with breakpoints, for example Display.None.Block.OnFullHD. When you use Display.Flex or Display.InlineFlex, you can also chain direction helpers like Row and Column.

Examples

Responsive visibility

This example hides the text on smaller screens and shows it on large screens, helping you reduce visual noise on mobile while keeping the information available on desktop.

The layout block below uses Display.Flex with Row and Column to switch from stacked to side-by-side content at the desktop breakpoint.

The last panel appears starting at the tablet breakpoint, making it easy to emphasize secondary content without crowding small screens.

Hidden on mobile and tablet, visible on desktop and larger screens.

Sidebar
Main content
Visible from tablet up to highlight supporting information without crowding mobile layouts. 
<Paragraph Display="Display.None.Block.OnDesktop" Margin="Margin.Is2.FromBottom">
    Hidden on mobile and tablet, visible on desktop and larger screens.
</Paragraph>

<Div Display="Display.Flex.Column.OnMobile.Flex.Row.OnDesktop"
     Padding="Padding.Is3"
     Background="Background.Light"
     Border="Border.Is1.Secondary.Subtle">
    <Div Padding="Padding.Is2"
         Margin="Margin.Is2.FromBottom.Is3.FromEnd.OnDesktop"
         Background="Background.Primary.Subtle"
         Border="Border.Is1.Primary">
        Sidebar
    </Div>
    <Div Padding="Padding.Is2"
         Background="Background.Info.Subtle"
         Border="Border.Is1.Info">
        Main content
    </Div>
</Div>

<Div Display="Display.None.Block.OnTablet"
     Padding="Padding.Is2"
     Margin="Margin.Is3.FromTop"
     Background="Background.Warning.Subtle"
     Border="Border.Is1.Warning">
    Visible from tablet up to highlight supporting information without crowding mobile layouts.
</Div>
On this page