'How to arrange children cards in a parent card in bootstrap

I want to arrange my child card in the parent card in like this picture. I use bootstrap 4 an d card_deck class

But I have a problem to have a correct template. I want also to add a vertical divider html like the picture and when I click the span with the number, I want to display a list group bootstrap with list 8 apples or 3 pear (when I click span 3 pear) etc.

In my code, you can see the based structure : head, body and I also added bootstrap link. My problem is to arrange the elements as shown in the picture.

Does anyone have an idea?

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

Solution 1:^[1]

If you can understand how grid works. I think you will be able to handle this situation. Break your areas down by what they do.

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

Solution 2:^[2]

There are many ways to do something like this, but your overall goal isn't clear. You mention content showing up on click, but not how or where. You don't say if there will ever be quantities of cards other than four, nor what should happen on large or small screens.

Here's a wild guess using two card decks (to create rows), a heading row, and a pseudo-element divider.

.divided:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 5px;
  background: lightblue;
  height: 100%;
}

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

<body>
  <div class="container border rounded mt-3 pt-3">
    <h4>Shopping List</h4>

    <div class="row">
      <div class="col">
        <h5 class="card-title">Today</h5>
      </div>
      <div class="col">
        <h5 class="card-title">Tomorrow</h5>
      </div>
    </div>

    <div class="divided position-relative">
      <div class="card-deck mb-3">
        <div class="card">
          <div class="card-body">
            <div class="card-block">
              <button type="button" class="btn btn-primary">
              <span class="badge badge-light">8</span> apples 
            </button>
            </div>
          </div>
        </div>

        <div class="card">
          <div class="card-body">
            <div class="card-block">
              <button type="button" class="btn btn-primary">
              <span class="badge badge-light">8</span> apples 
            </button>
            </div>
          </div>
        </div>
      </div>

      <div class="card-deck mb-3">
        <div class="card">
          <div class="card-body">
            <div class="card-block">
              <button type="button" class="btn btn-primary">
              <span class="badge badge-light">8</span> apples 
            </button>
            </div>
          </div>
        </div>

        <div class="card">
          <div class="card-body">
            <div class="card-block">
              <button type="button" class="btn btn-primary">
              <span class="badge badge-light">8</span> apples 
            </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

You could also just use Bootstrap's border classes instead, if they meet your needs. This example uses standard row/col layout instead of the card deck component.

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

<body>
  <div class="container border rounded mt-3 pt-3">
    <h4>Shopping List</h4>

    <div class="row">
      <div class="col">
        <h5 class="card-title">Today</h5>
      </div>
      <div class="col">
        <h5 class="card-title">Tomorrow</h5>
      </div>
    </div>

    <div class="row divided position-relative mb-3">
      <div class="col border-right border-primary">
        <div class="card mb-3">
          <div class="card-body">
            <div class="card-block">
              <button type="button" class="btn btn-primary">
              <span class="badge badge-light">8</span> apples 
            </button>
            </div>
          </div>
        </div>

        <div class="card">
          <div class="card-body">
            <div class="card-block">
              <button type="button" class="btn btn-primary">
              <span class="badge badge-light">8</span> apples 
            </button>
            </div>
          </div>
        </div>
      </div>

      <div class="col border-left border-primary">
        <div class="card mb-3">
          <div class="card-body">
            <div class="card-block">
              <button type="button" class="btn btn-primary">
              <span class="badge badge-light">8</span> apples 
            </button>
            </div>
          </div>
        </div>

        <div class="card">
          <div class="card-body">
            <div class="card-block">
              <button type="button" class="btn btn-primary">
              <span class="badge badge-light">8</span> apples 
            </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	tmcc
Solution 2

'How to arrange children cards in a parent card in bootstrap

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]