Arbitrary nested grids in Bootstrap

_nested-grids-mixins.less

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width; @columns-total: @grid-columns) {
  position: relative;
  float: left;
  width: percentage((@columns / @columns-total));
  min-height: 1px;
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);
}
.make-xs-column-offset(@columns; @columns-total: @grid-columns) {
  margin-left: percentage((@columns / @columns-total));
}
.make-xs-column-push(@columns; @columns-total: @grid-columns) {
  left: percentage((@columns / @columns-total));
}
.make-xs-column-pull(@columns; @columns-total: @grid-columns) {
  right: percentage((@columns / @columns-total));
}


// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width; @columns-total: @grid-columns) {
  position: relative;
  min-height: 1px;
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @columns-total));
  }
}
.make-sm-column-offset(@columns; @columns-total: @grid-columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @columns-total));
  }
}
.make-sm-column-push(@columns; @columns-total: @grid-columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @columns-total));
  }
}
.make-sm-column-pull(@columns; @columns-total: @grid-columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @columns-total));
  }
}


// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width; @columns-total: @grid-columns) {
  position: relative;
  min-height: 1px;
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @columns-total));
  }
}
.make-md-column-offset(@columns; @columns-total: @grid-columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @columns-total));
  }
}
.make-md-column-push(@columns; @columns-total: @grid-columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @columns-total));
  }
}
.make-md-column-pull(@columns; @columns-total: @grid-columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @columns-total));
  }
}


// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width; @columns-total: @grid-columns) {
  position: relative;
  min-height: 1px;
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @columns-total));
  }
}
.make-lg-column-offset(@columns; @columns-total: @grid-columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @columns-total));
  }
}
.make-lg-column-push(@columns; @columns-total: @grid-columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @columns-total));
  }
}
.make-lg-column-pull(@columns; @columns-total: @grid-columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @columns-total));
  }
}

example.html

 <div class="container">
   <div class="page-row">
     <div class="banner">
       <div class="colored-content">Текст внутри</div>
     </div>
     <div class="page-content">
       <div class="row">
         <div class="places">
           <div class="row">
             <div class="img">
               <div class="colored-content">Текст внутри</div>
             </div>
           </div>
           <div class="row">
             <div class="places-menu">
               <div class="colored-content">Текст внутри</div>
             </div>
             <div class="places-text">
               <div class="colored-content">Текст внутри</div>
             </div>
           </div>
         </div>
         <div class="articles">
           <div class="row">
             <div class="img">
               <div class="colored-content">Текст внутри</div>
             </div>
           </div>
           <div class="row">
             <div class="articles-menu">
               <div class="colored-content">Текст внутри</div>
             </div>
             <div class="articles-text">
               <div class="colored-content">Текст внутри</div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
   <div class="page-row">
     <div class="footer-elt">
       <div class="colored-content">Текст внутри</div>
     </div>
     <div class="footer-elt">
       <div class="colored-content">Текст внутри</div>
     </div>
     <div class="footer-elt">
       <div class="colored-content">Текст внутри</div>
     </div>
     <div class="footer-elt">
       <div class="colored-content">Текст внутри</div>
     </div>
     <div class="footer-elt">
       <div class="colored-content">Текст внутри</div>
     </div>
     <div class="footer-elt">
       <div class="colored-content">Текст внутри</div>
     </div>
     <div class="footer-elt">
       <div class="colored-content">Текст внутри</div>
     </div>
     <div class="footer-elt">
       <div class="colored-content">Текст внутри</div>
     </div>
     <div class="footer-elt">
       <div class="colored-content">Текст внутри</div>
     </div>
     <div class="footer-elt">
       <div class="colored-content">Текст внутри</div>
     </div>
     <div class="footer-elt">
       <div class="colored-content">Текст внутри</div>
     </div>
     <div class="footer-elt">
       <div class="colored-content">Текст внутри</div>
     </div>
     <div class="footer-elt">
       <div class="colored-content">Текст внутри</div>
     </div>
   </div>
</div>

grid-example.less

@page-grid: 13;
@page-padding: 1;
@page-content: @page-grid - ( @page-padding * 2 );
@content-column-gap: 1;
@content-column: ( @page-content - @content-column-gap ) / 2;
@column-menu: 2;
@column-text: @content-column - @column-menu;

.page-row {
  .make-row();
}

.page-content{
  .make-md-column( @page-content; @grid-gutter-width; @page-grid );
  .make-md-column-offset( @page-padding; @page-grid );
  overflow: hidden;
  
  .colored-content {
    background-color: #ffdbe3;
    min-height: 5em;
  }
}

.banner {
  .make-md-column( @page-grid; @grid-gutter-width; @page-grid );
  .make-lg-column( @page-content; @grid-gutter-width; @page-grid );
  .make-lg-column-offset( @page-padding; @page-grid );
  
  .colored-content {
    height: 3em;
    background-color: #3da8e0;
    margin-bottom: 1em;
  }
}

.places {
  .make-md-column( @content-column; @grid-gutter-width; @page-content );

  .colored-content {
    background-color: #ababab;
    min-height: 5em;
    margin-bottom: 1em;
  }
}

.places-menu {
  .make-xs-column( @column-menu; @grid-gutter-width; @content-column );
  
  .colored-content {
    height: 3em;
    background-color: #cc69ff;
  }
}

.places-text {
  .make-xs-column( @column-text; @grid-gutter-width; @content-column );
  
  .colored-content {
    height: 5em;
    background-color: #ff705a;   
  }
}

.articles {
  .make-md-column( @content-column; @grid-gutter-width; @page-content );
  .make-md-column-offset( @content-column-gap; @page-content );
  
  .colored-content {
    margin-bottom: 1em;
  }
}
.articles-menu {
  .make-xs-column( @column-menu; @grid-gutter-width; @content-column );
  
  .colored-content {
    height: 3em;
    background-color: #24ff81;
  }
}

.articles-text {
  .make-xs-column( @column-menu; @grid-gutter-width; @content-column );
  .make-xs-column-offset( 1; @content-column );
  
  .colored-content {
    height: 3em;
    background-color: #99c949;
  }
}

.img {
  .make-md-column( 1; @grid-gutter-width; 1 );
  
  .colored-content {
    background-color: #cfd674;
    height: 10em;
  }
}

.footer-elt {
  .make-sm-column( 1; @grid-gutter-width; @page-grid );
  
  .colored-content {
    min-height: 3em;
    background-color: #b6b1b9;
    margin-bottom: 1em;
  }
}