My goal was to design a Bootstrap card with an embedded 'slideshow'. The idea was to use the second page to provide more information about the content on the first page. While editing this on the web, I managed to create a satisfactory product (). However, when I checked it on my phone, it appeared completely broken.
I have shared the main part of the code below, excluding the library links and some default information. I would appreciate any help or suggestions on how to fix this issue.
<div class="row justify-content-center">
<div class="col-sm-3">
<div class="card text-white bg-dark mb-3" style="width: 18rem; height:24rem">
<div class="card-header text-muted">
App name
</div>
<div id="demo" class="carousel slide" data-ride="carousel">
<div class="card-body">
<!---------------------CARD BODY--------------------->
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner" style="height:15.2rem">
<div class="carousel-item active">
<img class="card-img-top" src="sample.jpg"
alt="Card image cap"
id="sample">
<h5 class="card-title">Title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Hi quick example text to build on the card title and make up
the bulk of the card's content.</p>
</div>
<div class="carousel-item">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text trewrwrwerwerwero build on the card
title and make up
the bulk of the card's content.</p>
</div>
</div>
<!---------------------CARD BODY END--------------------->
</div>
</div>
<div class="card-footer btn btn-primary">
Show me!
</div>
</div>
</div>
</div>