Bootstrap Description List Alignment - 2 columns key and value display (with Vue.js)

September 27, 2020

Behaviour

  • Text on left column is right-aligned, truncated if too long
  • Support display of string or array value type
<template>
  <div>
    <dl class="row">
      <template v-for="_info in infos">
        <dt class="col-3 col-md-2 text-right text-truncate">{{ _info.name }}</dt>
        <dd class="col-9 col-md-10">
          <template v-if="_info.type == 'list'">
            <ul class="list-inline">
              <li v-for="_item in _info.value">
                {{ _item }}
              </li>
            </ul>
          </template>
          <template v-else>{{ _info.value }}</template>
        </dd>
      </template>
    </dl>
  </div>
</template>

<script>
export default {
  data() {
    return {
      infos: [
        { name: 'Name', value: 'Desmond' },
        { name: 'Age', value: 40 },
        { name: 'Hobbies', type: 'list', value: ['Hiking', 'Coding'] }
      ]
    }
  }
}
</script>

References:

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.