Can't center text within a Div

I can’t figure out how to center text with a Bokeh Div element. Usually I’d do this with text-align: center, but adding that to the style of a Bokeh Div element doesn’t seem to do anything. Inspecting the HTML of the rendered page shows that the Div element does have the text-align style set to Center, so I really don’t know what’s going wrong.

Example here:

Clone the repo and run with bokeh serve illustrate-div-centering. There’s a Div with the text Center me at the bottom of the page that will not center itself within the Bootstrap column. The Bootstrap column is where I want it; the Bokeh Div is just not centered within in. See highlighted Bootstrap column and Bokeh Div below.

The answer is to add the classes d-flex and justify-content-center to the parent column (same as adding using display: flex and justify-content: center for a non-Bootstrap application).

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.