Tips for organizing child cards within a parent card using Bootstrap

I'm trying to set up my child card within the parent card to look like the image provided. I'm using Bootstrap 4 and the card_deck class.

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

However, I'm facing difficulties in getting the layout to match the picture. I also want to include a vertical divider in HTML as shown in the image, and when I click on the number span, I want a Bootstrap list group to display with either 8 apples or 3 pears (depending on the span clicked).

In my code, you can see the basic structure: head, body, and the addition of the Bootstrap link. My main issue is arranging the elements as depicted in the image.

Does anyone have any ideas?

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

<body>
  <div class="container">
    <h4 class="card-title">Shopping List</h4>

    <div class="card-deck">
      <h5 class="card-title">Today</h5>

      <div class="card text-center">
        <div class="card-block">
          <button type="button" class="btn btn-primary">
                  <span class="badge badge-light">8</span> apples 
                  <span class="sr-only">unread messages</span>
                </button>
        </div>
      </div>

      <div class="card text-center">
        <div class="card-block">
          <button type="button" class="btn btn-primary">
                  <span class="badge badge-light">3</span> pears 
                  <span class="sr-only">unread messages</span>
                </button>
        </div>
      </div>
    </div>

    <div class="card-deck mt-20">
      <h5 class="card-title">Tomorrow</h5>

      <div class="card text-center">
        <div class="card-block">
          <button type="button" class="btn btn-primary">
                  <span class="badge badge-light">2</span> cherries 
                  <span class="sr-only">unread messages</span>
                </button>
        </div>
      </div>

      <div class="card text-center">
        <div class="card-block">
          <button type="button" class="btn btn-primary">
                  <span class="badge badge-light">6</span> mangoes 
                  <span class="sr-only">unread messages</span>
                </button>
        </div>
      </div>
    </div>
  </div>
</body>

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Understanding the mechanics of grid will empower you to navigate through this scenario effectively. Categorize your areas based on their functions.

<html>
    <head>
        <style>
            .container {
                padding: 10px;
                border: 1px solid #bbb;
                border-radius: 6px;
                display: grid;
                width: 400px;
                grid-template-columns: 1fr 5px 1fr;
                grid-template-rows: 50px 200px 200px;
                grid-template-areas:
                    'header header header'
                    'left-top-card splitter right-top-card'
                    'left-bottom-card splitter right-bottom-card';
            }
            .head {
                grid-area: header;
                background-color: aquamarine;
            }
            .left-top {
                grid-area: left-top-card;
                background-color: bisque;
            }
            .left-bottom {
                grid-area: left-bottom-card;
                background-color: blueviolet;
            }
            .right-top {
                grid-area: right-top-card;
                background-color: brown;
            }
            .right-bottom {
                grid-area: right-bottom-card;
                background-color: aqua;
            }
            .split {
                height: 100%;
                background-color: blue;
                grid-area: splitter;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="head">head</div>
            <div class="left-top">left top</div>
            <div class="left-bottom">left bottom</div>
            <div class="split"></div>
            <div class="right-top">right top</div>
            <div class="right-bottom">right bottom</div>
        </div>
    </body>
</html>

Answer №2

It seems like there are several approaches to achieving this, but your main objective is not entirely clear. You mentioned content appearing on click without specifying how or where. It's also unclear whether there will be a fixed number of cards or how the layout should adapt to different screen sizes.

One potential solution involves using two card decks to create rows, along with a heading row and a pseudo-element divider for styling. This approach utilizes standard Bootstrap classes for styling and layout.

You could alternatively leverage Bootstrap's border classes for a simpler implementation, depending on your requirements. The example below demonstrates a layout using standard row and column elements without the card deck component.

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

Adding Bootstrap component via ajax request

I'm facing an issue with injecting a Bootstrap component using ajax. I usually include a select element like this: <select class="selectpicker" data-width="75%"> Most of the HTML code is generated dynamically through javascript, which you can ...

javascriptjquerytwitter-bootstrapappendcode-injection

Once the image is requested in HTML, three.js makes a subsequent request for the same image

This is a block of code. let image = new THREE.TextureLoader().load("http://odf9m3avc.bkt.clouddn.com/1493817789932.jpg") <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script> <img class='preLoad&apo ...

javascripthtmlperformancethree.jsrequest

Utilizing PHP to Assign Attributes to Form Elements

Currently, I am utilizing a Content Management System (CMS) along with a form builder extension. This particular extension grants me the ability to execute PHP scripts upon page load. Furthermore, I have the option to include custom 'Additional Attri ...

phphtmlformsstr-replacereadonly

Add an event listener to a dynamically created div block through jQuery when it is clicked

When the page loads, a dynamic div appears that is visible to the user and in Firebug, but is not available in the page source. The content within this div changes dynamically. I am attempting to bind a click event to this div so that when a user clicks o ...

javascriptjqueryhtml

Navigating through a list of items using keyboard shortcuts in HTML

Similar Question: KeyBoard Navigation for menu using jquery I have developed a menu using unordered list items and display it when the user presses the Enter key in the textbox. While the user can navigate through the menu using the mouse to select it ...

jqueryhtmlcssnavigationcontextmenu

Swap out a div identifier and reload the page without a full page refresh

I am interested in learning how to dynamically remove a div id upon button click and then add it back with another button click to load the associated CSS. The goal is for the page to refresh asynchronously to reflect these changes. So far, I have successf ...

javascriptjqueryhtmlcssajax

Creating animated effects through Javascript and CSS triggered by user events

As a beginner in javascript and CSS, I am experimenting with creating a simple animation that adjusts the transparency of an image when triggered by an event. However, I am facing an issue where the animation only works every other time the function is cal ...

javascriptjqueryhtmlcssanimation

Displaying elements upon checkbox selection in React

Hello, I'm new to React and I am facing an issue with checkbox click handling in React. My goal is to display a div when a checkbox is checked and hide the div when the checkbox is unchecked. The current implementation only shows the div when the che ...

htmlcssreactjscheckbox

creating center-focused gradients in react native using LinearGradient

Hey there, I'm currently facing an issue with applying a box shadow to one of the buttons in my React Native application. Unfortunately, the box shadow property is not supported in Android. To work around this limitation, I am experimenting with creat ...

cssreactjsreact-nativelinear-gradients

Get rid of any fonts that are causing rendering delays on amp pages

Encountering issues with Google Lighthouse and AMP Pages https://i.sstatic.net/EXiha.png I have attempted various solutions but none seem to be working <link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400, ...

htmlcssfontsamp-htmllighthouse

Having issues with jQuery Overlay functionality on Internet Explorer 8

Sorry if this question has already been addressed elsewhere, but I wasn't able to locate any information on it. I am currently using jQueryTools Overlay which is functioning properly in Chrome. However, I am encountering an issue in IE-8 where my ove ...

jqueryhtmlcssuser-interfaceoverlay

PHP - Unable to successfully upload the file

Recently, I created code in php for uploading an image/file using move_upload_file() as shown below: if (isset($_POST["title"]) && isset($_POST["content"]) && isset($_POST["category"])) { //if (!isset($_POST[])) $title = ...

phphtmlimage-uploading

Is there a way to prevent this JavaScript code from deleting the initial row of my table?

Looking at the code provided, it's evident that creating and deleting new rows is a straightforward process. However, there seems to be an issue where the default/origin/first row (A-T) gets deleted along with the rest of the rows. The main requiremen ...

javascripthtml

Tips on removing or hiding the nearest element using jQuery

How can I use jQuery to delete or hide the nearest element? I am trying to hide the closest element with the class 'tiny-user-block' when the deny button is clicked. Here is the jQuery code: $('body').on('click', '. ...

jqueryhtml

How to Save Information to MySQL Database Using an HTML Form with Checkboxes

I recently set up an HTML form that includes checkboxes and successfully managed to store the values using an array in my database. After adding a name field to the form along with a corresponding column in my MySQL table, I hit a roadblock. The new name ...

phphtmlmysqlforms

placing a div inside another div

As I work on my website, I have created several panels with a repeating texture. To enhance the visual appeal of the site, I decided to add colored divs and adjust opacity for a tint effect instead of using separate images. The issue I'm facing is th ...

csshtml

Boot strap default version cannot be identified

After developing a web app with Visual Studio .NET Core 3.1, I noticed that Bootstrap was included by default. However, when I attempted to use the accordion example from Bootstrap by copying and pasting it into my project, it did not render properly. I ch ...

asp.net-corebootstrap-4

Utilize jQuery to load a separate external sites div into an iframe

I have a department website that caters to a specific audience. I am interested in including a set of related links from an external site at the conclusion of each article. The links will be organized within a div, like so: <div id="linktoc"><a h ...

jqueryhtmliframeload

"Need help on Tumblr: how can I make a div container wrap around a photo

Check out this website. Is there a way to make the div snugly wrap around the image? Currently, it seems to be sticking 4px below the image (as indicated by the red line I added in the background of the div). I'm puzzled as to where those additional ...

htmlcssimage

The incorrect CSS styling was applied to the custom input background with the attribute "text"

Is there any way to remove the white border and background that appears around a form input field with type "text"? Looking for some help on this issue! .my-form-login input[type="text"] { background-image: url('../images/text-input.png') ...

cssinputbackground-color