Bootstrap class "text-center" not working
I was facing the same problem in Bootstrap 4.1.0. Here is what I figured out:
I was doing this (having my paragraph inside div with class "row"):
<div class="container-fluid">
<div class="row" style="background-color: #009688;">
<p class="text-center" style="color: #fff;"> Meet me at</p>
</div>
</div>
Later I removed the class and it worked.
<div class="container-fluid">
<div style="background-color: #009688;">
<p class="text-center" style="color: #fff;"> Meet me at</p>
</div>
</div>
Bootstrap 3
v3 Text Alignment Docs
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
Bootstrap 4
v4 Text Alignment Docs
<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
In Bootstrap 4, for aligning center position: Use class= "mx-auto" example:
<p class="mx-auto">Kailash</p>
It will align the text horizontally center position.