Currently, in my Angular 9 application, I have a component that utilizes Bootstrap cards. My objective is to create the following layout within this component:
For the desktop view, the layout should resemble the image below:
https://i.sstatic.net/3MGKm.png
While for the mobile view, the layout should look like this:
https://i.sstatic.net/UGBAt.png
However, the code I've implemented did not render the expected layout depicted above. Here is a snippet of the code:
<div class="animated fadeIn"
style="margin-left: 2%;margin-right: 2%;margin-top: 2%;width: 80%;"
id="qgroup-div-g1">
<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;">
Sample Header
<button type="button"
class="btn btn-success mr-1"
style="position:absolute;right: 10px;top:5px;"
(click)="isCollapsed = !isCollapsed"
[attr.aria-expanded]="!isCollapsed">
<i class="mdi mdi-chevron-down"></i>
</button>
</h5>
</div>
</div>
</div>
<div [ngbCollapse]="isCollapsed" id="qgroup-collapse-wrapper-g1">
<div class="card-body">
<ul>
<li>
<div class="row justify-content-md-center" id="row1" style="display: flex;">
<div class="col-8">
TEXT1
</div>
<div id="d_1" class="col-xs-auto">
<AngularComponent id="comp1"
value='10'
max="5"
color="blue"
size="40px"
(progress)="onProgress($event,'comp1', 1, 1 )">
</AngularComponent>
</div>
</div>
</li>
<li>
<div class="row justify-content-md-center" id="row2" style="display: flex;">
<div class="col-8">
TEXT2
</div>
<div id="d_2" class="col-xs-auto">
<AngularComponent id="comp1"
value='10'
max="5"
color="blue"
size="40px"
(progress)="onProgress($event,'comp1', 1, 1 )">
</AngularComponent>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--/.col-->
</div>
</div>
Could someone please advise on how to achieve the desired layout mentioned above?