My issue involves two jumbotrons, each with a col-md-6 class, positioned nicely next to each other. Currently, they are contained within a modal, but for the sake of example, I have created a fiddle without the modal to showcase the same behavior. If I apply the mr-1 class to the left jumbotron, it causes them to stack on top of each other, which makes sense. However, I am looking for a way to add some space between the jumbotrons without them touching while still maintaining their 6-column width and stacking on mobile devices. I vaguely remember Bootstrap having a solution for this scenario without causing them to stack?
Below is the code snippet:
<div class="container col-12">
<div class="row">
<div class="jumbotron col-md-6">
Some text.
</div>
<div class="jumbotron col-md-6">
Some more text.
</div>
</div>
</div>