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
col classes in various configurations of
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:
Any help would be much appreciated.