Multiple col-12 in one row

[visualcookie]

If I have multiple col-12 in one row (see example), the second col-12 got a margin-right which is not needed on col-12.

Example:

<div class="container">
   <div class="row">
      <div class="col-12 vertical-middle">
         <svg class="footer__icon">
            <use xlink:href="#logo-bear"></use>
         </svg>

         <h1>XXX</h1>
         <p>XXX</p>
      </div>

      <div class="footer__bottom col-12 text-center">
         <p>Copyright &copy; 2015</p>
      </div>
   </div>
</div>

[esr360]

I think this is expected because in a row of columns, every column except the first one has a margin for the gutter. Typically each row would contain any number of columns that add up to 12, so a col-12 column should in theory be it's own row, with the next col-12 also being in its own row.

However, you should be able to add the class flow-row to your row, like so:

<div class="container">
   <div class="row flow-row">
      ...
   </div>
</div>

And that should fix the margin issues you are having.

http://esr360.github.io/Kayzen-GS/#flow-columns

[visualcookie]

True, thanks. :+1: