Styling Dash AG Grid with a Bootstrap Theme

Dash AG Grid has some nice built-in themes and the grid style is easy to customize. See more info in the the Dash docs.

If you are using Dash Bootstrap Components, the default grid theme ag-theme-alpine works well with light themes, and the ag-theme-alpine-dark theme looks nice with dark themes. However, if you would like the grid to match the Bootstrap fonts and colors, try using the stylesheet from the dash-bootstrap-templates library .

You just need to add the stylesheet to your app and include className="dbc dbc-ag-grid" to the outer container of your app.

dbc_css = ""
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.SKETCHY, dbc_css])

app.layout = dbc.Container(

    className="dbc dbc-ag-grid"

See a live demo at:

Here is an example that includes a theme change component which makes it easy to check out all 26 themes. Note that there is no callback required to change the themes!

pip install dash-bootstrap-templates

import dash
from dash import html
import dash_bootstrap_components as dbc
import dash_ag_grid as dag
from dash_bootstrap_templates import ThemeChangerAIO
import pandas as pd

dbc_css = ""
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP, dbc_css])

df = pd.read_csv(

columnDefs = [
    {"field": "athlete", "checkboxSelection": True, "headerCheckboxSelection": True},
    {"field": "age", "maxWidth": 100},
    {"field": "country"},
    {"field": "year", "maxWidth": 120},
    {"field": "date"},
    {"field": "sport"},
    {"field": "gold"},
    {"field": "silver"},
    {"field": "bronze"},

grid = dag.AgGrid(
    defaultColDef={"flex": 1, "minWidth": 150, "sortable": True, "resizable": True, "filter": True},

app.layout = dbc.Container(
        html.H5("Dash AG Grid with Bootstrap theme"),
    className="dbc dbc-ag-grid",

if __name__ == "__main__":