css - Bootstrap 4 how to have margin between columns without going over space

Question

I'm trying to create 3 columns of content with a bit of margin between each so that with shadow they look distinct.

However when I add some margin with mr-3 to the left and middle columns this makes the columns go beyond the width of the space and wrap.

How can I create space between the cards/columns without making them go over the available space?

https://codepen.io/anon/pen/KeYgvg

Answer 1

If you set margins on the columns it will "break" the Bootstrap grid. The spacing between the columns (gutter) is created with padding. Therefore, you should add another container/box inside the columns for the shadow, and then adjust the column padding as desired:

    <div class="row">
            <div class="col-md-4 col-sm-6 text-center feature-item rounded py-3">
                <div class="shadow">
                    <div class="feature-icon pb-3">
                        <i class="fa fa-piggy-bank"></i>
                    </div>
                    <div class="">
                        <h4 class="">Some title.</h4>
                        <p>some testxt asdfasdfoa aasdf kjkha asdfasfd khasdf khjkhjkh asdffd khkjasdf kjhkh asd kjhkhasd khkh adsfhkh asdfasfd.</p>
                    </div>
                    <!--//content-->
                </div>
            </div>
            <!--//item-->

            <div class="col-md-4 col-sm-6 text-center feature-item rounded py-3">
                <div class="shadow">
                    <div class="feature-icon pb-3">
                        <i class="fa fa-piggy-bank"></i>
                    </div>
                    <div class="">
                        <h4 class="">Another title.</h4>
                        <p>some testxt asdfasdfoa aasdf kjkha asdfasfd khasdf khjkhjkh asdffd khkjasdf kjhkh asd kjhkhasd khkh adsfhkh asdfasfd.</p>
                    </div>
                    <!--//content-->
                </div>
            </div>
            <!--//item-->

            <div class="col-md-4 col-sm-6 text-center feature-item rounded py-3">
                <div class="shadow">
                    <div class="feature-icon pb-3">
                        <i class="fa fa-piggy-bank"></i>
                    </div>
                    <div class="">
                        <h4 class="">One more title.</h4>
                        <p>some testxt asdfasdfoa aasdf kjkha asdfasfd khasdf khjkhjkh asdffd khkjasdf kjhkh asd kjhkhasd khkh adsfhkh asdfasfd.</p>
                    </div>
                    <!--//content-->
                </div>
            </div>
            <!--//item-->
    </div>

https://www.codeply.com/go/aQBL68BvFU