0

enter image description hereI'm making a django-based web app that has bootstrap cards with some graphs inside of them. I'm using bootstrap so both the graphs and the cards are responsive; however at some screen sizes, the graphs extend beyond the size of the cards. Is there a way to force everything in a card (or some other container) to say inside the container?

Partial html code. Can post the graph code if helpful - it is written in python + plotly. I'm not sure if the problem is with the graphing or with the html/script.

<div class="container">
   <h2 class="pb-2 border-bottom mt-4">Scores for {{ user.username }} </h2>
        <div class="row mb-4 mt-4">
            <div class="col-lg-6">
                <div class="card">
                  <div class="card-body">
                    <h5 class="card-titler">Result</h5>
                    <p style="color:gray;"> {{last_test_date | safe}}</p>
                    {{score | safe}}
                     <!-- <div class="chart" id="bargraph1", style="height: 150px">-->
                        <div class="chart" id="bargraph1">
                         <script>
                            var graphs = {{plot1 | safe}}
                         </script>
                     </div>
                      <a href="#" class="card-link text-end p-2">Learn More</a>            
                  </div>
                </div>
             <div class="col-lg-6">
                <div class="card">
                   <div class="card-body">
                    <h5 class="card-title">Results Over Time</h5>
                    <br>
                      <!--<div class="chart" id="bargraph2", style="height: 225px">-->
                        <div class="chart" id="bargraph2">
                         <script>
                            var graphs = {{plot2 | safe}}
                         </script>
                      </div>
                   </div>
                </div>
        </div>
    </div>
user2154589
  • 49
  • 9

2 Answers2

1

reference

CSS Units - What is the difference between vh/vw and %?

You can try editing the CSS of bar graph1&2 as out of 100%. the percent at the end can apply to a fixed parent container like card-body

1

Give 100% width to the graphs.

#bargraph1,#bargraph2{
    width:100%;
}
Kartik Verma
  • 34
  • 5