Conflitto tra le mie row e le row di bootstrap

[he-man]

Le mie row hanno questo css

.row:after {
  content: "";
  display: table;
  clear: both;
}

e sono collegate a questo

<div class="row">
  <div class="column" onclick="openTab('b1');" style="background:green;">Box 1</div>
  <div class="column" onclick="openTab('b2');" style="background:blue;">Box 2</div>
  <div class="column" onclick="openTab('b3');" style="background:red;">Box 3</div>
</div>

che apre questo

<div id="b1" class="containerTab" style="display:none;background:blue">
  <span onclick="this.parentElement.style.display='none'" class="closebtn">x</span>
 <div class="row">
    <div class="col">immagine</div>
    <div class="col"> <h2>Box 2</h2>
  <p>Lorem ipsum..</p></div>
  </div>
</div>
…b2,b3

Nell'ultima parte di codice ci sono le row di bootstrap, qui mi si genera il conflitto quando ripeto tutto il codice che ho postato per avere varie righe di tab a numero crescente.
Cioè tra una riga e un'altra mi si genera uno spazio che non voglio avere...
Potete indicarmi come risolvere? Grazie