Pasos de trámite/formulario

Trámite/formulario básico

Estado inicial

Paso 1
Asunto
Paso 2
Recomendaciones
Paso 3
Tu petición
Paso 4
Información del contacto

<ul class="wizard-steps">
        <li>
            <h5>Paso 1</h5>
            <span>Asunto</span>
        </li>
        <li>
            <h5>Paso 2</h5>
            <span>Recomendaciones</span>
        </li>
        <li>
            <h5>Paso 3</h5>
            <span>Tu petición</span>
        </li>
        <li>
            <h5>Paso 4</h5>
            <span>Información del contacto</span>
        </li>
        <li>
            <i class="glyphicon glyphicon-ok-circle"></i>
        </li>
    </ul>

En proceso

Paso 1
Asunto
Paso 2
Recomendaciones
Paso 3
Tu petición
Paso 4
Información del contacto

<ul class="wizard-steps">
        <li class="completed">
            <h5>Paso 1</h5>
            <span>Asunto</span>
        </li>
        <li class="completed">
            <h5>Paso 2</h5>
            <span>Recomendaciones</span>
        </li>
        <li>
            <h5>Paso 3</h5>
            <span>Tu petición</span>
        </li>
        <li>
            <h5>Paso 4</h5>
            <span>Información del contacto</span>
        </li>
        <li>
            <i class="glyphicon glyphicon-ok-circle"></i>
        </li>
    </ul>

Completado

Paso 1
Asunto
Paso 2
Recomendaciones
Paso 3
Tu petición
Paso 4
Información del contacto

<ul class="wizard-steps">
        <li class="completed">
            <h5>Paso 1</h5>
            <span>Asunto</span>
        </li>
        <li class="completed">
            <h5>Paso 2</h5>
            <span>Recomendaciones</span>
        </li>
        <li class="completed">
            <h5>Paso 3</h5>
            <span>Tu petición</span>
        </li>
        <li class="completed">
            <h5>Paso 4</h5>
            <span>Información del contacto</span>
        </li>
        <li class="success">
            <i class="glyphicon glyphicon-ok-circle"></i>
        </li>
    </ul>

Trámite/formulario extenso

Estado inicial

1
Asunto
2
Recomendaciones
3
Tu petición
4
Información del contacto
5
Asunto
6
Recomendaciones
7
Tu petición
8
Información del contacto
9
Asunto
10
Recomendaciones

<ul class="wizard-steps-extensive">
        <li>
            <h5>1</h5>
            <span>Asunto</span>
        </li>
        <li>
            <h5>2</h5>
            <span>Recomendaciones</span>
        </li>
        <li>
            <h5>3</h5>
            <span>Tu petición</span>
        </li>
        <li>
            <h5>4</h5>
            <span>Información del contacto</span>
        </li>
        <li>
            <h5>5</h5>
            <span>Asunto</span>
        </li>
        <li>
            <h5>6</h5>
            <span>Recomendaciones</span>
        </li>
        <li>
            <h5>7</h5>
            <span>Tu petición</span>
        </li>
        <li>
            <h5>8</h5>
            <span>Información del contacto</span>
        </li>
        <li>
            <h5>9</h5>
            <span>Asunto</span>
        </li>
        <li>
            <h5>10</h5>
            <span>Recomendaciones</span>
        </li>
    </ul>

En proceso

1
Asunto
2
Recomendaciones
3
Tu petición
4
Información del contacto
5
Asunto
6
Recomendaciones
7
Tu petición
8
Información del contacto
9
Asunto
10
Recomendaciones

<ul class="wizard-steps-extensive">
        <li class="completed">
            <h5>1</h5>
            <span>Asunto</span>
        </li>
        <li class="completed">
            <h5>2</h5>
            <span>Recomendaciones</span>
        </li>
        <li class="completed">
            <h5>3</h5>
            <span>Tu petición</span>
        </li>
        <li>
            <h5>4</h5>
            <span>Información del contacto</span>
        </li>
        <li>
            <h5>5</h5>
            <span>Asunto</span>
        </li>
        <li>
            <h5>6</h5>
            <span>Recomendaciones</span>
        </li>
        <li>
            <h5>7</h5>
            <span>Tu petición</span>
        </li>
        <li>
            <h5>8</h5>
            <span>Información del contacto</span>
        </li>
        <li>
            <h5>9</h5>
            <span>Asunto</span>
        </li>
        <li>
            <h5>10</h5>
            <span>Recomendaciones</span>
        </li>
    </ul>

Completado

1
Asunto
2
Recomendaciones
3
Tu petición
4
Información del contacto
5
Asunto
6
Recomendaciones
7
Tu petición
8
Información del contacto
9
Asunto
10
Recomendaciones

<ul class="wizard-steps-extensive">
        <li class="completed">
            <h5>1</h5>
            <span>Asunto</span>
        </li>
        <li class="completed">
            <h5>2</h5>
            <span>Recomendaciones</span>
        </li>
        <li class="completed">
            <h5>3</h5>
            <span>Tu petición</span>
        </li>
        <li class="completed">
            <h5>4</h5>
            <span>Información del contacto</span>
        </li>
        <li class="completed">
            <h5>5</h5>
            <span>Asunto</span>
        </li>
        <li class="completed">
            <h5>6</h5>
            <span>Recomendaciones</span>
        </li>
        <li class="completed">
            <h5>7</h5>
            <span>Tu petición</span>
        </li>
        <li class="completed">
            <h5>8</h5>
            <span>Información del contacto</span>
        </li>
        <li class="completed">
            <h5>9</h5>
            <span>Asunto</span>
        </li>
        <li class="completed">
            <h5>10</h5>
            <span>Recomendaciones</span>
        </li>
    </ul>