title: HTML bootstrap content structure
body: <p>I am putting my content to HTML(Bootstrap4) but then i started styling CSS I realized my HTML structure is pretty bad. I added the main border around content to the "container" class, so then i realized the h titles are inside, but i need outside like in my picture with example. And this structure have much more problems.
  What HTML structure would be the best and cleanest for my content like in my example picture. Maybe i just need to use simple HTML tables for this?</p>
  
  <p>My expected result:</p>
  
  <p><a href="https://i.stack.imgur.com/JNdma.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JNdma.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#work-process {
      padding: 78px 0 150px 0;
      background-color: #fbfbfb;
  }
  
  h2 {
      font-size: 14px;
      font-weight: bold;      
      line-height: normal;
      color: #424242;
  }
  
  .container {
      border-radius: 8px;
      border: solid 1px #e9e9e9;
      background-color: #ffffff;
      overflow: hidden;
  }
  
  .col-lg-3 {
      padding-left: 54px;
      background-color: #ffffff;
  }
  
  .col-lg-3:not(:last-child):after { 
      content: " "; 
      display: block; 
      width: 0; 
      height: 0;
      border-top: 100px solid transparent;
      border-bottom: 100px solid transparent;
      border-left: 40px solid #ffffff;
      position: absolute;
      top: 50%;
      margin-top: -100px; 
      left: 100%;
      z-index: 2; 
  }
  
  .col-lg-3:not(:last-child):before {
      content: " "; 
      display: block; 
      width: 0; 
      height: 0;
      border-top: 100px solid transparent;
      border-bottom: 100px solid transparent;
      border-left: 40px solid #e9e9e9;
      position: absolute;
      top: 50%;
      margin-top: -100px; 
      margin-left: 1px;
      left: 100%;
      z-index: 1; 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;section id="work-process"&gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-lg-3"&gt;
                      &lt;h2&gt;1. KONSULTACIJA&lt;/h2&gt;
                      &lt;p&gt;Aptarsime situaciją ir įvertinsime preliminarią kainą&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="col-lg-3"&gt;
                      &lt;h2&gt;2. PROJEKTAVIMAS&lt;/h2&gt;
                      &lt;p&gt;2.1. Paruošiami brėžiniai ir kelios baldų vizualizacijos.
                          2.2. Užsakovo vizualizacijų pastabų ar pageidavimų korekcijos&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="col-lg-3"&gt;
                      &lt;h2&gt;3. GAMYBA&lt;/h2&gt;
                      &lt;p&gt;Pagaminsime baldūs&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="col-lg-3"&gt;
                      &lt;h2&gt;4. PRISTATYMAS / MONTAVIMAS&lt;/h2&gt;
                      &lt;p&gt;Pristatysime ir sumontuosime nestandartinius baldūs&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-lg-3"&gt;
                      Susisiekite 
                  &lt;/div&gt;
                  &lt;div class="col-lg-6"&gt;
                      Esant poreikiuj sukursime užsakymą pagal užsakovo.. 
                  &lt;/div&gt;
                  &lt;div class="col-lg-3"&gt;
                      Daugiau informacijos 
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Full example with css: <a href="https://jsfiddle.net/L3wzet5g/" rel="nofollow noreferrer">https://jsfiddle.net/L3wzet5g/</a></p>