Estilos

Componentes

Formularios

Organismos

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-lg-8
col-12 col-lg-4

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

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

Disposiciones

Cuatro columnas

1
2
3
4
5

    <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

1
2
3
4
5

    <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

1
2
3

    <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

1
2
3

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