Ensure that the second card within the card-columns structure occupies the entire available width

As a newcomer to Bootstrap (and web development in general), I am working towards achieving the desired effect shown in the image below:

https://i.sstatic.net/tvBBo.png

I have included part of my code snippet below:

<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>

Using Bootstrap version 4.6, you can access the full code on JSFiddle

htmlcsstwitter-bootstrapbootstrap-4card

Answer №1

It seems that the issue lies with your use of the card-columns class, which enforces a three-column layout using the column-count: 3 rule.

For better flexibility and control, I recommend utilizing Flex properties instead. In place of the card-columns class, you can apply specific flex classes like this:

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

To manage spacing between elements, I've incorporated the gap rule into the CSS styles ensuring consistent alignment.

Furthermore, by including the flex-sm-grow-1 class to your second div with the card class, it will expand to occupy all available free space. Here's an example:

.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">
<!-- Additional HTML content here -->

Answer №2

There are 3 columns when there should only be 2.

@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;
}

Answer №3

For structuring my layout, I prefer utilizing Bootstraps grid system.

Check out the solution here: https://jsfiddle.net/b459x1uy/2/

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

By wrapping your cards with columns, you can control their positioning efficiently. The first column (.col-4) takes up 1/4 of the total width on the row, while the second column (.col) fills up the remaining space.

Using Bootstrap columns not only simplifies responsive design but also eliminates the need for writing additional CSS to manage column sizes independently from Bootstraps grid system.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to incorporating a scroll-follow effect in multiple directions

I am facing a challenge with managing an array of divs that exceed the dimensions of their container. I have set overflow to hidden on the container and used JQuery Overscroll to achieve an iPhone-like scrolling effect on the map. The problem I'm try ...

javascriptjqueryhtmlscrollrotation

What is the best way to enable an element to be dragged from just a single point?

I am facing a challenge with a parent div (such as "#strip17") that contains multiple child divs. Most of these child divs consist of a canvas where the user can draw using their mouse. However, the last child div should act as a handle that allows the use ...

javascriptjquerycssjquery-ui

What is the best way to fill these fields with data that already exists?

Can anyone help me with populating parts of my form from data in an array retrieved from the database? Specifically, I need assistance with setting up a <select> element. The value for each option should come from the database column estimate_lead_i ...

phphtmlformsrepopulation

The inconsistency of Selenium's StaleElementReferenceException error and the variability of pageload completion codes is causing issues with clicking on elements

Big shoutout to the amazing stackoverflow community for always providing assistance. Lately, I've been grappling with the frustrating "StaleElementReferenceException" issue and haven't found a universal solution yet. Some helpful members have rec ...

javascriptjavajqueryhtmlselenium

Creating visualizations by overlaying shapes onto images using specified coordinates in jQuery

I have a web application in development that integrates with the skybiometry API. Their demo showcases a fantastic user feedback system displayed after facial recognition, similar to the one shown below. I am currently working on implementing a similar fe ...

javascriptjqueryhtmlshapes

What is the best way to extend the final column of a table across the entire width?

Here's the code I'm working with: .frm-find-people table td:nth-child(1) { padding: 5px 15px; width: 100px } .frm-find-people table td:nth-child(2) { border: 1px solid red; } <form class="frm-find-people"> <table> ...

htmlcss

Delete the CSS class from a specific HTML element

Having just started learning HTML and CSS, I encountered an issue. I applied a CSS class to a table element. Subsequently, I inserted a child table within the parent table. The problem arose when the CSS class of the parent table also influenced the child ...

htmlcss

Refreshing the page using location.reload triggers a reload of various elements

I am currently working on a website that supports multiple languages and utilizes a cookie named nav_lang to determine the user's preferred language for navigation. Whenever a user selects a new language, the cookie is updated accordingly and the page ...

javascriptjquerycssapachecookies

Issue with creating a new jstree node

I recently put together a basic jstree. When I click on a link, it triggers the createNode() function. This function utilizes the create feature from the API to generate a new node. It appears to be a common issue with jQuery that I am encountering. Any ...

javascriptjqueryhtmlcssjstree

Ways to utilize a single HTML page for various URLs while changing one variable value based on the queried URL

My current HTML page structure looks like this: <body ng-controller="DashboardDisplay" onload="submit()"> <div class="container-fluid" > {{scope.arr}} </div> </body> <script> var myApp = angular.module(&apos ...

javascripthtmlcssangularjsnode.js

I am facing difficulty in incorporating an IP address or URL within an IFRAME in my Cordova Android application

This page does not allow any iframes to load except for the YouTube video URL. When attempting to use any other iframe URL, the following error code is displayed: Error : net::ERR_BLOCKED_BY_RESPONSE In the example below, any URL or IP address fails to l ...

javascripthtmlcordova

Is it possible to modify the menu design for a specific page?

Is there a way to customize the appearance of a menu on a specific page of your website? My website's "Main Menu" has 6 menu items, and I'm currently using a menu module called "AS Superfish Menu". This module is set up to make the menu responsi ...

htmlcssjoomla

Switch the hue when altered

My document contains various input elements such as text, radio buttons, and checkboxes. I want each of these elements to change color when a change is made. This is the method I am currently using: $("document").on('click', 'change', ...

javascriptjqueryhtml

The CSS overflow scroller trims the excess background color

Attempting to build a website, I encountered an issue with displaying a scroll bar. Despite using the CSS property overflow: auto, I faced another problem. Let me illustrate the issue through a simple example. I have an outer div with the style overflow: ...

htmlcssangular

Create a Bootstrap modal that includes a checkbox option to prevent it from appearing again in

I am attempting to display a bootstrap modal upon body load based on a value retrieved from a MySQL database. The bootstrap modal is included in the body and shown successfully depending on the database value using the following code snippet: $results ...

phpjqueryajaxtwitter-bootstrapbootstrap-modal

Creating a connection between a secondary jQuery anything slider and a distinct CSS style on a webpage

Currently, I am attempting to incorporate two anything sliders within the same webpage. My goal is to apply unique styling to each slider. Despite my efforts, I am encountering difficulties in calling upon a second style sheet without it completely overr ...

jquerycssanythingslider

Experiencing difficulties with capturing the focus event of the <select> tag

I'm completely stumped at the moment... I just can't seem to get my head around how to make a jQuery $("thing").is(":focus") selector work with a <select> tag in my project. Here's what I've got so far: <input id="uText" name ...

jqueryhtmljquery-selectors

How to handle users with disabled Javascript? Considering redirection to alternate sites for users with script disabled?

I've dedicated today to strategizing the best approach for revamping our company's website, taking into consideration that less than 1% of web users have JavaScript disabled. Our management team strongly believes in ensuring that our website rem ...

javascriptjqueryhtmlcss

Fixed navbar does not collapse when clicking on items on a small-screen device

Currently, I am working with Bootstrap 4 and I was able to resolve a similar issue with Bootstrap 3. However, it seems that Bootstrap 4 is not behaving the same way. I am facing a roadblock and this is the final piece needed to complete the project. This ...

javascriptjquerytwitter-bootstrapbootstrap-4

How to make a CSS Grid layout with automatic height that includes a single column containing multiple content blocks?

I've been exploring the website and attempting to implement a similar layout, but I'm facing some challenges in getting it to look how I want. Please refer to the image I've attached for reference. Is there a straightforward CSS-Grid method ...

htmlcsscss-grid