<template>
  <div>
    <p class="text-left">
      Left aligned on all viewport sizes.
    </p>
    <p class="text-center">
      Center aligned on all viewport sizes.
    </p>
    <p class="text-right">
      Right aligned on all viewport sizes.
    </p>

    <p class="text-sm-left">
      Left aligned on viewports SM (small) or wider.
    </p>
    <p class="text-right text-md-left">
      Left aligned on viewports MD (medium) or wider.
    </p>
    <p class="text-right text-lg-left">
      Left aligned on viewports LG (large) or wider.
    </p>
    <p class="text-right text-xl-left">
      Left aligned on viewports XL (extra-large) or wider.
    </p>
  </div>
</template>
