Bootstrap Gridsystem col is not Working Properly

Here is my code:

I've tried change container class to container-fluid also resize the page.

<div class="container">
    <div class="row">
        <!--Product: banana split-->
        <div class="col">
            <div class="card" style="width: 20rem;">
                <img class="card-img-top" src="img/banana-split.png" alt="Banana Split Image">
                <div class="card-block">
                    <h4 class="card-title">Banana Split</h4>
                    <p class="card-text">Price: 5$</p>
                    <a href="#" data-name="banana-split" data-price="5" class="add-to-cart btn btn-primary"><i class="fas fa-shopping-cart"></i> Add to Cart</a>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card" style="width: 20rem;">
                <img class="card-img-top" src="img/bengala-doce.png" alt="Bengala Doce Image">
                <div class="card-block">
                    <h4 class="card-title">Doce Natalino</h4>
                    <p class="card-text">Price: 2$</p>
                    <a href="#" data-name="doce-natalino" data price="3" class="add-to-cart btn btn-primary"> <i class="fas fa-shopping-cart"></i> Add to Cart</a>
                </div>
            </div>
        </div>
    </div>
</div>

The problem is the second col is not being placed side by side. It's being placed below each other. I looked up on the console and there's not any warning.

Others stuff like bootstrap buttons is working fine.

You forgot to set your column classes depending on screen sizes you are viewing. This way, making 2 columns on mediums screen sizes, and on column in small screens using col-md-6 col-sm-12

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <div class="container">
        <div class="row">
            <!--Product: banana split-->
            <div class="col-md-6 col-sm-12">
                <div class="card" style="width: 20rem;">
                    <img class="card-img-top" src="img/banana-split.png" alt="Banana Split Image">
                    <div class="card-block">
                        <h4 class="card-title">Banana Split</h4>
                        <p class="card-text">Price: 5$</p>
                        <a href="#" data-name="banana-split" data-price="5" class="add-to-cart btn btn-primary"><i class="fas fa-shopping-cart"></i> Add to Cart</a>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-sm-12">
                <div class="card" style="width: 20rem;">
                    <img class="card-img-top" src="img/bengala-doce.png" alt="Bengala Doce Image">
                    <div class="card-block">
                        <h4 class="card-title">Doce Natalino</h4>
                        <p class="card-text">Price: 2$</p>
                        <a href="#" data-name="doce-natalino" data price="3" class="add-to-cart btn btn-primary"> <i class="fas fa-shopping-cart"></i> Add to Cart</a>
                    </div>
                </div>
            </div>
        </div>
    </div>