I want my list of cards to condense down to just two columns, and I'd like the headers to be

Creating a "table" with bootstrap cards, fetching data through $smarty. When the viewport shrinks, I want to collapse the table into 2 columns.

The left column should have headers like: name, date, age. The corresponding right column should display the data inline like: Fred, 12.12.2012, 41.

I tried using Bootstrap's responsive feature in cards, but it collapsed everything into one column when the viewport was small. Even jquery.basictable.min.js did not work as expected.

A simple graphic of the desired layout:

name | stewie
date | 124214
age  | 9000

name | bob
date | 45845
age  | 65

Link to the desired result:

I believe CSS might be able to achieve what I need, but I'm having trouble finding relevant information.

htmlcssbootstrap-4responsivebootstrap-cards

Answer №1

THIS IS AN OUTDATED SOLUTION:

It may not be the best solution, but you can give this a try

The main factor is:

  • @media screen and (max-width:768px)
    will detect mobile devices for responsive design
  • flex-direction: [column/row] !important
    will change the orientation of the table

@media screen and (max-width:768px) {
    body {
      /* Yellow signifies mobile */
      background-color: #ff0 !important;
    }
    .card {
      flex-direction: row !important;
    }
    // More CSS here...

This issue has not been resolved

 

UPDATE: I have devoted considerable time to finding a jQuery solution for you.

In order to solve this issue, you will need to utilize jQuery.

One approach involves creating a new element to toggle between mobile and desktop views.

Here's an example:

If this helps, please consider submitting it as the answer

// Snippet continued...

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

JQuery magic: A shrinking header that changes size as you scroll

There have been countless inquiries regarding how to animate a header to shrink as the page is scrolled down. While I have some understanding of the responses to similar questions, I find my case to be rather complex. The header on my page takes up too muc ...

jqueryhtmlcssheadershrink

Do you know of any HTML Validators that are compatible with Maven?

Currently, I am working on a project that consists of multiple HTML files. In order to ensure a smooth Maven build process, I am looking for a validator that can perform the following checks: Validate the syntax of the files (such as ensuring all opening ...

htmlmaven

Animating a gradient within an SVG element following along an SVG path

I successfully created an SVG egg and animated a path while adding a gradient, but I am facing an issue. The linear gradient goes from top to bottom, but I want the dark color at 0% and the light color at 100%. Essentially, I want the gradient to follow th ...

javascriptcsssvg

Discover the power of utilizing JavaScript to sort through table rows by filtering them based on the selections of multiple checkbox

How can I create interdependent logic for checkbox sections in a form to filter based on all selections? I am looking for help with my code snippet that showcases checkboxes controlling the visibility of table rows: $(document).ready(function() { $(" ...

javascriptjqueryhtmlcheckbox

Customize TYPO3 templates by modifying the div id structure

I have a template in TYPO3 that I want to use for multiple pages. Within this template, there is a specific DIV element. I am wondering if it's possible to change the ID of the DIV based on the page UID. This DIV is the only one that changes its cont ...

htmltypo3typoscript

Eliminate any unnecessary spaces in the text of a link following the breaking of a word

While working on a navigation menu, I noticed that in large screens the navigation looks fine but in laptop view, the words are breaking up and it's acceptable. However, I want to remove the extra spacing after the text. In the large screen: https:/ ...

cssmaterial-uitypography

Having trouble incorporating Bootstrap with JS files in my Maven project

While attempting to download and transfer the files of the newest Bootstrap version to my Maven project, I encountered an error in all JavaScript files. It seems to be due to syntax errors, even though I have not made any alterations to the code in these ...

javahtmltwitter-bootstrapmaven

Newbie inquiry: How to utilize classes in HTML for CSS implementation?

I'm a beginner in the world of HTML and I have what might be considered as a basic question... Here is the style definition for my header in the CSS file: h1.heading { color: indianred; } I attempted to link it to my HTML file like this, but unfo ...

htmlcss

How to extract values from a Multi Select Box in PHP and convert them into a comma separated

Hey there! I'm currently working with a multi-select box setup in my HTML code. Check it out below: HTML <form action="c3.php" method="post"> <select name="ary[]" multiple="multiple"> <opti ...

phphtml

What is the best method for using XMLhttpRequest in PHP to append options to a select element?

I'm looking to dynamically fetch values from a MySQL database using PHP and then add them as choices within a select element. Here is my HTML code: <label for='listDivision'>Division</label><select id='listDivision&apos ...

javascriptphphtmlajax

Tips for horizontally centering div elements with container and row class in Bootstrap 5

I am having trouble aligning the section properly in the center, and the div does not have a container class. Is there a bootstrap class that can help with alignment, or do I need to create CSS code to align the items in the div tag? <link href="ht ...

htmlbootstrap-5

Tips for customizing the CSS of a child component that has been imported from a different module in Angular 2

I have been using agm-snazzy-window from amg-snazzy-window There is a mention that I can modify the css class, but when I try to do so, it doesn't seem to work. Here is an example: map-component.html <agm-snazzy-info-window [closeWhenOthersOp ...

cssangularsass

HTML5 Canvas with Transparent Color Feature

I have created a basic Pong game using Javascript and the Canvas element. To allow the background image of the div tag to show through the canvas, I set the background color of the canvas to be transparent. However, I encountered an issue where the ball ...

javascripthtmlcanvas

Close button for colorbox modal window containing an iframe

I'm currently utilizing colorbox for a modal popup, and the content of the popup is being sourced from a URL. Since it's displayed within an iFrame, I'm wondering how I can incorporate a close button to the modal popup. Thank you The follo ...

javascriptjquerycsscolorbox

What is the best way to create a seamless change from a black to white invert filter?

I'm currently working on a project where I need to change my icons from black to white. After some research, I found that the best way to do this is by using filter: invert(100%). However, when I try to transition it, the change happens abruptly after ...

htmlcss

Using XSLT with JavaScript

I am currently working with a set of XML files that are linked to XSLT files for rendering as HTML on a web browser. Some of these XML files contain links that would typically trigger an AJAX call to fetch HTML and insert it into a specific DIV element on ...

javascripthtmlxmlajaxxslt

Having trouble incorporating a JavaScript snippet from Google Trends into an HTML webpage

Hey everyone, I've been trying to incorporate a JavaScript script to display Google Trends on an HTML page. I copied the embed code directly from the first image at and modified it as follows. Unfortunately, it's not working as expected. <ht ...

javascripthtml

Fluid overlap of divs in Bootstrap framework

I am currently in the process of making style adjustments to a website at One specific change I've made is adding a top bar image. However, I've encountered an issue where the top bar graphic overlaps the navigation when the page is resized too ...

htmlcssgithub-pages

Creating a visually dynamic stack of images using javascript, jquery, and HTML

I'm interested in creating a unique image viewer using javascript/jQuery/HTML that combines elements of a book page flip and iTunes coverflow, optimized for mobile device browsers. I've been searching for tutorials to help kickstart this project, ...

javascriptjqueryhtmlimagejquery-animate

Creating a fluid side navigation bar in reactjs

Can someone please help me with the following code issue? I am encountering an error related to the script tag when running it in ReactJS, although it works fine in a simple HTML file. Upon starting npm, an error is displayed pointing to line number which ...

javascriptjqueryhtmlcssreactjs