How to arrange children cards in a parent card in bootstrap

user_18226690 0
Viewed 120

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

enter image description here

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>

bootstrap-4 twitter-bootstrap css html
2 Answers

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>

user_12648040

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>

user_15497370
Related