[Solved] Bootstrap4 grid system, nesting rows

by


You can use nested grid system as in the example

.b{
  border: 1px black solid;
  height: 50px;
  margin: 5px;
 }
.a{
  border: 1px black solid;
  height: 170px;
  padding:5px;
  margin:5px;
 }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="row">
  <div class="col-md-4 col-sm-4">
    <div class="a"></div>
  </div>
  <div class="col-md-8  col-sm-8">
    <div class="row">
      <div class="col-md-12 col-sm-12">
        <div class="b"></div>
      </div>
      <div class="col-md-4 col-sm-4">
        <div class="b"></div>
      </div>
      <div class="col-md-4 col-sm-4">
        <div class="b"></div>
      </div>
      <div class="col-md-4 col-sm-4">
        <div class="b"></div>
      </div>
      <div class="col-md-4 col-sm-4">
        <div class="b"></div>
      </div>
      <div class="col-md-4 col-sm-4">
        <div class="b"></div>
      </div>
      <div class="col-md-4 col-sm-4">
        <div class="b"></div>
      </div>
     </div>
  </div>
</div>

solved Bootstrap4 grid system, nesting rows