DSO Component Library

Grid 

<!-- Default -->
<section class="grid-example">
    <div class="row">
        <div class="col-sm-4 col-md-2">
            <div class="col">sm-4 md-2</div>
        </div>
        <div class="col-sm-8 col-md-10">
            <div class="col">sm-8 md-10</div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-5 col-md-4">
            <div class="col">sm-5 md-4</div>
        </div>
        <div class="col-sm-7 col-md-8">
            <div class="col">sm-7 md-8</div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div class="col">sm-6</div>
        </div>
        <div class="col-sm-6">
            <div class="col">sm-6</div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-7 col-md-8">
            <div class="col">sm-7 md-8</div>
        </div>
        <div class="col-sm-5 col-md-4">
            <div class="col">sm-5 md-4</div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-8 col-md-10">
            <div class="col">sm-8 md-10</div>
        </div>
        <div class="col-sm-4 col-md-2">
            <div class="col">sm-4 md-2</div>
        </div>
    </div>
</section>


<!-- 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>


<!-- Ordered -->
<section class="grid-example">
    <div class="row">
        <div class="col-sm-5 col-sm-push-7 col-md-4 col-md-push-8">
            <div class="col">sm-5 sm-push-7 md-4 md-push-8</div>
        </div>
        <div class="col-sm-7 col-sm-pull-5 col-md-8 col-md-pull-4">
            <div class="col">sm-7 sm-pull-5 md-8 md-pull-4</div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-7 col-sm-push-5 col-md-8 col-md-push-4">
            <div class="col">sm-7 sm-push-5 md-8 md-push-4</div>
        </div>
        <div class="col-sm-5 col-sm-pull-7 col-md-4 col-md-pull-8">
            <div class="col">sm-5 sm-pull-7 md-4 md-pull-8</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>
 
/* Default */
rows:
  - columns:
      - - sm-4
        - md-2
      - - sm-8
        - md-10
  - columns:
      - - sm-5
        - md-4
      - - sm-7
        - md-8
  - columns:
      - - sm-6
      - - sm-6
  - columns:
      - - sm-7
        - md-8
      - - sm-5
        - md-4
  - columns:
      - - sm-8
        - md-10
      - - sm-4
        - md-2



/* Offset */
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



/* Ordered */
rows:
  - columns:
      - - sm-5
        - sm-push-7
        - md-4
        - md-push-8
      - - sm-7
        - sm-pull-5
        - md-8
        - md-pull-4
  - columns:
      - - sm-7
        - sm-push-5
        - md-8
        - md-push-4
      - - sm-5
        - sm-pull-7
        - md-4
        - md-pull-8

Voor meer informatie zie Bootstrap Grid system documentatie

WARNING: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage

This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.

<div class="col">sm-4 md-2</div>

NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2

Check that the title element describes the document.

<title>Grid