CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4card
xvlaze
xvlaze

Reputation: 869

Make second card in card-columns fill all remaining width

I am new to Bootstrap (and web development in general) and I am trying to achieve the following effect:

enter image description here

Part of my code is:

<div id="content" class="p-4">
    <div class="container-fluid">
        <div class="card-columns">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Dashboard</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Check your app stats by country</h6>
                    <select id="country-select" class="form-control form-select form-select-lg mb-3" aria-label=".form-select-lg example">
                        <option selected>Select a country</option>
                    </select>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Chart</h5>
                    <h6 class="card-subtitle mb-2 text-muted">Check your app stats by country</h6>
                    <canvas id="myChart" width="400" height="400"></canvas>
                    <script>
                        <!-- CHART CODE AVAILABLE ON JSFIDDLE -->
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>

My Bootstrap version is 4.6 and the full code is available on JSFiddle

Upvotes: 1

Views: 1415

Answers (3)

s.kuznetsov
s.kuznetsov

Reputation: 15223

Your problem was using class card-columns, which strictly divides your cards into three columns, the column-count: 3 rule.

Flex will be preferable for your task. Instead of class card-columns, I have specified flexibility classes. Here:

<div class="d-flex align-items-sm-baseline">

Also, for indentation, I used the gap rule, adding this selector to the css.

For the second div with class card, I added the flex-sm-grow-1 class to allow this div to take up all of the free space.

.container-fluid > .d-flex.align-items-sm-baseline {
    gap: 20px;
}

@media (max-width: 767px) {
    .container-fluid > .d-flex.align-items-sm-baseline {
        flex-direction: column !important;
        align-items: stretch !important;
    }
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <title>Android Rank Checker</title>
        <!-- Bootstrap CSS CDN -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous" />
        <!-- Our Custom CSS -->
        <link rel="stylesheet" href="style.css" />

        <!-- Font Awesome JS -->
        <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
        <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>

        <!-- chart.js CDN -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js" integrity="sha256-t9UJPrESBeG2ojKTIcFLPGF7nHi2vEc7f5A2KpH/UBU=" crossorigin="anonymous"></script>
    </head>

    <body>
        <nav class="navbar navbar-default bg-dark navbar-dark">
            <div id="sidebarCollapse">
                <i class="fas fa-bars"></i>
                <a href="#" class="navbar-brand ml-3">Android Rank Checker</a>
            </div>
        </nav>
        <div class="wrapper">
            <!-- Page Content -->
            <div id="content" class="p-4">
                <div class="container-fluid">
                    <div class="d-flex align-items-sm-baseline">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">Dashboard</h5>
                                <h6 class="card-subtitle mb-2 text-muted">Check your app stats by country</h6>
                                <select id="country-select" class="form-control form-select form-select-lg mb-3" aria-label=".form-select-lg example">
                                    <option selected>Select a country</option>
                                </select>
                            </div>
                        </div>
                        <div class="card flex-sm-grow-1">
                            <div class="card-body">
                                <h5 class="card-title">Chart</h5>
                                <h6 class="card-subtitle mb-2 text-muted">Check your app stats by country</h6>
                                <canvas id="myChart" width="" height=""></canvas>
                                <script>
                                    var ctx = document.getElementById("myChart").getContext("2d");
                                    var myChart = new Chart(ctx, {
                                        type: "bar",
                                        data: {
                                            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                                            datasets: [
                                                {
                                                    label: "# of Votes",
                                                    data: [12, 19, 3, 5, 2, 3],
                                                    backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(255, 206, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(255, 159, 64, 0.2)"],
                                                    borderColor: ["rgba(255, 99, 132, 1)", "rgba(54, 162, 235, 1)", "rgba(255, 206, 86, 1)", "rgba(75, 192, 192, 1)", "rgba(153, 102, 255, 1)", "rgba(255, 159, 64, 1)"],
                                                    borderWidth: 1,
                                                },
                                            ],
                                        },
                                        options: {
                                            scales: {
                                                yAxes: [
                                                    {
                                                        ticks: {
                                                            beginAtZero: true,
                                                        },
                                                    },
                                                ],
                                            },
                                        },
                                    });
                                </script>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- jQuery CDN - Slim version (=without AJAX) -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
        <script src="sidebar.js"></script>
        <script src="app.js"></script>
    </body>
</html>

Upvotes: 2

Mikk Raudsepp
Mikk Raudsepp

Reputation: 817

I would use Bootstraps grid system.

Solution: https://jsfiddle.net/b459x1uy/2/

<div class="row">
    <div class="col-4">
        // Dashboard card
    </div>
    <div class="col">
        // Chart card
    </div>
</div>

Wrap your cards with columns. In this example first column (.col-4) takes 12/4 of the width, second column (.col) takes all the available space on that row.

Using Bootstrap columns gives you also control about the responsive layout in one go. I would not write extra CSS to size your columns without considering Bootstraps grid system first.

Upvotes: 0

mia-wallace
mia-wallace

Reputation: 145

You should have 2 columns, you have 3.

@media (min-width: 576px)
.card-columns {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
    orphans: 1;
    widows: 1;
}

Upvotes: 0

Related Questions