Table like div's inside bootstrap4 card

Question

I'm having trouble creating this card. What I'm trying to do is two columns, one col-xs-3 and the other one col-xs-9. The titles in col-xs-3 should be inline with the title-match in col-xs-9.

Somehow I'm not managing to make that happen.

Below is a copy of my card as it looks now... can anyone help me with this?

.detail-titles {
  color: blue;
  border-right: 1px solid red;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-12 col-xl-12 ">



  <div class="card">
    <div class="card-body">
      <div class="container">
        <div class="row">
          <div class="col-xs-3 detail-titles">
            <p>1 title</p>
            <p>2 title</p>
            <p>3 title</p>
            <p>4 text</p>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-9 text-right">
            <p>1 title-match</p>
            <p>2 title-match</p>
            <p>3 title-match</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis accumsan, enim vel condimentum tristique, est lacus placerat risus, sed luctus nulla metus vitae eros. Vivamus dictum aliquam mauris eget consequat. Proin nec lorem a nisi tristique
              porta vitae vel quam. Sed est nisi, aliquam eu ligula sit amet, pulvinar finibus est. Curabitur lectus augue, fermentum et mauris eget, hendrerit sollicitudin nisi. Morbi in lacus ac sapien malesuada commodo ut a lectus. Integer at diam
              convallis, molestie sem sit amet, gravida lorem. Fusce sagittis ornare dui. Maecenas at vestibulum lorem, in sodales tellus. Nunc sed urna in nunc gravida fermentum id non diam. Mauris porttitor nisl sed quam commodo, sit amet ultrices dolor
              gravida. Donec imperdiet venenatis dui sit amet condimentum. Morbi vel nisi pellentesque, vulputate nibh a, ornare sem. Pellentesque tempus nisl quis rutrum hendrerit. Praesent eget massa nisl. Vestibulum elit tortor, mollis vitae orci eget,
              vestibulum iaculis sapien. Sed vulputate risus vel lectus congue, sit amet dapibus arcu commodo.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

you seem to have added in an extra row between the cards so they will not be on the same line — Pete, Jun 21 '19 at 13:31

score 3 · Accepted Answer · edited Jun 21 '19 at 14:30

col-xs not avaliable on bootstrap4

Remove container(row) div this parent <div class="col-sm-9 text-right">

.detail-titles {
  color: blue;
  border-right: 1px solid red;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-12 col-xl-12 ">
  <div class="card">
    <div class="card-body">
      <div class="container">
        <div class="row">
          <div class="col-sm-3 detail-titles">
            <p class="border-bottom">1 title</p>
            <p class="border-bottom">2 title</p>
            <p class="border-bottom">3 title</p>
            <p class="border-bottom">4 text</p>
          </div>
          <div class="col-sm-9 text-right">
            <p>1 title-match</p>
            <p>2 title-match</p>
            <p>3 title-match</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis accumsan, enim vel condimentum tristique, est lacus placerat risus, sed luctus nulla metus vitae eros. Vivamus dictum aliquam mauris eget consequat. Proin nec lorem a nisi tristique
              porta vitae vel quam. Sed est nisi, aliquam eu ligula sit amet, pulvinar finibus est. Curabitur lectus augue, fermentum et mauris eget, hendrerit sollicitudin nisi. Morbi in lacus ac sapien malesuada commodo ut a lectus. Integer at diam
              convallis, molestie sem sit amet, gravida lorem. Fusce sagittis ornare dui. Maecenas at vestibulum lorem, in sodales tellus. Nunc sed urna in nunc gravida fermentum id non diam. Mauris porttitor nisl sed quam commodo, sit amet ultrices dolor
              gravida. Donec imperdiet venenatis dui sit amet condimentum. Morbi vel nisi pellentesque, vulputate nibh a, ornare sem. Pellentesque tempus nisl quis rutrum hendrerit. Praesent eget massa nisl. Vestibulum elit tortor, mollis vitae orci eget,
              vestibulum iaculis sapien. Sed vulputate risus vel lectus congue, sit amet dapibus arcu commodo.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Thank you, this did the trick... xs was the problem. is it possible to have a border-bottom on the titles in the col-sm-3 and let it run through the whole line. To make it like a table lines? — codegirl, Jun 21 '19 at 13:41
thank you for your try, but I was thinking more like if the border would span the whole page width under each line. — codegirl, Jun 21 '19 at 13:47
remove class `border-bottom` add this class `border px-1 py-1` — Lalji Tadhani, Jun 21 '19 at 13:50
we are having a miss understanding here, this is the css of what I'm trying to do, but is not working. the line always appears at the bottom of the col-sm-3 div `.detail-titles { color: blue; } .detail-titles p::before { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; border-bottom: 1px solid #d3d3d3; }` I will post that as another question later. — codegirl, Jun 21 '19 at 14:00

Xander · Answer 2 · 2019-06-21T13:39:28.857

You have two 'row' elements but only one is required.

I have also changed xs to sm in your bootstrap columns because you're using boostrap 4. See the following: `col-xs-*` not working in Bootstrap 4

<div class="card">
    <div class="card-body">
        <div class="container">
            <div class="row">
                <div class="col-sm-3 detail-titles">
                    <p>1 title</p>
                    <p>2 title</p>
                    <p>3 title</p>
                    <p>4 text</p>
                </div>
                <div class="col-sm-9 text-right">
                    <p>1 title-match</p>
                    <p>2 title-match</p>
                    <p>3 title-match</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis accumsan, enim vel condimentum tristique, est lacus placerat risus, sed luctus nulla metus vitae eros. Vivamus dictum aliquam mauris eget consequat.
                      Proin nec lorem a nisi tristique porta vitae vel quam. Sed est nisi, aliquam eu ligula sit amet, pulvinar finibus est. Curabitur lectus augue, fermentum et mauris eget, hendrerit sollicitudin nisi. Morbi in lacus ac sapien malesuada commodo ut a lectus.
                      Integer at  diam convallis, molestie sem sit amet, gravida lorem. Fusce sagittis ornare dui. Maecenas at vestibulum lorem, in sodales tellus. Nunc sed urna in nunc gravida fermentum id non diam.
                      Mauris porttitor nisl sed quam commodo, sit amet ultrices dolor gravida. Donec imperdiet venenatis dui sit amet condimentum. Morbi vel nisi pellentesque, vulputate nibh a, ornare sem.
                      Pellentesque tempus nisl quis rutrum hendrerit. Praesent eget massa nisl. Vestibulum elit tortor, mollis vitae orci eget, vestibulum iaculis sapien. Sed vulputate risus vel lectus congue, sit amet dapibus arcu commodo.</p>
                </div>
            </div>
        </div>
    </div>
</div>

You also changed the OP's `xs` to `sm` – j08691 Jun 21 '19 at 13:36 — j08691, Jun 21 '19 at 13:36

Table like div's inside bootstrap4 card

2 Answers2