Hello, I am currently utilizing Bootstrap 5 and making use of the grid system. My layout is divided into 2 rows - one containing text and an image, and the other row consisting of two images.
While everything looks fine on a PC, the mobile view displays the images without any spacing between them, which doesn't look good. I've attempted to use gutters, but it didn't seem to work and I'm not sure why.
I would greatly appreciate some assistance. Below is the code snippet:
<div class="container">
<div class="row ">
<div class="col-lg-6">
<ul>
<li>The GATE course of Digcademy has been designed by experts who have vast experience of competitive examinations.</li>
<li>The GATE course is a three-tier approach to make the students more confident about their preparation.</li>
<li>The course is supported by topicwise videos so that there is no scope of doubt about the topic in the minds of students.</li>
<li>It covers theoretical concepts along with lot of topic wise examples. The examples given in the text are strictly from previous year GATE questions so that students can know the types of questions asked in GATE from that particular topic.</li>
<li>The practice questions at the end of each chapter cover all questions from GATE which appeared in EE, EC and IN branches from 1991 to till date for vide coverage of concepts.</li>
<li>The course includes topic wise practice test. These tests would help the students to know their performance after learning the concepts of each chapter.</li>
</ul>
</div>
<div class="col-lg-6">
<img src="images/electrical eng-1.jpg" alt="" style="width: 100%; height: auto">
</div>
</div>
</div>
<div class="container px-4">
<div class="row gy-5">
<div class="col-lg-6">
<img src="images/elect & comm eng-1.jpg" alt="" style="width: 100%; height: auto; position: relative">
</div>
<div class="col-lg-6">
<img src="images/instrumentation eng-1.jpg" alt="" style="width: 100%; height: auto">
</div>
</div>
</div>