[Vuejs]-Vue 3 CLI Chat app bootstrap text won't align to the left

by

0👍

I have solved my problem using flex in bootstrap.

<div v-if="equal_name(message)">
              <div class="d-flex flex-row">
                <div class="text-info">
                  [ {{ message.name }} ] : {{ message.message }}
                </div>

If I need the content aligns to the left, I use flex-row with v-if. If I need the content aligns to the right, I use flex-row-reverse and v-else

<div v-else>
              <div class="d-flex flex-row-reverse">
                <div class="text-info">
                  [ {{ message.name }} ] : {{ message.message }}
                </div>

although I still don’t know why I can’t just assign class=" text-left" or "text-right" to do the stuff above.

Leave a comment