Bootstrap - Draw two cards per row in mobile size

user_12090017 0
Viewed 909

I need draw a list of rows with two cards per row in mobile version. Every card must have 3 rows (25, 50 and 25 percent) First of these rows must have 2 cells (75 / 25 percent).

One mobile screen, must fit 3 rows.

I've tried do this but I am not able to do it. https://www.codeply.com/p/cL9RcBUMtL

Thank you very much

bootstrap-4
2 Answers

Instead of Using Card-deck, just simply use row (only) and change the "min-height" to "height: 100vh"

Then Coming to 2 Cards In a Row, Try Using "col-6" for mobile screen.

By doing this you could able to achieve the "3 row in mobile screen with each 2 cards" and for other responsive use col-sm-4 for middle screen and col-md-3 for rest of the view.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
<div class="row" style="height: 100vh">
    <div class="card col-6 col-sm-4 col-md-3 my-3">
        <div class="row h-25">
            <table class="h-100 w-100">
                <tbody>
                    <tr>
                        <td class="w-100 col-6 text-center font-weight-bold align-middle">
                            <h4 class="card-title text-center" style="font-size: 250%">TITULO</h4>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="row h-50">
            <table class="h-100 w-100">
                <tbody>
                    <tr>
                        <td class="w-100 col-6 text-center bg-danger font-weight-bold align-middle">50</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="row h-25">
            <table class="h-100 w-100">
                <tbody>
                    <tr>
                        <td class="w-75 col-6 text-center bg-success font-weight-bold align-middle">75</td>
                        <td class="w-25 col-6 text-center bg-danger font-weight-bold align-middle">25</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="card col-6 col-sm-4 col-md-3 my-3">
        <div class="row h-25">
            <table class="h-100 w-100">
                <tbody>
                    <tr>
                        <td class="w-100 col-6 text-center font-weight-bold align-middle">
                            <h4 class="card-title text-center" style="font-size: 250%">TITULO</h4>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="row h-50">
            <table class="h-100 w-100">
                <tbody>
                    <tr>
                        <td class="w-100 col-6 text-center bg-danger font-weight-bold align-middle">50</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="row h-25">
            <table class="h-100 w-100">
                <tbody>
                    <tr>
                        <td class="w-75 col-6 text-center bg-success font-weight-bold align-middle">75</td>
                        <td class="w-25 col-6 text-center bg-danger font-weight-bold align-middle">25</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="card col-6 col-sm-4 col-md-3 my-3">
        <div class="row h-25">
            <table class="h-100 w-100">
                <tbody>
                    <tr>
                        <td class="w-100 col-6 text-center font-weight-bold align-middle">
                            <h4 class="card-title text-center" style="font-size: 250%">TITULO</h4>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="row h-50">
            <table class="h-100 w-100">
                <tbody>
                    <tr>
                        <td class="w-100 col-6 text-center bg-danger font-weight-bold align-middle">50</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="row h-25">
            <table class="h-100 w-100">
                <tbody>
                    <tr>
                        <td class="w-75 col-6 text-center bg-success font-weight-bold align-middle">75</td>
                        <td class="w-25 col-6 text-center bg-danger font-weight-bold align-middle">25</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="card col-6 col-sm-4 col-md-3 my-3">
        <div class="row h-25">
            <table class="h-100 w-100">
                <tbody>
                    <tr>
                        <td class="w-100 col-6 text-center font-weight-bold align-middle">
                            <h4 class="card-title text-center" style="font-size: 250%">TITULO</h4>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="row h-50">
            <table class="h-100 w-100">
                <tbody>
                    <tr>
                        <td class="w-100 col-6 text-center bg-danger font-weight-bold align-middle">50</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="row h-25">
            <table class="h-100 w-100">
                <tbody>
                    <tr>
                        <td class="w-75 col-6 text-center bg-success font-weight-bold align-middle">75</td>
                        <td class="w-25 col-6 text-center bg-danger font-weight-bold align-middle">25</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="card col-6 col-sm-4 col-md-3 my-3">
        <div class="row h-25">
            <table class="h-100 w-100">
                <tbody>
                    <tr>
                        <td class="w-100 col-6 text-center font-weight-bold align-middle">
                            <h4 class="card-title text-center" style="font-size: 250%">TITULO</h4>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="row h-50">
            <table class="h-100 w-100">
                <tbody>
                    <tr>
                        <td class="w-100 col-6 text-center bg-danger font-weight-bold align-middle">50</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="row h-25">
            <table class="h-100 w-100">
                <tbody>
                    <tr>
                        <td class="w-75 col-6 text-center bg-success font-weight-bold align-middle">75</td>
                        <td class="w-25 col-6 text-center bg-danger font-weight-bold align-middle">25</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="card col-6 col-sm-4 col-md-3 my-3">
        <div class="row h-25">
            <table class="h-100 w-100">
                <tbody>
                    <tr>
                        <td class="w-100 col-6 text-center font-weight-bold align-middle">
                            <h4 class="card-title text-center" style="font-size: 250%">TITULO</h4>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="row h-50">
            <table class="h-100 w-100">
                <tbody>
                    <tr>
                        <td class="w-100 col-6 text-center bg-danger font-weight-bold align-middle">50</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="row h-25">
            <table class="h-100 w-100">
                <tbody>
                    <tr>
                        <td class="w-75 col-6 text-center bg-success font-weight-bold align-middle">75</td>
                        <td class="w-25 col-6 text-center bg-danger font-weight-bold align-middle">25</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</div>

user_123534910

You can go with

<div className="col-lg-2 col-md-3 col-sm-4 col-6 video position-relative">

where,

  1. col-lg(large)-2 means dividing 12/2 = 6 columns in desktop view(>992px),
  2. col-md(medium)-3 means dividing 12/3 = 4 columns in tablet view(>768px),
  3. col-sm(small)-4 means dividing 12/4 = 3 columns in small tablet view(>576px),
  4. col-xs(extra-small)-6 means 12/6 = 2 columns in mobile view(<576px)

You can once go through the bootstrap grid system: https://getbootstrap.com/docs/4.0/layout/grid/

user_168782260
Related