Using boostrap grid with angular material mat-list - angular-material

Question

I'm trying to use bootstrap 5 grid with angular material component mat-list but it's not working.
I want the text of the 2 field to use 12 columns on small device.
I have made a test using div and I get the right result but when I try to use boostrap container/row and col-X class with the mat-list it's not working.
Using div
<div *ngIf="dto">
<div class="container" >
<div class="row pb-2" >
<span class="champ col-12 col-md-6">NOM D'USAGER</span>
<span class="donnee col-12 col-md-6">example 1</span>
</div>
<mat-divider></mat-divider>
<div class="row pb-2" >
<span class="champ col-12 col-md-6">COURRIEL</span>
<span class="donnee col-12 col-md-6">example 2</span>
</div>
<mat-divider></mat-divider>
</div>
</div>
With angular material mat-list
<mat-list role="list" class="container" *ngIf="dto">
<mat-list-item role="listitem" class="row pb-2">
<span class="champ col-12 col-md-6">NOM D'USAGER</span>
<span class="donnee col-12 col-md-6">example 1</span>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item role="listitem" class="row pb-2" >
<span class="champ col-12 col-md-6">COURRIEL</span>
<span class="donnee col-12 col-md-6">example 2</span>
</mat-list-item>
<mat-divider></mat-divider>
</mat-list>
Edit:
I added a demo code in stackblitz
stackblitz

Answer 1

When material renders the elements for mat list, an additional div element gets added between mat-list-item and the content, the rendered structure looks like this
<mat-list-item class="mat-list-item" role="listitem" class="row pb-2 w-100">
<div class="mat-list-item-content">
<span class="champ col-12 col-md-6">NOM D'USAGER</span>
<span class="donnee col-12 col-md-6">example 1</span>
</div>
</mat-list-item>
The col elements are not the direct child of the row element, which is why the flex properties do not work
To fix this wrap the spans with a div with a class row
<mat-list role="list" class="container-fluid">
<mat-list-item role="listitem">
<div class="row pb-2 w-100">
<span class="champ col-12 col-md-6">NOM D'USAGER</span>
<span class="donnee col-12 col-md-6">example 1</span>
</div>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item role="listitem">
<div class="row pb-2 w-100">
<span class="champ col-12 col-md-6">COURRIEL</span>
<span class="donnee col-12 col-md-6">example 2</span>
</div>
</mat-list-item>
<mat-divider></mat-divider>
</mat-list>