How to float the bootstrap card in a single column grid

Question

How can I float the bootstrap card in a single column? I'm trying to make a blog layout with 2 columns. The first column from the left is used to display the blog post and column on the right is used for search, profile, etc... I wanted to float cards inside the left column as 2 cars in a row, but when I tried it comes like a stacked layout with one on bottom of another.

here is the HTML code.

<div class="recent">
        <div class="row">
            <div class="col-md-10">
                <h1>Recent Posts</h1>
                <div class="card" style="width: 25rem;">
                    <img src="{{ url_for('static', filename = 'uploads/blog/' + first['cover_img'])}}" class="card-img-top" alt="..." height="30%">
                    <div class="card-body">
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                </div>
                <div class="card" style="width: 25rem;">
                    <img src="{{ url_for('static', filename = 'uploads/blog/' + first['cover_img'])}}" class="card-img-top" alt="..." height="30%">
                    <div class="card-body">
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-2">

            </div>
        </div>
    </div>

I tried ml-auto and float-left but that doesn't work

Answer 1

G'day Mate ! Try This ;

<div class="recent">
    <div class="row">
        <div class="col-md-10">
            <h1>Recent Posts</h1>
            <div class="card" style="width: 25rem; float:left; margin:20px;">
                <img src="{{ url_for('static', filename = 'uploads/blog/' + first['cover_img'])}}" class="card-img-top" alt="..." height="30%">
                <div class="card-body">
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </div>
            </div>
            <div class="card" style="width: 25rem; float:left;  margin:20px;">
                <img src="{{ url_for('static', filename = 'uploads/blog/' + first['cover_img'])}}" class="card-img-top" alt="..." height="30%">
                <div class="card-body">
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </div>
            </div>
        </div>
        <div class="col-md-2">

        </div>
    </div>
</div>