Placing plotly.js plot to fit container with Bootstrap

plotly.js
1

Hello.
I am currently trying to use Plot.ly to create some visualizations, but I am having a hard time placing the plot to match the parent div container.

I created a minimal example.

As you can see, I would like to place the plots inside the parent container with the class plot-area, and then style this parent container. However, it seems that the plot goes a bit more to the right side, even though it has the same size of the parent container (you can verify this with inspect element). If the plot was placed correctly, then you would not see the aqua background on the parent container (As the plot would fill the entire container), and the red shadow would be correctly made (As you can see there is no shadow on the right side of the plots).

How can I fix this? I know that I can style the svg-container but that does not solve my problem as every single graph that I make will have the same formatting.

Thank you!

2

So this problem seems to be related to Bootstrap and not to plotly. I used flexbox instead of Bootstrap and it worked as desired.

Still, I would like to know if it is possible to use this with the bootstrap containers and row and columns.
Thank you!

3

Styles

> .nopadding {
>      padding: 0;
>      margin: 0;
> }

Html

<div class='col-md-12 nopadding'></div>