Bootstrap 3.0 - Grid System

by Pankaj Kargirwar

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class='container'>
  <div class='row'>

    <div class="ctr col-sm-3">
      <img src="http://placehold.it/900x500/39CCCC/ffffff&text=I+Love+Bootstrap" />
    </div>
    <div class="ctr col-sm-3">
      <img src="http://placehold.it/900x500/99CCCD/ffffff&text=I+Love+Bootstrap" />
    </div>
    <div class="ctr col-sm-3">
      <img src="http://placehold.it/900x500/29CCCE/ffffff&text=I+Love+Bootstrap" />
    </div>
    <div class="ctr col-sm-3">
      <img src="http://placehold.it/900x500/49CCCF/ffffff&text=I+Love+Bootstrap" />
    </div>

  </div>
</div>

CSS

.ctr {
  background: #eeeeee;
}

img {
  width: 100%;
}

.img {
  background: #444444;
  color: white;
  text-align: center
}

JavaScript

$(".row").sortable();