Forums Ignite UI for React
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Oliver Schmidt
1235
How can I apply a Bootstrap theme or any Styling?
posted

I am new Ignite UI for React and want to style the DataGrid with my Bootstrap theme. How can i do this?

Or how can i style the Datagrid at all?

  • 34690
    Offline posted

    Hello Oliver,

    The IgrDataGrid supports theming using custom CSS properties that map directly to properties on the grid itself. For example, you can set the following in CSS:

    .ig-data-grid {
         --row-hover-background: “red”;
    }

    This will map directly to the RowHoverBackground property on the IgrDataGrid and set it to “red.”

    I am attaching a sample project that demonstrates our IgrDataGrid with a dark theme applied. If you change the colors for the shared variables in the .css file at the top of the file, you should be able to modify it for your bootstrap theming.

    I hope this helps you. Please let me know if you have any other questions or concerns on this matter.

    binding-local-data.zip