DSO Component Library

Grid: Offset 

<section class="grid-example">
    <div class="row">
        <div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
            <div class="col">sm-6 sm-offset-3 md-4 md-offset-4</div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-3 col-md-4">
            <div class="col">sm-3 md-4</div>
        </div>
        <div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
            <div class="col">sm-6 sm-offset-3 md-4 md-offset-4</div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4 col-md-6">
            <div class="col">sm-4 md-6</div>
        </div>
        <div class="col-sm-7 col-sm-offset-1 col-md-4 col-md-offset-2">
            <div class="col">sm-7 sm-offset-1 md-4 md-offset-2</div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-8 col-sm-offset-4 col-md-10 col-md-offset-2">
            <div class="col">sm-8 sm-offset-4 md-10 md-offset-2</div>
        </div>
    </div>
</section>
 
<section class="grid-example">
  {{#each rows }}
    <div class="row">
      {{#each columns }}
        <div class="{{join (prefix this 'col-') ' ' }}">
          <div class="col">{{join this ' ' }}</div>
        </div>
      {{/each}}
    </div>
  {{/each}}
</section>
 
rows:
  - columns:
      - - sm-6
        - sm-offset-3
        - md-4
        - md-offset-4
  - columns:
      - - sm-3
        - md-4
      - - sm-6
        - sm-offset-3
        - md-4
        - md-offset-4
  - columns:
      - - sm-4
        - md-6
      - - sm-7
        - sm-offset-1
        - md-4
        - md-offset-2
  - columns:
      - - sm-8
        - sm-offset-4
        - md-10
        - md-offset-2

Voor meer informatie zie Bootstrap Grid system documentatie