Cards Vue

V1  (Ajusta en una linea pero no responive)
 <b-card bg-variant="Secondary" text-variant="dark" class="text-center">
                <span>Civil</span>
              </b-card>

              <b-card bg-variant="Secondary" text-variant="dark" class="text-center">
                <span>Metalmecánica</span>
              </b-card>

              <b-card bg-variant="Secondary" text-variant="dark"  class="text-center">
                <span>Electricidad</span>
              </b-card>

              <b-card bg-variant="Secondary" text-variant="dark" class="text-center">
                <span>Instrumentación</span>
              </b-card>

               <b-card bg-variant="Secondary" text-variant="dark" class="text-center">
                <span>Serv. Generales</span>
              </b-card>

              <b-card bg-variant="Secondary" text-variant="dark" class="text-center">
                <span>Mantenimiento</span>
              </b-card>

              <b-card bg-variant="Secondary" text-variant="dark" class="text-center">
                <span>Equipo Mecánico</span>
              </b-card>

              <b-card bg-variant="Secondary" text-variant="dark" class="text-center">
                <span>Gestión</span>
              </b-card>

              <b-card bg-variant="Secondary" text-variant="dark" class="text-center">
                <span>Otros</span>
              </b-card>


--------------------------------------------------------------------------------------------------------------------
V2 (Una linea no responsive pero eficiente)
<b-card-group deck>
                <template v-if="metadata.especialidad" >
                  <div v-for="choice in metadata.especialidad.children.tipo_especialidad.choices" v-bind:key="choice.value">
                    <b-card bg-variant="Secondary" text-variant="dark" class="text-center">
                      <span>
                        <strong v-if="getProp('tipo_especialidad') === choice.value">
                          {{choice.display_name}}
                        </strong>
                        <template v-else>
                          {{choice.display_name}}
                        </template>
                      </span>
                    </b-card>
                  </div>
                </template>
 </b-card-group>
-------------------------------------------------------------------------------------------------------------------
V3 (Final Responsive 2 lineas eficiente)
<div class="print-container clearfix" >
            <span><b>Especialidad</b></span>
            <b-card-group deck>
               <template v-if="metadata.especialidad" >
                  <div style = "flex-grow: 1" v-for="choice in metadata.especialidad.children.tipo_especialidad.choices" v-
                               bind:key="choice.value">
                    <b-card body bg-variant="Secondary" text-variant="dark" class="text-center">
                      <span>
                        <strong v-if="getProp('tipo_especialidad') === choice.value">
                          {{choice.display_name}}
                        </strong>
                        <template v-else>
                          {{choice.display_name}}
                        </template>
                      </span>
                    </b-card>
                  </div>
                </template>
            </b-card-group>
</div>