manyi/static/angular-mod/tpl/ui_grid.html

<div class="bg-light lter b-b wrapper-md">
  <h1 class="m-n font-thin h3">Grid System</h1>
</div>
<div class="wrapper-md">
  <div class="row">
    <div class="col-lg-12">
      <p>Base on Bootstrap grid system, you can get the columns as you want. 12 / (cols) = col-lg-(each-col-width-taken), like 12/3 = col-lg-4, 12/5 = col-lg-2.4 <span class="text-muted">(replace the '.' with '-')</span></p>
    </div>
    <div class="col-lg-12">
      <div class="panel panel-default">
        <div class="panel-body">col-lg-12</div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="panel panel-default">
        <div class="panel-body">col-lg-6</div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="panel panel-default">
        <div class="panel-body">col-lg-6</div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="panel panel-default">
        <div class="panel-body">col-lg-4</div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="panel panel-default">
        <div class="panel-body">col-lg-4</div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="panel panel-default">
        <div class="panel-body">col-lg-4</div>
      </div>
    </div>
    <div class="col-lg-3">
      <div class="panel panel-default">
        <div class="panel-body">col-lg-3</div>
      </div>
    </div>
    <div class="col-lg-3">
      <div class="panel panel-default">
        <div class="panel-body">col-lg-3</div>
      </div>
    </div>
    <div class="col-lg-3">
      <div class="panel panel-default">
        <div class="panel-body">col-lg-3</div>
      </div>
    </div>
    <div class="col-lg-3">
      <div class="panel panel-default">
        <div class="panel-body">col-lg-3</div>
      </div>
    </div>
    <div class="col-lg-2-4">
      <div class="panel panel-default">
        <div class="panel-body">col-lg-2-4</div>
      </div>
    </div>
    <div class="col-lg-2-4">
      <div class="panel panel-default">
        <div class="panel-body">col-lg-2-4</div>
      </div>
    </div>
    <div class="col-lg-2-4">
      <div class="panel panel-default">
        <div class="panel-body">col-lg-2-4</div>
      </div>
    </div>
    <div class="col-lg-2-4">
      <div class="panel panel-default">
        <div class="panel-body">col-lg-2-4</div>
      </div>
    </div>
    <div class="col-lg-2-4">
      <div class="panel panel-default">
        <div class="panel-body">col-lg-2-4</div>
      </div>
    </div>
    <div class="col-lg-2">
      <div class="panel panel-default">
        <div class="panel-body">col-lg-2</div>
      </div>
    </div>
    <div class="col-lg-2">
      <div class="panel panel-default">
        <div class="panel-body">col-lg-2</div>
      </div>
    </div>
    <div class="col-lg-2">
      <div class="panel panel-default">
        <div class="panel-body">col-lg-2</div>
      </div>
    </div>
    <div class="col-lg-2">
      <div class="panel panel-default">
        <div class="panel-body">col-lg-2</div>
      </div>
    </div>
    <div class="col-lg-2">
      <div class="panel panel-default">
        <div class="panel-body">col-lg-2</div>
      </div>
    </div>
    <div class="col-lg-2">
      <div class="panel panel-default">
        <div class="panel-body">col-lg-2</div>
      </div>
    </div>
    <div class="col-lg-12">
      <p>Mobile, tablet, and desktop</p>
    </div>
    <div class="col-lg-4">
      <div class="row">
        <div class="col-xs-6">
          <div class="panel panel-default">
            <div class="panel-body">col-xs-6</div>
          </div>
        </div>
        <div class="col-xs-6">
          <div class="panel panel-default">
            <div class="panel-body">col-xs-6</div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-8">
      <div class="panel panel-default">
        <div class="panel-body">col-lg-8</div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="row">
        <div class="col-sm-6">
          <div class="panel panel-default">
            <div class="panel-body">col-sm-6</div>
          </div>
        </div>
        <div class="col-sm-6">
          <div class="panel panel-default">
            <div class="panel-body">col-sm-6</div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="panel panel-default">
        <div class="panel-body">col-lg-6</div>
      </div>
    </div>
    <div class="col-lg-8">
      <div class="row">
        <div class="col-md-6">
          <div class="panel panel-default">
            <div class="panel-body">col-md-6</div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="panel panel-default">
            <div class="panel-body">col-md-6</div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="panel panel-default">
        <div class="panel-body">col-lg-4</div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="panel panel-default">
        <div class="panel-body">col-sm-6</div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="panel panel-default">
        <div class="panel-body">col-sm-6</div>
      </div>
    </div>
  </div>
</div>