Make the space between the columns small inside the card - vue.js

Question

I have this shape and want to approximate the distance between each column, meaning I want to approximate the distance between each blue piece, how can I do that_?
Card.vue:
<template>
<div>
<div class="card d-inline-flex" style="width: 40rem; height:7rem; ">
<div class="row background">
<div class="col">
<div class="p-5 bg-info rounded-left ">Flex item 1</div>
</div>
<div class="col">
<div class="p-5 bg-info rounded-0 ">Flex item 1</div>
</div>
<div class="col">
<div class="p-5 bg-info rounded-right">Flex item 1</div>
</div>
</div>
</div>
</div>
</template>
<script></script>
<style>
.background {
background-color: #dcdcdc;
}
.d {
margin-left: 4px;
}
</style>

Answer 1

The space is there because bootstrap has a padding-left and padding-right of 15px for the class col pre-defined. So to get the space that you want, just add a custom class to your div and mess around with padding-left and padding-right. But don't forget to use "!important" as you want to override the style defined by Bootstrap. Here is an Example :-
<template>
<div>
<div class="card d-inline-flex" style="width: 40rem; height:7rem; ">
<div class="row background">
<div class="col a">
<div class="p-5 bg-info rounded-left ">Flex item 1</div>
</div>
<div class="col a">
<div class="p-5 bg-info rounded-0 ">Flex item 1</div>
</div>
<div class="col a">
<div class="p-5 bg-info rounded-right">Flex item 1</div>
</div>
</div>
</div>
</div>
</template>
<script></script>
<style>
.background {
background-color: #dcdcdc;
}
.d {
margin-left: 4px;
}
.a {
padding-left:0 !important!;
padding-right:0 !important!;
}
</style>
Here i used a custom class called a, just mess around with padding-left to get the space you need.