How to automatically adjust the size of the Bokeh plot to the screen size of the device used

Question

I use the built-in attachment to add a Bokeh patch to my web page. I would like to adjust its size when viewing from different devices, for example. mobile, tablet, etc., but cannot figure out how to do this.

In my HTML, I wrapped the Bokeh section in a Bootstrap div with class "col-lg-4". While the div is adjusted to fit the size of the screen, the Bokeh portion simply ends up spilling horizontally outside the div and screen. Is there any way to solve this?

Here is a snippet from my HTML page with a chart attachment:

<div class="col-lg-4"><div class="well" style="text-align: center"><p>
{% if script != None %}
{{ div | safe}} 
{% endif %}
</p></div></div>

and the corresponding function for building Bokeh:

def plotreg(beta, alpha, xreturn, yreturn):
    x = np.arange(-0.2, 0.3, 0.01)
    y = alpha + beta*x
    p = figure(width=700,height=350)
    p.line(x, y, line_dash="4 4", line_width=1.5, color='gray')
    p.circle(xreturn, yreturn, fill_color="grey", size=6, hover_fill_color="firebrick",
    fill_alpha=0.05, line_color = "firebrick", hover_alpha=0.3)
    p.xaxis.axis_label = "Market Return"
    p.yaxis.axis_label = "Stock Return"
    p.outline_line_width = 5
    p.outline_line_alpha = 0.3
    p.outline_line_color = "navy"
    comp = components(p)
    return comp

Answer 1

. , p = figure (width = 700, height = 350, = True)

Bokeh 0.12.10 After @Alex . Bokeh 0.12.10. sizing_mode = 'fixed' responsive = False sizing_mode = 'scale_width' = True .