Close a bootstrap row and start new row after every nth containing div

I have a bootstrap row which will be populated by, let's say, blog post thumbnails.

<section class="container">
  <div class="row thumbs">
    <div class="col-sm-3">content</div>
    <div class="col-sm-3">content</div>
    <div class="col-sm-3">content</div>
    <div class="col-sm-3">content</div>
    <div class="col-sm-3">content</div>
  </div>
  <hr class="divider" />
  <div class="navigation">navigation</div>
</section

I want to close a row, insert hr tag and open a new bootstrap row after every 4th post thumbnail.

<section class="container">
  <div class="row thumbs">
    <div class="col-sm-3">content</div>
    <div class="col-sm-3">content</div>
    <div class="col-sm-3">content</div>
    <div class="col-sm-3">content</div>
  </div>
  <hr class="divider" />
  <div class="row">
    <div class="col-sm-3">content</div>
  </div>
  <hr class="divider" />
  <div class="navigation">navigation</div>
</section>

Is there a way to do this with jquery?

Depending on your motivation to wrap each set of columns in a new row, you can style every nth row with straight CSS.

In bootstrap, if you have extra columns that spillover past 12, they just wrap into a new line anyway, so having the new row is usually redundant, although you might have some external reason to keep it in your case.

Either way, here's a CSS solution that adds a page wide horizontal divider every 4 divs:

Demo in jsFiddle & Stack Snippets

<!-- begin snippet: js hide: false --> <!-- language: lang-css -->

.container .row.thumbs div:nth-child(4n) {
    position: static;
}
.container .row.thumbs div:nth-child(4n):after {
    content: ' ';
    border-top: 1px solid black;
    display: block;
    position: absolute;
    width: 95%;
    margin-left: 2.5%;
    left: 0;
}

<!-- language: lang-html -->

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>

<section class="container">
    <div class="row thumbs">
        <div class="col-sm-3">content</div>
        <div class="col-sm-3">content</div>
        <div class="col-sm-3">content</div>
        <div class="col-sm-3">content</div>
        <div class="col-sm-3">content</div>
        <div class="col-sm-3">content</div>
        <div class="col-sm-3">content</div>
        <div class="col-sm-3">content</div>
        <div class="col-sm-3">content</div>
    </div>
    <div class="navigation">navigation</div>
</section>

<!-- end snippet -->

Also, bear in mind that this won't be natively supported in < IE8