angular bootstrap div width not showing full only on ipad - html

Question

I have 2 columns in a single Row. Its working fine but on IPAD its not showing full width.
MY CODE
<div class="row">
<div class="col-xl-8 col-lg-8 col-sm-12">
<div class="card mb-4">
<div class="card-header">
<div class="card-title-wrap bar-info">
<div class="card-title">Personal Information</div>
</div>
</div>
<div class="card-body">
<div class="card-block">
<div class="align-self-center halfway-fab text-center">
<a class="profile-image">
<img src="assets/img/portrait/medium/avatar-m-9.jpg"
class="rounded-circle img-border gradient-summer width-100" alt="Card image">
</a>
</div>
<div class="text-center">
<span class="font-medium-2 text-uppercase">{{selectedPatient?.patientName}}</span>
<p class="grey font-small-2"></p>
</div>
<div class="row align-self-center">
<div class="col-12 col-sm-6">
<ul class="no-list-style pl-0 text-center">
<li class="mb-2">
<div class="d-flex align-items-center">
<div class="d-inline-block">
<span class="text-bold-500 primary"><a><i class="ft-briefcase font-small-3"></i>
ID: </a></span>
</div>
<div class="d-inline-block">
<span class="">
<span class="display-block overflow-hidden">
{{selectedPatient?.mrn}}</span>
</span>
</div>
</div>
</li>
<li class="mb-2">
<div class="d-flex align-items-center">
<div class="d-inline-block">
<span class="text-bold-500 primary"><a><i class="ft-briefcase font-small-3"></i>
Case #:</a></span>
</div>
<div class="d-inline-block">
<span class="">
<span class="display-block overflow-hidden"> Ninja Developer</span>
</span>
</div>
</div>
</li>
</ul>
</div>
<div class="col-12 col-sm-6">
<ul class="no-list-style pl-0 text-center">
<li class="mb-2">
<div class="d-flex align-items-center">
<div class="d-inline-block">
<span class="text-bold-500 primary"><a><i class="ft-briefcase font-small-3"></i>
Age:</a></span>
</div>
<div class="d-inline-block">
<span class="">
<span
class="display-block overflow-hidden"> {{selectedPatient?.age}}</span>
</span>
</div>
</div>
</li>
<li class="mb-2">
<div class="d-flex align-items-center">
<div class="d-inline-block">
<span class="text-bold-500 primary"><a><i class="ft-briefcase font-small-3"></i>
Contact Number:</a></span>
</div>
<div class="d-inline-block">
<span class="">
<span
class="display-block overflow-hidden"> {{selectedPatient?.phone}}</span>
</span>
</div>
</div>
</li>
</ul>
</div>
<div class="col-12 col-sm-6">
<ul class="no-list-style pl-0 text-center">
<li class="mb-2">
<div class="d-flex align-items-center">
<div class="d-inline-block">
<span class="text-bold-500 primary"><a><i class="ft-briefcase font-small-3"></i>
Address:</a></span>
</div>
<div class="d-inline-block">
<span class="">
<span
class="display-block overflow-hidden"> {{selectedPatient?.address}}</span>
</span>
</div>
</div>
</li>
</ul>
</div>
<div class="col-12 col-sm-6">
<ul class="no-list-style pl-0 text-center">
<li class="mb-2">
<div class="d-flex align-items-center">
<div class="d-inline-block">
<span class="text-bold-500 primary"><a><i class="ft-briefcase font-small-3"></i>
Email:</a></span>
</div>
<div class="d-inline-block">
<span class="">
<span
class="display-block overflow-hidden"> {{selectedPatient?.email}}</span>
</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-12 col-sm-12">
<!--About div starts-->
<div id="about">
<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-header">
<div class="card-title-wrap bar-info">
<div class="card-title">Shedule Appoinment</div>
</div>
</div>
<div class="card-body">
<div class="card-block">
<div class="mb-3">
<div class="d-flex align-items-center">
<div class="d-inline-block">
<span class="text-bold-500 primary"><a><i class="ft-briefcase font-small-3"></i>
DR Micky:</a></span>
</div>
<div class="d-inline-block">
<span class="">
<span> 7 Feb</span>
</span>
</div>
</div>
<span class="display-block overflow-hidden">Lorem Ipsum is simply dummy text of the
printing and typesetting industry.
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="about">
<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-header">
<div class="card-title-wrap bar-info">
<div class="card-title">Medication</div>
</div>
</div>
<div class="card-body">
<div class="card-block">
<div class="mb-3">
<div class="d-flex align-items-center">
<div class="d-inline-block">
<span class="text-bold-500 primary"><a><i class="ft-briefcase font-small-3"></i>
Lisinoril 1 in tab:</a></span>
</div>
<div class="d-inline-block">
<span class="">
<span> Feb 1, 2020</span>
</span>
</div>
</div>
<div class="d-flex align-items-center">
<div class="d-inline-block">
<span class="text-bold-500 primary"><a><i class="ft-briefcase font-small-3"></i>
Lisinoril 1 in tab:</a></span>
</div>
<div class="d-inline-block">
<span class="">
<span> Feb 1, 2020</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Its showing full width on all devices but on IPAD only its leaving some white space so my text is coming out I need to show full width in this so it can cover whole area in white.
I try to give it like this col-xl-8 col-lg-8 col-sm-12 but its also not working.

Answer 1

Just change second line with below and it will work!
<div class="col-xl-8 col-lg-12 col-sm-12">