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

September 27, 2020


  • Text on left column is right-aligned, truncated if too long
  • Support display of string or array value type
    <dl class="row">
      <template v-for="_info in infos">
        <dt class="col-3 col-md-2 text-right text-truncate">{{ }}</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 }}
          <template v-else>{{ _info.value }}</template>

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


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