Blazor - How To Add a Class Name

How TO - Add a Class

Learn how to add a class name to an element with Blazor.

Add Class

Step 1) Add HTML:

In this example, we use a button to add the class.

Example:

    

    <button class="btn btn-primary" @onclick="@AddClassFunc">Add Class</button>

    

    <div  class='@(AddClass ? "bg-dark" : "")'>Content</div>

Step 2) Add CSS:

Style the  class name which you want to add

Example:

       

    .bg-dark{

            padding:20px;

            margin-top:20px;

            color:#fff;

        }

Step 3) Add C#:

Example:

    @code{

        private bool AddClass = false;

        public void AddClassFunc()

        {

            AddClass = true;

        }

    }

Tip: Also see How To Toggle A-Class in blazor.