Wallflower Wallflower - 10 months ago 70
CSS Question

5 cards bootstrap with gap

I want to make a container for button and text using card class with black transparent background and border radius for each card like this
enter image description here
the problem is the one that i made has a gap between each card like this
enter image description here
here's the code jsfiddle



.kontribusi{
background-color: rgba(0, 0, 0, 0.5);
border-radius: 10px;
}

<div class="container-fluid text-center">
<h3>Ayo Mulai Berkontribusi</h3><br>
<div class="row">
<div class="kontribusi col-sm-2 col-sm-offset-1">
<div class="card card-block text-xs-center">
<h4 class="card-title"><a href="#" class="btn btn-danger btn-block">Beri Donasi</a></h4>
<p class="card-text">Untuk masalah kesehatan perorangan & masyarakat</p>
</div>
</div>
<div class="kontribusi col-sm-2">
<div class="card card-block text-xs-center">
<h4 class="card-title"><a href="#" class="btn btn-danger btn-block">Galang Dana</a></h4>
<p class="card-text">Untuk membuat kampanye penggalangan dana</p>
</div>
</div>
<div class="kontribusi col-sm-2">
<div class="card card-block text-xs-center">
<h4 class="card-title"><a href="#" class="btn btn-danger btn-block">Jadi Relawan</a></h4>
<p class="card-text">Untuk bantu terlibat dalam aksi kemanusiaan di bidang kesehatan</p>
</div>
</div>
<div class="kontribusi col-sm-2">
<div class="card card-block text-xs-center">
<h4 class="card-title"><a href="#" class="btn btn-danger btn-block">Butuh Relawan</a></h4>
<p class="card-text">Untuk dilibatkan dalam aksi kemanusiaan di bidang kesehatan</p>
</div>
</div>
<div class="kontribusi col-sm-2">
<div class="card card-block text-xs-center" >
<h4 class="card-title"><a href="#" class="btn btn-danger btn-block">Logistik</a></h4>
<p class="card-text">Untuk disalurkan kepada pihak yang membutuhkan</p>
</div>
</div>
</div>
</div>




Answer Source

You can remove the .kontribusi class from the container div and add it to the inner div instead. Then add some padding to the inner div. Here is jsfiddle:

https://jsfiddle.net/DTcHh/26002/