When working with backbone, marionette and twitter bootstrap, often I want to create a Marionette.Layout that maps a Twitter bootstrap row. Here's a simple function to generate a Layout from column sizes + names.

backbone-bootstrap-row.js

var bootstrapRow = function(cols, names) {
  var snippets = _.map(cols, function(col) {
    return "<div class='col-md-" + col + "'></div>";
  });
  var regions = {};
  _.each(names, function(name, index) {
    regions[name] = ">:nth-child(" + (index+1) + ")";
  });
  var GridLayout = Backbone.Marionette.Layout.extend({
    className: "row",
    template: _.template(snippets.join("")),
    regions: regions
  });
  return new GridLayout();
};

// ... example usage:

var rowView = bootstrapRow([4, 8], ["sidebar", "content"]);
$(document.body).append(rowView.el);
rowView.render();

rowView.sidebar.show(mySidebarView);
rowView.content.show(myContentView);

result.html

<!-- DOM generated by bootstrap row layout view -->
<div class="row">
  <div class="col-md-4">
    <!-- mySideBarView DOM -->
  </div>
  <div class="col-md-8">
    <!-- myContentView DOM -->
  </div>
</div>