Replies: 1 comment
-
Hi @kyoungup I am a contributor to Panel which builds upon Bokeh. Getting great looking Bokeh widgets is a major, major pain. I've tried in so many ways for the last 2 years. Initially trying to use Bootstrap css like you. It was impossible for many reasons. Then trying to build my own widgets based on different js frameworks - its a major task and then you have to explain users why there are two sets of widgets that make (cannot) work the same. I ended up making custom css inspired by Microsofts Fast Design. Which is why Panel now has a Fast templates with a nice look and feel. You can actually use this for Bokeh as well. But those templates are also a pain. They are heavy to develop and maintain. You can see them here |
Beta Was this translation helpful? Give feedback.
-
Hi, I put this issue on Bokeh discourse: https://discourse.bokeh.org/t/how-to-apply-bootstrap-css/8751
What I tried is to apply Bootstrap design on Bokeh widgets using 'css_classes'
self.btn_save = Button(label='Save', css_classes="w-100 btn btn-primary btn-lg".split(), sizing_mode='stretch_width')
But, actually I got this HTMLs 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>
I think the best and popular use case is to combine Bokeh's python event handler and Bootstrap's css features such as look & feels - convenient backend and great frontend. Actually, Bokeh's design (look & feel) of widgets cannot suite with Boostrap framework as above because the css_classes are applied outside of the .
I think it is going to be great to apply Boostrap's css to Bokeh's widgets like 'css_classes'. I am trying to cherry-pick the best part of both frameworks.
I want you to consider a way to import Boostrap's features in the next version. Otherwise, Bokeh would be isolated from best use cases.
Beta Was this translation helpful? Give feedback.
All reactions