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.

Perhaps you have styles conflicts with other components. Post a link or put your code in the editor and it will be easier to help you — Mat, Dec 18 '16 at 15:46
Flugo_group class is not any components it's own define class for bootstrap customize. i am using only bootstrap — Archin Modi, Dec 18 '16 at 16:15
Now I am using bootstrap 4. http://stackoverflow.com/a/15140080/5724267. And it's work. — Archin Modi, Dec 19 '16 at 16:49

UzumakiL · Answer 1 · 2018-05-22T16:01:38.917

25

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>

edited May 22 '18 at 16:01

answered May 22 '18 at 03:07

UzumakiL

373
3
9

2

Same thing happened to me in Bootstrap 4.1, had to remove the row class. – Peter Girnus May 28 '18 at 23:32

score 17 · Accepted Answer · answered Apr 27 '17 at 11:55

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>

That page indicates the non-viewport-specific class should work as well. — crenshaw-dev, Dec 14 '17 at 19:39
With bootstrap 4, `text-center` works the same as `text-xs-center`. In my case I had forgotten to [install bootstrap before react-bootstrap](https://stackoverflow.com/a/56539469/332578) — Jacksonkr, Sep 03 '20 at 13:28

score 7 · Answer 3 · answered Jul 13 '20 at 02:55

7

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.

answered Jul 13 '20 at 02:55

nedam Kailash

165
1
9

score 3 · Answer 4 · answered May 19 '21 at 06:29

3

I solved it this way.

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

Bootstrap v5.

answered May 19 '21 at 06:29

Jordan Borja

31
1

score 2 · Answer 5 · answered May 19 '21 at 07:40

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.

score 1 · Answer 6 · answered Dec 18 '16 at 19:52

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.

score 1 · Answer 7 · edited Nov 22 '20 at 07:49

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

Bootstrap class "text-center" not working

7 Answers7

Bootstrap 3

Bootstrap 4