CODEWITHSUNDEEP
vue.jsbootstrap-4
Hiba RRRR
Hiba RRRR

Reputation: 209

Add Vertical Lines inside Cards

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

enter image description here

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:

enter image description here

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>

Upvotes: 1

Views: 538

Answers (1)

barbaart
barbaart

Reputation: 857

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>

Upvotes: 1

Related Questions