New to Telerik UI for Blazor? Download free 30-day trial

Wrap and center the Grid Column Header text


Product Grid for Blazor


How to make the GridColumn title text wrap around and be centered?


Use custom CSS to override the default Grid styles. Since version 3.4.0, the Grid columns provide a HeaderClass parameter that can help to target specific columns.

The custom CSS should align header text to the center and enable text wrapping.

For older product versions, or to target all columns, use .k-header instead of a custom CSS class.

Grid with centered and wrapping column header content

<p>Shrink the browser window if necessary:</p>

<TelerikGrid Data="@GridData"

        <GridColumn Title="Center Center Center Center Center" HeaderClass="center-wrap" TextAlign="@ColumnTextAlign.Center" />
        <GridColumn Field="@nameof(Product.Price)" Title="Sorting Sorting Sorting Sorting Sorting" Filterable="false"
                    HeaderClass="center-wrap" TextAlign="@ColumnTextAlign.Center" />
        <GridColumn Field="@nameof(Product.Price)" Title="Filtering Filtering Filtering Filtering Filtering" Sortable="false"
                    HeaderClass="center-wrap" TextAlign="@ColumnTextAlign.Center" />
        <GridColumn Field="@nameof(Product.Price)" Title="Both Both Both Both Both Both" HeaderClass="center-wrap"
                    TextAlign="@ColumnTextAlign.Center" />


    .k-grid {
        justify-content: center;
        text-align: center;
        white-space: normal;
        vertical-align: middle;

    .k-grid .k-column-title {
        white-space: normal;

@code {
    List<Product> GridData { get; set; }

    protected override void OnInitialized()
        GridData = new List<Product>();
        var rnd = new Random();

        for (int i = 1; i <= 7; i++)
            GridData.Add(new Product()
                Id = i,
                Name = "Product " + i.ToString(),
                Price = (decimal)rnd.Next(1, 100),
                ReleaseDate = DateTime.Now.AddDays(-rnd.Next(60, 1000)),
                Active = i % 3 == 0

    public class Product
        public int Id { get; set; }
        public string Name { get; set; }
        public decimal Price { get; set; }
        public DateTime ReleaseDate { get; set; }
        public bool Active { get; set; }


  • If you only need to center or right-align the header text, use the approach from Center Grid Column Header Content. This will keep the preset display: flex style of the cells.

  • If you want full control over the header text contents and rendering, you can use the column header template.

See Also

In this article