Is there a way to add additional margin space between columns in my Bootstrap grid layout? I attempted to use a custom CSS class like this
.classWithPad {
margin: 10px;
padding: 10px;
}
However, this did not resolve my issue. I also experimented with using ml-1 and mr-1 classes, but it did not produce the desired outcome. Here is the code snippet:
Whenever I try to apply extra margin or padding, the respective column gets pushed to a new row.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d2b0bdbda6a1a6a0b3a292e6fce4fce3">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="row mt-4 justify-content-between">
<div class="col-md-4 card border-radius-15 bg-shadow pt-3">
<h5>General Information</h5>
<hr/>
<div class="row">
<div class="col-md-6 pr-0">
paragraphs...
</div>
<div class="col-md-6 pl-0 text-right">
paragraphs...
</div>
</div>
</div>
<div class="col-md-4 card border-radius-15 bg-shadow pt-3">
<h5>Features</h5>
<hr/>
<div class="row">
<div class="col-md-6 pr-0">
</div>
<div class="col-md-6 pl-0 text-right">
</div>
</div>
</div>
<div class="col-md-4 card border-radius-15 bg-shadow pt-3">
<h5>Game Manufacturers</h5>
<hr/>
<div class="row">
<div class="col-md-6 pr-0">
</div>
<div class="col-md-6 pl-0 text-right">
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="57353838232423253627176379617966">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>