I am facing an issue with my Bootstrap 4 buttons. I have set them up to be 4 columns each within a grid, expecting them to all remain on the same row. However, the third button is dropping down to the next line and I can't seem to figure out why.
Here's a link to the codepen I created: https://codepen.io/xanabobana/pen/pobRxpx
HTML:
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-4 button button-header button-tools-collections"><a href="<?php echo site_url('products/tools/'); ?>"><h3>Tools</h3> <span class="badge"><span class="fa fa-wrench fa-2x"></span></span></a></div>
<div class="col-12 col-md-4 button button-header button-tools-collections"><a href="<?php echo site_url('products/collections/'); ?>"><h3>Collections</h3> <span class="badge"><span class="fa fa-folder-open fa-2x"></span></span></a></div>
<div class="col-12 col-md-4 button button-header button-tools-collections"><a href="<?php echo site_url('cooperative/regional_projects/'); ?>"><h3>Regional Projects</h3> <span class="badge"><span class="fa fa-globe fa-2x"></span></span></a></div>
</div></div>
CSS:
.button-header {
border: 3px solid #b8d87a;
display: inline-block;
font-size: .8em;
margin: 2em 1em 2em 0;
}
.button-header a {
color: #fff;
padding: .5em 1em;
display: block;
}
.button-header a:hover {
text-decoration: none;
background-color: rgba(255, 255, 255, 0.3);
}
.button-header .arrow {
font-family: arial;
}
.button-tools-collections a {
color: black;
text-align: center;
}