Adding spacing between cards in bootstrap

Question

I have 4 cards that i need to add some spacing between all of them because it looks like they are one into another. I've tried with adding margin-left but it doesn't really work also I've tried to add the class ml-2 but if i do that it will place one card into another row which i also don't want that:(

Code:

<div class="container">
        <h2>Test:</h2>
        <div class="row">
            <div class="col-sm-3">
                <div class="card ml-2" style="width: 20rem;">
                    <img class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS0lnPcJXGCIDU-L8lq6wdfh9vFzaLupc405LLlxlcKqx4zYnnQ" alt="Card image cap">
                    <div class="card-body text-center">
                        <p class="card-text text-center" style="color:black">Dacia Logan</p>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <div class="row">
                                    <div class="col-md-6">
                                            <i class="material-icons"></i><span>15800</span>
                                    </div>
                                    <div class="col-md-6">
                                            <i class="material-icons"></i><span>Bucuresti</span>
                                    </div>
                                </div>

                            </li>
                        </ul>
                        <button href="#" class="btn btn-danger">Save</button>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card ml-2" style="width: 20rem;">
                    <img class="card-img-top" src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg?auto=compress&amp;cs=tinysrgb&amp;h=350" alt="Card image cap">
                    <div class="card-body text-center">
                        <p class="card-text text-center" style="color:black">Dacia Logan</p>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <div class="row">
                                    <div class="col-sm-6">
                                            <i class="material-icons"></i><span>5800</span>
                                    </div>
                                    <div class="col-sm-6">
                                            <i class="material-icons"></i><span>Bucuresti</span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <button href="#" class="btn btn-danger">Save</button>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card ml-2" style="width: 20rem;">
                    <img class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS0lnPcJXGCIDU-L8lq6wdfh9vFzaLupc405LLlxlcKqx4zYnnQ" alt="Card image cap">
                    <div class="card-body text-center">
                        <p class="card-text text-center" style="color:black">Dacia Logan</p>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <div class="row">
                                    <div class="col-sm-6">
                                            <i class="material-icons"></i><span>5800</span>
                                    </div>
                                    <div class="col-sm-6">
                                            <i class="material-icons"></i><span>Bucuresti</span>
                                    </div>
                                </div>

                            </li>
                        </ul>
                        <button href="#" class="btn btn-danger">Save</button>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card" style="width: 20rem;">
                    <img class="card-img-top" src="https://www.carmag.co.za/wp-content/uploads/2016/11/Golf10.jpg" alt="Card image cap">
                    <div class="card-body text-center">
                        <p class="card-text text-center" style="color:black">Dacia Logan</p>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <div class="row">
                                    <div class="col-sm-6">
                                            <i class="material-icons"></i><span>5800</span>
                                    </div>
                                    <div class="col-sm-6">
                                            <i class="material-icons"></i><span>Bucuresti</span>
                                    </div>
                                </div>

                            </li>
                        </ul>
                        <button href="#" class="btn btn-danger">Save</button>
                    </div>
                </div>
            </div>
        </div>

Thanks!

Answer 1

Try to put padding on the card class:

padding: 10px;

Answer 2

You could use one of the Bootstrap spacing utilities.

https://getbootstrap.com/docs/4.1/utilities/spacing/

For example, place this div between two cards:

<div class="mt-3" />