Lay-out

Component preview opent in nieuw tabblad

Voor meer informatie over het gebruik van de classes .row, .col-xx-xx zie documentatie over lay-out

<h1>Voorbeeld grid lay-out</h1>
<section class="grid-example">

    <div class="row">

        <div class="col-xs-12">
            <div class="col">xs-12</div>
        </div>

    </div>

    <div class="row">

        <div class="col-xs-6">
            <div class="col">xs-6</div>
        </div>

        <div class="col-xs-6">
            <div class="col">xs-6</div>
        </div>

    </div>

    <div class="row">

        <div class="col-xs-4">
            <div class="col">xs-4</div>
        </div>

        <div class="col-xs-4">
            <div class="col">xs-4</div>
        </div>

        <div class="col-xs-4">
            <div class="col">xs-4</div>
        </div>

    </div>

    <div class="row">

        <div class="col-xs-3">
            <div class="col">xs-3</div>
        </div>

        <div class="col-xs-3">
            <div class="col">xs-3</div>
        </div>

        <div class="col-xs-3">
            <div class="col">xs-3</div>
        </div>

        <div class="col-xs-3">
            <div class="col">xs-3</div>
        </div>

    </div>

    <div class="row">

        <div class="col-xs-12 col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
            <div class="col">xs-12 sm-12 md-10 md-offset-1 lg-8 lg-offset-2</div>
        </div>

    </div>

</section>
<h1>Voorbeeld grid lay-out</h1>
<section class="grid-example">
  {% for row in rows %}
    <div class="row">
      {% for column in row.columns %}
        <div {{ className(column | prefix('col-') | join(' ')) }}>
          <div class="col">{{ column | join(' ') }}</div>
        </div>
      {% endfor %}
    </div>
  {% endfor %}
</section>
rows:
  - columns:
      - - xs-12
  - columns:
      - - xs-6
      - - xs-6
  - columns:
      - - xs-4
      - - xs-4
      - - xs-4
  - columns:
      - - xs-3
      - - xs-3
      - - xs-3
      - - xs-3
  - columns:
      - - xs-12
        - sm-12
        - md-10
        - md-offset-1
        - lg-8
        - lg-offset-2