Bootstrap 4 row issue

Question

im used bootstrap 4 Im try to make attached image type design , but correctly its not working for me , im used grid system, anyone know how to do that correctly

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="tab-section">

  

      <div class="row">
    <div class="col-6"  style="border-right: 2px solid grey; border-bottom: 2px solid grey;">
     <div > <h2>$ 2,300</h2></div>
    </div>
    <div class="col-6" style="border-bottom: 2px solid grey;">
      <div><h2>$ 53,100</h2></div>
    </div>
    <div class="col-6" style="border-right: 2px solid grey;">
<div><h2>12</h2></div>
    </div>
    <div class="col-6">
<div><h2>68%</h2></div>
    </div>
  </div>

Answer 1

You have super access on Bootstrap 4 with flex layout, just give extra effort using pseudo-element :before/:after.

CSS:

.col {
    margin: 1em;
    position: relative;
}

.bottom-border:after {
    content: '';
    width: calc(100% - 1em);
    height: 2px;
    background-color: grey;
    position: absolute;
    box-sizing: border-box;
    bottom: -1em;
    left: 0
}

.right-border:after {
    content: '';
    height: 100%;
    width: 2px;
    background-color: grey;
    position: absolute;
    box-sizing: border-box;
    right: -1em;
    bottom: 0;
}

.left-border:after {
    content: '';
    height: 100%;
    width: 2px;
    background-color: grey;
    position: absolute;
    box-sizing: border-box;
    left: -1em;
    top: 0;
}

.top-border:after {
    content: '';
    width: calc(100% - 1em);
    height: 2px;
    background-color: grey;
    position: absolute;
    box-sizing: border-box;
    top: -1em;
    right: 0
}

And the html:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />

    <div class="tab-section text-center">
        <div class="row">
            <div class="col right-border">
                <div>
                    <h2>$ 2,300</h2> Today's Revenue
                </div>
            </div>
            <div class="col bottom-border">
                <div>
                    <h2>$ 53,100</h2>Expected Revenue for this month
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col top-border">
                <div>
                    <h2>12</h2> Bookings taken today
                </div>
            </div>
            <div class="col left-border">
                <div>
                    <h2>68%</h2>Total Monthly occupancy
                </div>
            </div>
        </div>
    </div>

Preview link:https://codepen.io/ziruhel/pen/EbKByd

Answer 2

You can use Pseudo-Elements (docs).

You can certainly adjust the colors and lengths as needed, but this should provide a basic framework to get you started.

It provides me the following:

.top-left,
.top-right,
.bottom-left,
.bottom-right {
  position: relative;
}

h2 {
  text-align: center;
}

.top-left::after {
  content: '';
  width: 90%;
  height: 2px;
  position: absolute;
  background: grey;
  bottom: -2px;
}

.top-right::before {
  content: '';
  height: 90%;
  width: 2px;
  position: absolute;
  background: grey;
  left: -2px;
}

.top-right::after {
  content: '';
  width: 90%;
  height: 2px;
  position: absolute;
  background: grey;
  bottom: -2px;
  left: 10%;
}

.bottom-right::before {
  content: '';
  height: 90%;
  width: 2px;
  position: absolute;
  background: grey;
  left: -2px;
  top: 10%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />


<div class="container">
  <div class="tab-section">
    <div class="row">
      <div class="col-6 top-left">
        <div>
          <h2>$ 2,300</h2>
        </div>
      </div>
      <div class="col-6 top-right">
        <div>
          <h2>$ 53,100</h2>
        </div>
      </div>
      <div class="col-6 bottom-left">
        <div>
          <h2>12</h2>
        </div>
      </div>
      <div class="col-6 bottom-right">
        <div>
          <h2>68%</h2>
        </div>
      </div>
    </div>
  </div>