Grilla

La grilla es la base para colocar elementos en la pantalla. Diseñar con una grilla ayuda a crear interfaces organizadas y fáciles de usar.

Layouts

container

col-12 col-xl-8

col-12 col-xl-4


  <div class="container">
    <div class="bg-primary">container</div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-12 col-xl-8">
        <div class="bg-primary">col-12 col-xl-8</div>
      </div>
      <div class="col-12 col-xl-4">
        <div class="bg-primary">col-12 col-xl-4</div>
      </div>
    </div>
  </div>

Columnas

Donde {breakpoint} es uno de: sm, md, lg, xl, xxl.
Y {quantity} es uno de: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12.

Para xs:

col-{breakpoint}

Para sm, md, lg, xl y xxl:

col-{breakpoint}-{quantity}

Disposiciones

Cuatro columnas


    <div class="max-items-4">
        <div class="col">
            <div class="bg-primary">1</div>
        </div>
        <div class="col">
            <div class="bg-primary">2</div>
        </div>
        <div class="col">
            <div class="bg-primary">3</div>
        </div>
        <div class="col">
            <div class="bg-primary">4</div>
        </div>
        <div class="col">
            <div class="bg-primary">5</div>
        </div>
    </div>

Tres columnas


    <div class="max-items-3">
        <div class="col">
            <div class="bg-primary">1</div>
        </div>
        <div class="col">
            <div class="bg-primary">2</div>
        </div>
        <div class="col">
            <div class="bg-primary">3</div>
        </div>
        <div class="col">
            <div class="bg-primary">4</div>
        </div>
        <div class="col">
            <div class="bg-primary">5</div>
        </div>
    </div>

Dos columnas


    <div class="max-items-2">
        <div class="col">
            <div class="bg-primary">1</div>
        </div>
        <div class="col">
            <div class="bg-primary">2</div>
        </div>
        <div class="col">
            <div class="bg-primary">3</div>
        </div>
    </div>

Una columna


    <div class="max-items-1">
        <div class="col">
            <div class="bg-primary">1</div>
        </div>
        <div class="col">
            <div class="bg-primary">2</div>
        </div>
        <div class="col">
            <div class="bg-primary">3</div>
        </div>
    </div>