Solved: Responsive Flex Cards

Hello Experts,

This is about Flex Cards in bootstraps.

#1. I am trying to increase the size of the boxes. But when I increase it, the last one moves to the bottom, though I have lots of room in the screen. Please see the attachment.

#2. The response screen does not work as expected. The card width shrinks too small before it moves to next line.

Please try to help. Thank you very much in advance.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FlexCards.aspx.cs" Inherits="Bootstraps.FlexCards" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/bootstrap.css" rel="stylesheet" />
    <script src="js/bootstrap.js"></script>
</head>
<body>
    <div class="row row-cols-1 row-cols-md-3 g-4">
        <div class="container">
            <div class="row g-5">
                <div class="col-12 col-md-6 col-lg-4">
                    <div class="card h-100">
                        <%--<img src="..." class="card-img-top" alt="...">--%>
                        <img src="./images/europe.jpg" class="card-img-top" alt="A Street in Europe" />
                        <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                        </div>
                        <div class="card-footer">
                            <small class="text-muted">Last updated 3 mins ago</small>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-lg-4">
                    <div class="card h-100">
                        <%--<img src="..." class="card-img-top" alt="...">--%>
                        <img src="./images/london.jpg" class="card-img-top" alt="London" />
                        <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                        </div>
                        <div class="card-footer">
                            <small class="text-muted">Last updated 3 mins ago</small>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-lg-4">
                    <div class="card h-100">
                        <%--<img src="..." class="card-img-top" alt="...">--%>
                        <img src="./images/new-york.jpg" class="card-img-top" alt="New York" />
                        <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
                        </div>
                        <div class="card-footer">
                            <small class="text-muted">Last updated 3 mins ago</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Open in new window

FlexBox.png