Wallflower Wallflower - 1 month ago 7
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

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/

Comments