Bootstrap - 4-column grid

Question

I can not get these lines on the page. I always divide the pages into two horizontal sections, and I need four vertical sections.

Here is a PHOTO ::

Here is a script of my code that you can easily find out what I want FIDDLE .

I just need the average content to be like in the picture. 4 vertical columns and in those columns that have 2 blocks.

Here is my attempt:

<div class="col-md-12">
<div class="pane border-right">
<div>
<div style="float: left;">
</div>
</div>
<div class="col-md-6 specifica ">
<div class="col-sm-3 border-right-dotted">

a

</div>
<div class="col-sm-3 border-right-dotted">

b

</div>

</div>
<div class="col-md-3 specifica ">
<div class="col-sm-3 border-right-dotted">

c

</div>
<div class="col-sm-3 ">

d

</div>
</div>

Answer 1

Using this code you can create 2 rows with 4 columns, such as an image, Example: http://jsfiddle.net/ignaciocorreia/rc2E7/1/

<div class="row">
    <div class="col-sm-3 col-md-3">a</div>
    <div class="col-sm-3 col-md-3">b</div>
    <div class="col-sm-3 col-md-3">c</div>
    <div class="col-sm-3 col-md-3">d</div>
</div>

----

<div class="row">
    <div class="col-sm-3 col-md-3">a</div>
    <div class="col-sm-3 col-md-3">b</div>
    <div class="col-sm-3 col-md-3">c</div>
    <div class="col-sm-3 col-md-3">d</div>
</div>

EDIT - 04/07/2017

Boostrap 4 flex box :

<div class="row">
   <div class="col">1</div>
   <div class="col">2</div>
   <div class="col">3</div>
   <div class="col">4</div>
</div>

: https://codepen.io/igcorreia/pen/jBjbQP