Avatar of RadhaKrishnaKiJaya
RadhaKrishnaKiJaya asked on

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

BootstrapHTMLCSS

Avatar of undefined
Last Comment
Scott Fell

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Scott Fell

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck