Typically, the columns in Bootstrap framework have gutters between them due to padding. However, if you add a background color to the column, the gutters may not be very apparent because the color extends into the gutter area.
An alternative way to visualize this is by setting the background color on an inner element within the column. Here's an example:
.cat {
height: 100px;
}
.cat-inner {
height: 100%;
padding: 10px;
background-color: #666;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<section class="categories">
<div class="container-fluid">
<div class="row mt-1">
<div class="col-12 cat>
<div class="cat-inner>
<h4>Stars and Planets</h4>
</div>
</div>
</div>
<div class="row mt-1">
<div class="col-8 cat>
<div class="cat-inner>
<h4>Space Travel</h4>
</div>
</div>
<div class="col-4 cat>
<div class="cat-inner>
<h4>Worm Holes</h4>
</div>
</div>
</div>
</div>
</section>
This setup can help distinguish each column clearly with a visual break between them.
You can also adjust the gutter width by using some CSS to reduce the space between the columns. The specifics of the changes will depend on your use case, whether it's using Bootstrap with Sass/Less or plain CSS. For a basic CSS solution, consider the following:
[class*="col-"] {
padding-left: 5px;
padding-right: 5px;
}
The above CSS selector targets elements with "col-" in their class attribute, like col-8, col-12, col-md-8, etc., and reduces the gutter size effectively.
NOTE: In certain cases, you might need to use !important, although it's generally discouraged. The example below utilizes it for demonstration purposes:
.cat {
height: 100px;
}
[class*="col-"] {
padding-left: 5px !important;
padding-right: 5px !important;
}
.cat-inner {
height: 100%;
padding: 10px;
background-color: #666;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<section class="categories">
<div class="container-fluid">
<div class="row mt-1">
<div class="col-12 cat>
<div class="cat-inner>
<h4>Stars and Planets</h4>
</div>
</div>
</div>
<div class="row mt-1">
<div class="col-8 cat>
<div class="cat-inner>
<h4>Space Travel</h4>
</div>
</div>
<div class="col-4 cat>
<div class="cat-inner>
<h4>Worm Holes</h4>
</div>
</div>
</div>
</div>
</section>