Bootstrap 5 Gutters - How To Space Between Row Items In Bootstrap Grid - html

Question

Hi i am using bootstrap 5 and using the grid functionality. I have divided my layout into 2 rows.
One row had text and image and other has two images.
It is showing totally fine in PC but with mobile view all the images does not have any spacing between them and it is looking bad.
I tried using gutters but it did not work out i dont know why.
Kindly Help. Here is the code
<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>

Answer 1

You can put margin or padding at the bottom of each of your col divs. Since you’re using col-lg-6, for screen sizes less than lg, the columns will go full width. Adding bottom margin will give you a space. If you don’t want the space on lg screens, then you can use something like mb-3 mb-lg-0 to not have a margin on larger screens.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<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 mb-3 mb-lg-0">
<img src="https://via.placeholder.com/480x360.png" alt="" style="width: 100%; height: auto">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-6 mb-3 mb-lg-0">
<img src="https://via.placeholder.com/480x360.png" alt="" style="width: 100%; height: auto; position: relative">
</div>
<div class="col-lg-6 mb-3 mb-lg-0">
<img src="https://via.placeholder.com/480x360.png" alt="" style="width: 100%; height: auto">
</div>
</div>
</div>

Answer 2

I am not sure what you really want with this question. So you have "2 answers here"
if you need spacing directly around content use padding. If you want to have it "outside" the box, use margin.
Be aware, you using col-lg-6 (lg is only for window >= 992px, so not mobile)
Bootstrap know "col-6", "col-sm-6", "col-md-6", "col-lg-6", "col-xl-6", "col-xxl-6""
If you want same everywhere use "col-6". This is difference are because of "e.g. in desktop you want content in 2 columns - "col-xxl-6", but if you want in smaller screen only one (because you would have content too small) you use class like "col-12 col-lg-6" So in the smaller you will have 1 column, in bigger 2 :) tadaaa
E.g. below - green is padding, orange is margin