Blazor StackLayout - Overview

Popular Creators

Lindsey Mango
Photos by Rikonavt and by Ivana La on Unsplash
Vincenzo Mays
Photos by Irene Strong and by the BlackRabbit on Unsplash
Marissa Webb
Photos by JJ Jordan and by Silvana Carlos on Unsplash
  • Overview.razor
Loading the demo source code...please wait.

Style in ThemeBuilder

  • Custom SASS variables
  • Atomic customizations
  • Sharing projects
Start Theming
blazor ui ninja image

The StackLayout component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.


The Telerik UI for Blazor StackLayout arranges its inner elements horizontally or vertically in a stack. Nesting stack layouts helps you accommodate more complex information structures into easy to navigate layouts.

The name StackLayout derives from the way this type of layout is used in mobile or WPF applications, and the component aims at making it simple to create such a layout type that you are familiar with from mobile experiences.

You can tailor the Blazor StackLayout component to perfectly align with you project by customizing its width and height, changing the styling, adding spacing between inner elements or changing the orientation from vertical to horizontal and vice versa. The orientation options provide the opportunity to align inner items to the left, right, center or to stretch them.

While the naming and code usage are similar to native applications, the StackLayout is a purely web component that utilizes HTML and modern CSS rules to achieve this layout in a web browser.

While typically used for aligning several elements in the same pattern (in a row or column), you can also use the StackLayout to define more complex layouts by nesting more than one component instance with the appropriate settings. Thus, with a few lines of code, you could create common layouts such as header, footer and content rows, and split the content into several columns, all without the need to use HTML and CSS directly.

This Blazor StackLayout Overview example is part of a unique collection of hundreds of Blazor demos, with which you can see all Telerik UI for Blazor components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for Blazor or ThemeBuilder.

Support & Learning Resources

Additional Resources

An error has occurred. This application may no longer respond until reloaded.