CODEWITHSUNDEEP
vue.jsbootstrap-4
Hiba RRRR
Hiba RRRR

Reputation: 209

Make the space between the columns small inside the card

enter image description here

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>

Upvotes: 0

Views: 836

Answers (1)

Mohmd labeeb
Mohmd labeeb

Reputation: 166

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.

Upvotes: 1

Related Questions