I have added padding to a span of text using Bootstrap. However, the issue arises when the text goes to the next line using < br > - the padding for that line and beyond disappears.
Here is the specific code causing this problem:
<div class="col-sm-12 d-sm-flex d-md-inline align-items-sm-center justify-content-sm-center ">
<div class="py-md-20 mx-md-10">
<span class="py-sm-40 px-sm-20 px-md-70">
Before any Service or Repair we will carry out a full check of the bike to ensure the bike is safe and you <br> are getting the service that best suits you and your bike.
</span>
<span>
<button class="b-button__outline text-bg-info"> Book Assessment </button>
</span>
</div>
</div>
To see the issue more clearly, external stylesheets are required. You can visit https://codepen.io/nisofwareengineer/pen/ExxyoVR.
The phrase ''are getting the service that best suits you and your bike.'' appears to be lacking padding.
My goal is to achieve a layout similar to this: https://i.sstatic.net/QB9fX.png
What am I missing in my implementation?