Add Vertical Lines inside Cards - vue.js

Question

I want to make such a card with a bootstrap meaning I want to divide it into three parts regardless of what the card contains of data and icons
But I was not able to divide it into three parts, how can I do that?
And I was able to display the card in this way:
How can i solve this problem?
Card.vue:
<template>
<div>
<div class="card bg-light mb-3 mr-50" style="max-width: 25rem; height: 10rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make</p>
</div>
</div>
</div>
</template>
<script>
</script>
<style>
</style>

Answer 1

Is this what your looking for ? You can use bootstrap grid for this, Checkout the docs
.row{
background-color: #efefef;
}
.col{
background-color: white;
margin: 5px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="card">
<div class="container-fluid">
<div class="row">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
</div>