How to build graph + text side-by-side using bootstrap card

1

I am trying to build a boostrap card that will hold a graph on the left hand side taking up about 2/3 of the card and then a description of the graph on the right hand side taking up the remaining space.

I have tried playing around with the row and col classes in various configurations of div and div>div etc. But I always end up with overlapping text or worse, text below the graph which I don’t want.

This is the HTML code as it stands right now:

<div class="container">

      

      <div class="row">

        <div class="card">

       <div class="row">

        <div class="card-body">

          <div class="col-md-4 " id="chart1"></div>

          <div class="col-md-4 ">Add some words talking about the trend.</div>

        </div>     

       </div>

      </div>
//More HTML tags
</div>

And this is what the result of that is:

image
image696×893 68.3 KB

Any help would be much appreciated.

2

Never mind. Figured it out (Sorry, I think posting here spurs me to find solutions; usually I find them while I’m drafting post but sometimes it happens after I’ve posted).

I switched the div classes so that card-body came first and then row. Also, I updated the first col-md-4 to be col-md-8.

Final code:

<div class="container">
      
      <div class="row">
        <div class="card">
       <div class="card-body">
        <div class="row">
          <div class="col-md-8" id="chart1"></div>
          <div class="col-md-4 descGraph">Add some words talking about the trend.</div>
        </div>     
       </div>
      </div>
//More HTML tags...
</div>