Styling DOM elements#

Bokeh has a few different mechanism for including CSS styles in output.

Styles#

The Styles class can be used to configure inline style attribute of DOM elements directly:

style = Styles(
    display="grid",
    grid_template_columns="auto auto",
    column_gap="10px",
)
grid = Div(style=style)

Stylesheets#

It is also possible to define and inlude stylesheets in generated output. Bokeh provides a few different variations that can be used to apply CSS rules to DOM objects in Bokeh output:

The global variants are appended to <head> only once, so that the same stylesheet model can be shared between various UI components efficiently.

For example:

from bokeh.models import InlineStyleSheet, Slider

stylesheet = InlineStyleSheet(css=".bk-slider-title { background-color: lightgray; }")

slider = Slider(value=10, start=0, end=100, step=0.5, stylesheets=[stylesheet])