Plots Sized Incorrectly with Bootstrap

📊 Plotly Python
1

I’m using Python to create a static HTML file (with Bootstrap 5) to display my figures. When I open my file, some of the plots are squashed as shown below:

image
image1811×558 29.1 KB

If I resize the browser window and maximize it, then the plots are displayed properly.

image
image1808×511 33.3 KB

I’m converting all my plots to html, then formatting them to my layout as follow:

figs = [fig1, fig2, fig3, fig4, fig5, fig6, fig7, fig8, fig9, fig10, fig11, fig12]

html_figs = []

for fig in figs:
    html_figs.append(pio.to_html(fig))

bootstrap_layout = """<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>

<body>
    <div class="container">
        <div class="row text-center">
            <h1>Programming and Reach by Goal</h1>
        </div>
        <div class="row">
            <div class="col">
                {0}
            </div>
        </div>
    </div>
        
    <div class="container">
        <div class="row text-center">
            <h1>Demographics</h1>
        </div>
        <div class="row">
            <div class="col">
                {1}
            </div>
            <div class="col">
                {2}
            </div>
        </div>
    </div>
    
    

        <div class="row text-center">
            <h1>RE-AIM Measures of Success</h1>
        </div>
        
        <div class="row text-center">
            <h2>REACH</h2>
        </div>
        <div class="row">
            <div class="col">
                {3}
            </div>
            <div class="col">
                {4}
            </div>
            <div class="col">
                {5}
            </div>
            <div class="col">
                {6}
            </div>
            <div class="col">
                {7}
            </div>
        </div>

        

        <div class="row text-center">
            <div class="col">
                <h2>ADOPTION</h2>
            </div>
            <div class="col">
                <h2>IMPLEMENTATION</h2>
            </div>
        </div>
        <div class="row">
            <div class="col">
                {8}
            </div>
            <div class="col">
                {9}
            </div>
            <div class="col">
                {10}
            </div>
            <div class="col">
                {11}
            </div>
        </div>
   
</body>

</html>"""

f = open(filename,'w')

bootstrap_layout = bootstrap_layout.format(*html_figs)

f.write(bootstrap_layout)
f.close()

I’m new to HTML/CSS/Boostrap, so I’m not sure what the issue is. The layout looks fine when created with Dash, but I need a shareable HTML file. As far as I know, exporting HTML files from Dash is not supported.