Text is too close to the edge of col or box

Issue

Does any of you know how to add padding to the text? Here is the image.

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


<!-- Body --> 
<div class="row no-gutters">
  <div class="col-md-6 d-flex align-items-center flex-column justify-content-center bg-dark">
    <h2 class="mb-0 text-white">Za sve vremenske prilike</h2>
    <br>
    <p class="mb-0 text-white">Grijanje i Hlađenje</p>
    <p class="mb-0 text-white">Zgrada je opremljena najsavremenijom tehnologijom.</p>
  </div>
  <div class="col-md-6 order-first order-md-last">
    <img src="https://via.placeholder.com/200.jpg" class="w-100 h-100">
  </div>
</div>

Solution

This is easily fixable with the padding property being applied to the div that contains the text elements, but one side effect that you may not like is that the box can get bigger in order to apply the space around the inner text elements this too can be easily fixed by telling your css file that: box-sizing: border-box I'm assuming that you're using tailwind and in tailwind those properties are set like the following: p-[2,4,...] box-border

in short:

<div class="col-md-6 d-flex align-items-center flex-column justify-content-center bg-dark box-border p-4">
<h2 class="mb-0 text-white">Za sve vremenske prilike</h2>
<br>
<p class="mb-0 text-white">Grijanje i Hlađenje</p>
<p class="mb-0 text-white">Zgrada je opremljena najsavremenijom tehnologijom.</p>

Answered By - uncleilia