Bootstrap class "text-center" not working - css

Question

<div class="input-group Flugo_group">
<h4 class="text-center">or</h4>
</div>
i am try to show in center but not working.second time using position relative but not working properly in responsive design.

Answer 1

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>

Answer 2

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>

Answer 3

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.

Answer 4

I solved it this way.
<section className="d-flex">
<span className="mx-auto">Hello World!</span>
</section>
Bootstrap v5.

Answer 5

The input group field has display: flex which causes elements inside, including your paragraph, to not be at 100% width, but the width of their content only. The text is centred, however, the length of the paragraph is only as long as the characters or. To counter this you could use mx-auto which would centre the paragraph using margin auto on the X-axis, or w-100 which will make the paragraph be 100% the length of the parent instead of just something like width: max-content. The issue here isn't with the Bootstrap utilities, but rather flexbox.
I would strongly suggest that you use input group as shown in the documentation only. This is intended to create an inline group of buttons and it is not expected to have any other elements. I would altogether suggest removing the input group class.

Answer 6

It's most likely that you have your own stylesheet and your <h4> tag has text-align: left; or something like that. It could be .input-group or .Flugo_group as well. We'd need to see your code though.
Edit: Or even something as simple as what contains any of your code could be the problem.

Answer 7

UzumakiL answer was ok so my answer is based on his example.
I tried to fix it bootstrap way and found you need to add a col to center the header.
Try add col then center the header in there.
Something like that:
<div class="container-fluid">
<div class="row bg-dark">
<div class="col-12 text-center">
<p class="text-success"> Text Center</p>
</div>
</div>
</div>
jsfiddle solution