I need help with fitting plotly figures into bootstrap cards in a card deck. The content within the card-body is flowing outside of the card width. I want to constrain the figures within the cards, as their height is defined but not width.
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4c6cbcbd0d7d0d6c5d4e4908a918a97">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<style>
.card {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)}
.row {margin-top: 30}
.navbar {background-color: #0269AF}
</style>
</head>
<body>
<nav class="navbar navbar-dark #0269AF">
<span class="navbar-brand mb-0 h1 abs" >Hypercare Trend Analysis: PNW & Florida</span>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="card-deck">
<div class="card">
<div class="card-header">
Florida Hypercare Entries By Associate
<br><i>Colors represent weeks since Go Live</i>
</div>
<div class="card-body">
''' + fig1 + '''
</div>
</div>
<div class="card">
<div class="card-header">
PNW Hypercare Entries By Associate
<br><i>Colors represent weeks since Go Live</i>
</div>
<div class="card-body">
''' + fig2 + '''
</div>
</div>
<div class="card">
<div class="card-header">
Florida Hypercare Entries By Associate
<br><i>Colors represent weeks since Go Live</i>
</div>
<div class="card-body">
''' + fig3 + '''
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>https://i.sstatic.net/wRGIL.png
Example figure:
<div>
... (content shortened for brevity) ...
</div>
</div>