Bootstrap class "text-center" not working

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.

Solution 1

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>

Solution 2

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>

Solution 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.

Solution 4

I solved it this way.

<section className="d-flex">
    <span className="mx-auto">Hello World!</span>
</section>

Bootstrap v5.

Solution 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.

View more solutions