0

I am created this using the official bootstrap tutorial ->

Screenshot

using the below code ->

<div class="card-deck mb-3 text-center">
<div class="card mb-4 shadow-sm">
  <div class="card-header">
    <h4 class="my-0 font-weight-normal">Free</h4>
  </div>
  <div class="card-body">
    <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
    <ul class="list-unstyled mt-3 mb-4">
      <li>10 users included</li>
      <li>2 GB of storage</li>
    </ul>
  </div>
</div>
<div class="card mb-4 shadow-sm">
  <div class="card-header">
    <h4 class="my-0 font-weight-normal">Pro</h4>
  </div>
  <div class="card-body">
    <h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
    <ul class="list-unstyled mt-3 mb-4">
      <li>20 users included</li>
      <li>10 GB of storage</li>
    </ul>
    </div>
</div>
<div class="card mb-4 shadow-sm">
  <div class="card-header">
    <h4 class="my-0 font-weight-normal">Enterprise</h4>
  </div>
  <div class="card-body">
    <h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
    <ul class="list-unstyled mt-3 mb-4">
      <li>30 users included</li>
      <li>15 GB of storage</li>
      <li>Phone and email support</li>
      <li>Help center access</li>
    </ul>
    <button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button>
  </div>

Now I want to Decrease the Spacing between these columns. What could be done for this?

Hritika Agarwal
  • 25
  • 5

2 Answers2

1

If you look into bootstrap's CSS file you will find this styles

@media (min-width: 576px) {
  .card-deck {
     -ms-flex-flow: row wrap;
     flex-flow: row wrap;
     margin-right: -15px;
     margin-left: -15px;
  }
  .card-deck .card {
     display: -ms-flexbox;
     display: flex;
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-right: 15px;
    margin-bottom: 0;
    margin-left: 15px;
  }
}

Which means your cards have 15px margin in between them.

So you need to override it with your value in your CSS file

Like

@media (min-width: 576px) {

    .card-deck {
         margin-right: -10px;
         margin-left: -10px;
     }
     .card-deck .card {
         margin-right: 10px;
         margin-left: 10px;  
     }
  }

Example fiddle https://jsfiddle.net/1g46tLc9/

Kiran Shinde
  • 5,732
  • 4
  • 24
  • 41
0

you need to add m, p, mr, mb, etc classes to your divs.

check out this post which explains all these post

note: this is how you can do it using bootstrap. If you want to add some specific values better set the margins of these bootstrap classes to 0 and then add your custom margin values to the cards/divs

Tanish Surana
  • 117
  • 7