Add a margin between bootstrap columns without wrapping

For Example, How do I add a margin between bootstrap columns without wrapping?

Demo

Col-4

HTML

        <div class="row rowCols">
                <div class="col-sm-4">
                        <div class="box"> Col-4 </div>
                </div>
                <div class="col-sm-4">
                        <div class="box"> Col-4 </div>
                </div>
                <div class="col-sm-4">
                        <div class="box"> Col-4 </div>
                </div>
        </div>

CSS

<style>
        .rowCols { 
                background-color: #037cd5; 
        }
        .box { 
                background-color: #fdd921; padding: 10px; margin:0 30px 
        }
</style>