Struggling with implementing bootstrap 4.0? I'm attempting to utilize h-100 to ensure that the background stretches to the bottom of the user's screen.
I've experimented with clearfix, fluid-containers, and more in an effort to make it work, but haven't had any success.
The issue arises when a visitor accesses the page on a mobile device, causing the carousel to overflow beyond the container and onto the footer, resulting in an unsightly appearance.
This problem only occurs when I apply h-100. Without it, everything works fine, but I prefer to use h-100 or a similar solution rather than resorting to adding extra content to the page.
<div class="text-white bg-secondary d-flex p-3 h-100">
<div class="container-fluid">
<div class="row">
<div class="align-self-center text-center p-3 col-md-6">
<h1 class="mb-4" style="font-size:325%;">Browse my work</h1>
<p class="mb-4" style="font-size:135%;">I have done work with a non-profit in the past where I developed several of the main pages that are currently being used by the company. It also includes some past projects and mockups. To checkout the work with the nonprofit click the button
below!</p>
<a class="btn btn-outline-light btn-lg" href="https://community-alert.org/aboutUs.html" target="_blank">View my non-proft work! </a>
</div>
<div class="align-self-center col-md-6 p-0">
<div data-ride="carousel" id="myCarousel" class="carousel slide w-100 d-flex">
<!-- Indicators -->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="images/portfolio4.png" atl="first slide" class="d-block w-100"> </div>
<div class="carousel-item">
<img class="d-block w-100" src="images/portfolio5.png" data-holder-rendered="true"> </div>
<div class="carousel-item">
<img class="d-block w-100" src="images/portfolio8.png" data-holder-rendered="true"> </div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>