I am looking to customize the background color of a single column within a bootstrap row, along with applying padding to the row. Please refer to the screenshot provided below for clarification.
https://i.sstatic.net/S9Lfx.png
<div class="container event-details-wrapper">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<h3 class="event-tag tooltip" tooltip="Click here to copy the event code" @click.stop="copyEvent($event)">#{{event.code}}</h3>
<UserWidget :repeatEvent="true" :email="event.name" :title="event.duration" :action="goToEvent"/>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12" style="display:flex;">
<div class="QnA-Details"></div>
<div class="Sub-QnA-Details">
<p>Q&A</p>
<span>3000</span>
</div>
<div class="Form-Details"></div>
<div class="Sub-Form-Details">
<p>Forms</p>
<span>06</span>
</div>
<div class="Polls-Details"></div>
<div class="Sub-Polls-Details">
<p>Polls</p>
<span>02</span>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="event-actions-wrapper" v-if="!isExpired">
<ul>
<li><div class="event-action download tooltip" tooltip="Project event" @click.stop="download"></div></li>
<li><div class="event-action project tooltip" tooltip="Project event" @click.stop="project"></div></li>
<li><div class="event-action phone tooltip" tooltip="Project event" @click.stop="phone"></div></li>
</ul>
</div>
</div>
</div>
</div>
My current code setup is shown above. However, I am encountering an issue where the padding area of the specific column is not changing along with the background color.
https://i.sstatic.net/Z7gBW.png
What would be the best approach to fulfill this requirement within the given scenario? I opted for utilizing bootstrap to ensure responsiveness across various devices including mobile.