How to center text in Bootstrap
Add class .text-center
to the parent div to align text or any item inside to the
center.
<div class="text-center">
I am centered
</div>
You can also decide how the alignment should look like on the specific screen sizes.
Easily realign text to components with text alignment classes. For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
Left aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
Right aligned text on all viewport sizes.
Left aligned text on viewports sized SM (small) or wider.
Left aligned text on viewports sized MD (medium) or wider.
Left aligned text on viewports sized LG (large) or wider.
Left aligned text on viewports sized XL (extra-large) or wider.
<p class="text-start">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">Right aligned text on all viewport sizes.</p>
<p class="text-sm-start">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-start">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-start">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-start">
Left aligned text on viewports sized XL (extra-large) or wider.
</p>