How to apply Bootstrap CSS

Hi, I am trying to apply Bootstrap CSS to Bokeh widgets such as Button. But, it is not working.

For example, I applied it using ‘css_classes’.

self.btn_save = Button(label='Save', css_classes="w-100 btn btn-primary btn-lg".split(),

This generated its HTML like
<div class="bk w-100 btn btn-primary btn-lg" style="position: relative; display: block; left: 0px; top: 0px; width: 662px; height: 31px; margin: 5px;"><div class="bk bk-btn-group"><button class="bk bk-btn bk-btn-default" type="button">Save</button></div></div>

As we can see, my css is applied outside of the actual object.

Please, fix it or let me know how to apply my css style.

Hi @Kevin_Kyoungup_Park Bokeh 2.x tightly manages layout of its own widgets, so the intention of css_classes is really only to afford a mechanism to apply non-layout styles, e.g fonts, colors, outlines, etc. The kind of usage you are describing is definitely not intended or supported. You might consider opening a GitHub development discussion to surface this use-case to more of the core team, in case there is any bearing on the upcoming 3.x work.

In any case, for now, your options would be:

  • Add the Bootstrap components outside Bokeh (e.g. in a page template) and wire things up manually, with regular JS callbacks that manipulate Bokeh objects
  • Create a custom extension that wraps your Bootstrap components

Thank you, @Brian. Your answer is clear for me to do what.
I can wire things up to Bootstrap objects manually, but I would like to change the design of the Button from Bokeh. The bokeh Button is not the object to wire up, though.
Anyway, I hope there is a way to discard or redefine Bokeh’s specific CSSs to apply Bootstrap’s CSSs. Is there a way??

@Kevin_Kyoungup_Park I am sorry but your response seems to have some contradictory statements. To be clear, my suggestion is to not use Bokeh’s Button widget at all, because there is definitely not any supported way to replace the CSS for Button to the extreme degree you are proposing.