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

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