Text

<p class="text-left">Left aligned</p>
<p class="text-center">Center aligned</p>
<p class="text-right">Right aligned</p>

<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p class="text-left text-sm-right">Right aligned on small (sm) viewport or wider.</p>
<p class="text-left text-md-right">Right aligned on medium (md) viewport or wider.</p>
<p class="text-left text-lg-right">Right aligned on large (lg) viewport or wider.</p>
<p class="text-left text-xl-right">Right aligned on extra large (xl) viewport or wider.</p>

<p class="text-uppercase">This is a uppercased text.</p>
<p class="text-lowercase">This is a lowercased text.</p>
<p class="text-capitalize">This is a capitalized text.</p>

<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p>
<p class="font-italic">Italic text.</p>

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-warning">.text-warning</p>
<p class="text-danger">.text-danger</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>

<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-body">Body link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark mb-0">White link</a></p>

<div class="badge badge-primary text-wrap" style="width: 100px;">Lorem ipsum dolor sit amet</div>
<div class="text-no-wrap" style="width: 100px;">Lorem ipsum dolor sit amet</div>

<!-- Block level -->
<div class="row">
    <div class="col-2 text-truncate">
        Lorem ipsum dolor sit amet.
    </div>
</div>

<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
    Lorem ipsum dolor sit amet.
</span>

<p class="text-break">SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS</p>

<p><a href="#" class="text-decoration-none">Link without underline</a></p>

<p class="text-muted">Muted text with a <a href="#">normal link</a></p>
<p class="text-muted">Muted text with a <a href="#" class="text-reset">reset link</a></p>