asp.net Bootstrap - responsive cards nested in a container-card

Question

I have this markup

<div class="container-fluid p-4" style="margin-right: 0px; margin-left: 0px; margin-top: -30px;" id="divUtility" runat="server">
<div class="card bg-secondary">
<div class="card-header text-white ">
</div>
<div class="row card-body">
   <div id="divCantieri" runat="server" class="col-sm-4 bg-secondary">
   ...
   </div>
   <div id="divImporta" runat="server" class="col-sm-4 bg-secondary">
   ...
   </div>
   <div id="divBatch" runat="server" class="col-sm-4 bg-secondary">
   ...
   </div>
   <div id="divCausali" runat="server" class="col-sm-4 bg-secondary">
   ...
   </div>
</div>
</div>
</div>

The problem I'm facing is that the nested cards inside the big one are not responsive, so when I use the site on desktop I see them on the same row one after each other, if I use the smartphone I see them still inline but shrinked. When on smartphone I want them to display as they are a single column. How can I achieve this? Thanks

example drawing

actual graphic

EDIT: With this markup I'm almost where I want, last thing to figure out is how to set all the inner cards always adapting to the available horizontal space in both cases: basically when they are on a single row they should have width=33% each, but when on a single column width=100%.

<div id="divUtility" class="container-fluid p-4" style="margin-right: 0px; margin-left: 0px; margin-top: -30px;">
            <div class="card bg-secondary">
                <div class="card-header text-white ">
                ...
                </div>
                <div class="card-body" style="display:flex; flex-direction:row; flex-wrap:wrap;">
                        <div id="divCantieri" class="card mr-3 mt-2 mb-2" style="min-width:30em;">
                            <div class="card-header bg-light">
                             ...
                            </div>
                            <div class="card-body scroll" style="max-height: 10em;">
                            ...
                            </div>
                        </div>
                        <div id="divImporta" class="card mr-3 mt-2 mb-2" style="min-width:30em;">
                            <div class="card-header bg-light">
                             ...
                            </div>
                            <div class="card-body scroll" style="max-height: 10em;">
                             ...
                            </div>
                        </div>
                        <div id="divBatch" class="card mr-3 mt-2 mb-2" style="min-width:30em;">
                            <div class="card-header bg-light">
                             ...
                            </div>
                            <div class="card-body scroll" style="max-height: 10em;">
                             ...
                            </div>

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

Bootstrap is based on 12 columns per row. Your columns are adding up to 16. — pcalkins, Sep 11 '19 at 18:10
@pcalkins that just means each div will take up 4 columns, it's okay to go above 12 if they wrap. — Jay, Sep 11 '19 at 18:25

score 0 · Answer 1 · answered Sep 11 '19 at 18:13

0

Personally I would use flexbox to achieve what you're after.

Set display:flex; on the div that contains the divs that you want to display as a column instead of a row. Then set their direction with flex-direction:row; and whether or not they'll wrap with flex-wrap:wrap;

<div class="row card-body" style="display:flex; flex-direction:row; flex-wrap:wrap;">
    <div id="divCantieri" runat="server" class="col-sm-4 bg-secondary">
        ...
    </div>
    <div id="divImporta" runat="server" class="col-sm-4 bg-secondary">
        ...
    </div>
    <div id="divBatch" runat="server" class="col-sm-4 bg-secondary">
        ...
    </div>
    <div id="divCausali" runat="server" class="col-sm-4 bg-secondary">
        ...
    </div>
</div>

Here's a nice reference that helped me understand flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

answered Sep 11 '19 at 18:13

Jay

258
2
6
16

nothing changes, the inner cards still squeeze on a smaller resolution – Gabriele Cozzolino Sep 12 '19 at 06:11
After some try I'm almost there, if I change the inner div class to "card mr-3 mt-2 mb-2" they are displayed in a row when on desktop and in column when on small screen. The only thing left is that they don't adapt to the horizontal space available – Gabriele Cozzolino Sep 12 '19 at 06:22
Not sure exactly what you mean by adapt, but there are 3 settings that come to mind: `space-around`, `space-between` and `space-evenly` that might get you what you're after. There's also `flex-shrink` and `flex-grow` that control how wide they'll get. – Jay Sep 13 '19 at 13:22

Ahmad Karimi · Answer 2 · 2019-09-12T06:54:58.633

0

You are actually telling the browser to set three columns for every view-port. You have to set the col-sm to 12 to make the divs occupy the entire row each.

<div class="row card-body">
   <div id="divCantieri" runat="server" class="col-sm-12 col-md-4 bg-secondary">
       ...
   </div>
   <div id="divImporta" runat="server" class="col-sm-12 col-md-4 bg-secondary">
       ...
   </div>
   <div id="divBatch" runat="server" class="col-sm-12 col-md-4 bg-secondary">
       ...
   </div>
   <div id="divCausali" runat="server" class="col-sm-12 col-md-4 bg-secondary">
       ...
   </div>
</div>

edited Sep 12 '19 at 06:54

answered Sep 12 '19 at 06:42

Ahmad Karimi

1,285
2
15
26

But if I set class=col-sm-12 then all the cards are displayed on different rows even on desktop version. I want them to be on a single column when on desktop and on different rows when on smaller screens – Gabriele Cozzolino Sep 12 '19 at 06:52
@GabrieleCozzolino, Have a look at your code I have changed some at this link. https://codepen.io/ahmadkarimi2009/pen/eYOrBqW, I think it works fine. – Ahmad Karimi Sep 12 '19 at 07:03
I don't know why but using your solution break the graphic: https://i.stack.imgur.com/BYWKE.png – Gabriele Cozzolino Sep 12 '19 at 07:20
Can you upload your code in codepen or somewhere so that I can have a look? – Ahmad Karimi Sep 12 '19 at 07:45

score 0 · Accepted Answer · answered Sep 16 '19 at 06:20

I ended up with this and it's working well, as wanted

<div class="card-body">
                    <div class="row">
                        <div id="divCantieri" runat="server" class="col-xl-4 mb-3">
                            <div class="card">
                                <div class="card-header bg-light">
                                </div>
                                <div class="card-body scroll" style="max-height: 10em;">
                                </div>
                            </div>
                        </div>
                        <div id="divImporta" runat="server" class="col-xl-4 mb-3">
                        <div class="card">
                                <div class="card-header bg-light">
                                </div>
                                <div class="card-body" style="max-height: 10em;">
                                </div>
                            </div>
                        </div>
                        <div id="divBatch" runat="server" class="col-xl-4 mb-3">
                            <div class="card">
                                <div class="card-header bg-light">
                                </div>
                                <div class="card-body scroll" style="max-height: 10em;">
                                </div>
                                <div class="card-footer">
                                </div>
                            </div>
                        </div>
                        <div id="divCausali" visible="false" runat="server" class="col-xl-4 mb-3">
                            <div class="card">
                                <div class="card-header bg-light">
                                </div>
                                <div class="card-body scroll" style="max-height: 10em;">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

asp.net Bootstrap - responsive cards nested in a container-card

3 Answers3