I am currently utilizing the Bootstrap sb admin template. I attempted to include 3 columns in a row, but encountered the issue of them being merged together with no space around them. I experimented by modifying the Bootstrap file through a CDN link and progressively removing CSS files, yet none of these solutions proved successful. Below is my HTML structure (Codeigniter view):
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header"> Services </h1>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-12 service-block">
<img src="<?php echo base_url()?>assets/images/service-1.png" class="img-responsive center-block">
<h3 class="text-center">Body Works</h>
</div>
<div class="col-md-3 col-sm-3 col-xs-12 service-block">
<img src="<?php echo base_url()?>assets/images/service-1.png" class="img-responsive center-block">
<h3 class="text-center">Body Works</h>
</div>
<div class="col-md-3 col-sm-3 col-xs-12 service-block">
<img src="<?php echo base_url()?>assets/images/service-1.png" class="img-responsive center-block">
<h3 class="text-center">Body Works</h>
</div>
</div>
<!-- /.row -->
</div>
The following snippet represents the CSS styling for these service blocks:
.service-block{
background: #EDEDED;
height: 220px;
}
.service-block img{
margin-top: 15%;
margin-bottom: 9px;
}
By referring to the output image linked below, you can observe how the services appear without the desired spacing:
If anyone has insights or suggestions on how to resolve this layout issue, your assistance would be greatly appreciated.