How to place a card under a table?

Question

I did use bootstrap to produce following code:

 <div class="container">
    <div class="row text-center">
      <div class="col-lg-3">
        <ul class="row list-unstyled">
          <li class="col-lg-12">
            <div class="bg-danger text-light">#1</div>
          </li>
          <li class="col-lg-12">
            <div>0</div>
          </li>
        </ul>
      </div>
      <div class="col-lg-3">
        <ul class="row list-unstyled">
          <li class="col-lg-12">
            <div class="bg-danger text-light">#2</div>
          </li>
          <li class="col-lg-12">
            <div>0</div>
          </li>
        </ul>
      </div>
      <div class="col-lg-3">
        <ul class="row list-unstyled">
          <li class="col-lg-12">
            <div class="bg-danger text-light">#3</div>
          </li>
          <li class="col-lg-12">
            <div>0</div>
          </li>
        </ul>
      </div>
      <div class="col-lg-3">
        <ul class="row list-unstyled">
          <li class="col-lg-12">
            <div class="bg-danger text-light">Buttons</div>
          </li>
          <li class="col-lg-12">
            <div class="alert alert-danger">#1</div>
          </li>
          <li class="col-lg-12">
            <div class="alert alert-danger">#2</div>
          </li>
          <li class="col-lg-12">
            <div class="alert alert-danger">#3</div>
          </li>
          <li class="col-lg-12">
            <div class="alert alert-danger">#4</div>
          </li>
          <li class="col-lg-12">
            <div class="alert alert-danger">#5</div>
          </li>
          <li class="col-lg-12">
            <div class="alert alert-danger">#6</div>
          </li>
          <li class="col-lg-12">
            <div class="alert alert-danger">#7</div>
          </li>
          <li class="col-lg-12">
            <div class="alert alert-danger">#8</div>
          </li>
          <li class="col-lg-12">
            <div class="alert alert-danger">#9</div>
          </li>
          <li class="col-lg-12">
            <div class="alert alert-danger">#10</div>
          </li>
        </ul>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-9">
        <div class="container">
            <div class="row">
              <div class="col-lg-12">
                <div class="card-deck">
                    <div class="card">
                        <div class="card-body">
                        <h4 class="card-title">Title</h4>
                        <p class="card-text">Some text</p>
                        <button type="button" class="btn btn-danger">button</button>
                        <p class="card-text"><small class="text-muted">Some more text</small></p>
                        </div>
                    </div>
                </div>
            </div>
            </div>
          </div>
        
      </div>
    </div>
  </div>

And that is how it looks now:

What shall I do to move the card up I just want to move the card upwards, so that it is directly under the table. It would be nice, if it could look like this at the end:

I have really tried all I could think of. But still, nothing works. I hope someone out there might be able to help me.

This is a good use case of CSS Grid. – m4n0 Nov 10 '20 at 19:28 — m4n0, Nov 10 '20 at 19:28
Try `style="margin-top: -100px;"` – M-Chen-3 Nov 10 '20 at 19:39 — M-Chen-3, Nov 10 '20 at 19:39

Prathamesh Koshti · Answer 1 · 2020-11-10T19:52:40.257

To implement the desired layout you need to understand how bootstrap grid works!

Main problem in your implementation is that you are creating two rows one for the top header thing and buttons collection and another row for the card element. Because of this row, it occupies the whole 100% width.

So, I'll show you the way to implement the layout with abstraction (not using the whole code blocks)

Create a row and add two columns in it (col-lg-9 and col-lg-3) which makes column count as 12 which occupies full width. Now inside col-lg-9 create two more rows, in the first row your headers will come and in the second one card code will come. And in the col-lg-3 you can write your button collection. As shown below:

<div class="row">
  <div class="col-lg-9">
    <div class="row">
      <div class="col-lg-4">#1</div>
      <div class="col-lg-4">#2</div>
      <div class="col-lg-4">#3</div>
      <div class="col-lg-4">0</div>
      <div class="col-lg-4">0</div>
      <div class="col-lg-4">0</div>
    </div>
    <div class="row">
      <div class="col-lg-12">
        <!-- Your card code goes here -->
      </div>
    </div>
  </div>
  <div class="col-lg-3">
    <!-- Your button collection code goes here -->
  </div>
</div>

How to place a card under a table?

1 Answers1