Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

by amorris

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div class="container-fluid">
  <div class="navbar navbar-default">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">jQuery-sortable on Bootstrap Grid</a>
    </div>
  </div>

  <div id='view_content' class='container col-md-12'>
    <div class='row'>
    </div>
  </div>
  
</div>

CSS

/* Latest compiled and minified CSS included as External Resource*/


/* Optional theme */

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
  margin: 10px;
}

.placeholder {
  width: 25%;
  float: left;
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.placeholder .panel {
  background-color: grey;
  -webkit-box-shadow: 0px 0px 10px #888;
  -moz-box-shadow: 0px 0px 10px #888;
  box-shadow: 0px 0px 10px #888;
}

JavaScript

/* Latest compiled and minified JavaScript included as External Resource */

widget_template = _.template('<div id="widget_<%= title %>" class="widget_block col-xs-3"><div class="panel panel-default"><div class="panel-body"><h4><%= title %></h4></div></div></div>')

widget_titles = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'];
_.each(widget_titles, function(title) {
  $('#view_content .row').append(widget_template({
    title: title
  }));
});

placeholder_html = '<div class="placeholder col-xs-3"><div class="panel panel-default"><div class="panel-body"><h4>&nbsp;</h4></div></div></div>';

$("#view_content .row").sortable({
  itemSelector: '.widget_block',
  placeholder: placeholder_html,
  containerSelector: '#view_content .row'
})