I am working on an angular 9 application that includes a bootstrap card in the body of the card
<div class="animated fadeIn"
style="margin-left: 2%;margin-right: 2%;margin-top: 2%;width: 80%;"
id="qgroup-div-g{{ei}}"
*ngFor="let g of this.stat?.MyQuestionGroup;let ei=index;">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<div class="row" style="position: relative;">
<div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
<h5 style="text-align: left;">
{{g?.QuestionGroupName}}
<button type="button"
class="btn btn-success mr-1"
style="position:absolute;right: 10px;top:5px;"
(click)="isCollapsed = !isCollapsed"
[attr.aria-expanded]="!isCollapsed"
attr.aria-controls="qgroup-collapse-wrapper-g{{ei}}">
<i class="fa fa-align-justify"></i>
</button>
</h5>
</div>
</div>
</div>
...
The goal is to create a layout within the bootstrap card structure similar to the image linked here: https://i.sstatic.net/t3zyG.png
Highlighted columns indicating desired formatting:
- COLUMN #1 (ROW NUMBER COLUMN)
- COLUMN #2 ( TEXT COLUMN )
- COLUMN #3 (PROGRESS BAR DISPLAY COMPONENT )
Here is the relevant portion of the card body markup for reference:
...However, I am facing challenges making the layout responsive and keeping the three-column structure centered. The responsiveness needs to match the layout shown in the image.
Update:
- How can I make the following div expand to fit within the card body?
- How do I make "COLUMN #3 ( PROGRESS BAR DISPLAY COMPONENT )" span the remaining width of the column?
<div class="row justify-content-md-center" *ngFor="let q of g?.MyQuestions;let rnum=index" id="qrow_{{rnum}}_g{{ei}}" style="border: 0px solid red;display: flex;">Additionally, the div with
<div class="row justify-content-md-center"