Currently, I am in the process of developing a web application using asp.net. The layout of the site is being designed with Bootstrap version 4. However, I am facing an issue where the image overlaps the "Welcome to the site" title on the left-hand side when the screen is resized. Eventually, the columns stack properly, but there seems to be a problem during the transition.
<div class="container-fluid">
<div class="row portal-intro">
<div class="col-md-4">
<p class="home-header">Welcome to the site</p>
<p>
You can create various applications, reports, and requests through our online forms.
For instance, applying for resident permits, reporting issues, or requesting a call back.
</p>
</div>
<div class="col-md-8">
<img class="img-fluid" src="~/Content/Images/city.png" />
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<h2>Getting started</h2>
<p>
ASP.NET MVC provides a robust, patterns-based approach for building dynamic websites,
offering clean separation of concerns and complete markup control for enjoyable development experiences.
</p>
<p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301865">Learn more »</a></p>
</div>>
<!-- More col-md-4 divs here -->
</div>
</div>
I tried using img-fluid to address the issue, but it persists even after that. The overlapping occurs only during the resizing process, indicating a possible problem with the left column rather than the image itself.
No additional CSS has been added, relying solely on the img-fluid class for styling.