Solution 1 :

You can easily solve this problem by making the margin of div container to auto that will make it align center to the page
Make your div:

<div class="container text-center">


<div class="container my-auto text-center">

Solution 2 :

It turned out it happened on specific browser on phone, the one that shows website incorrectly is UC Browser. You can check it out on your own at this website:

Solution 3 :

horizontal center

justify-content: center;

vertical center

align-items: center; 

Problem :

This is my code:

<div class="container text-center">

   <a href="" class="btn btn-primary" ng-mousemove="count = count + 1"> Counter </a>
   <h2>{{ count }}</h2>

I us3e bootstrap so this text-center should do the job and give an effect to this >h2> element. But it works only partial that is on high resolution it works but on my mobile phone does not. How to solve this?

This is my screenshot of website on my phone:

enter image description here


Comment posted by BeHappy

You have to use that class for

Comment posted by Abc Def

How to do that?

Comment posted by BeHappy

You want to center

Comment posted by Abc Def


Comment posted by BeHappy

I test it there is no problem. would you share image? Or create codesandbox

Comment posted by Abc Def

I added this in my CSS h2 { justify-content: center; align-items: center; } but it does not work


Leave a Reply

Your email address will not be published. Required fields are marked *