CODEWITHSUNDEEP
htmlbootstrap-4plotly
user350540
user350540

Reputation: 469

Centering Plotly Graphic Within Bootstrap Card

My code for producing a plotly graphic within a boostrap card is below. I'm wondering the best way to ensure it is centered within the card on any device.

         <div class="col-sm-6">
                <div class="card bg-light text-white">
                    <div class="card-header bg-dark">
                        <center>A Plot</center>
                    </div>
                    <div class="card-body align-items-center" style="height: 20rem;">
                        <div class="chart" id="some_graph">
                            <script>
                                var graphs = {{some_plot | safe}};
                                Plotly.plot('some_graph', graphs, {});
                            </script>
                        </div>
                    </div>
                </div>
            </div>

Thank you for any suggestions

Upvotes: 1

Views: 1050

Answers (1)

David Liang
David Liang

Reputation: 21506

card-body is not displayed as flex box by default. If you want to use align-items-center or even justify-content-center, you need to enable the flex behaviors first:

<div class="card-body d-flex align-items-center justify-content-center">
    ...
</div>

The default direction of d-flex is row so if you want the graphic to be:

  • horizontally centered - use justify-content-center
  • vertically centered - use align-items-center
  • both - use both

Upvotes: 1

Related Questions