Text in Bootstrap footer aligning to center

Question

The footer in my webpage is aligned to the center.

<div id="footer">
  <div class="container">
    <p class="text-muted credit" style="color:#fff">xyz</p>
  </div>
</div>

This code works perfectly for other pages but for this particular page it doesn't work. This page contains a fullcalender UI that I have plugged but I doubt that has anything to do with my issue.

Solution 1

Try adding the "text-center" class to the container. So you will end up with this:

<div id="footer">
  <div class="container text-center">
    <p class="text-muted credit" style="color:#fff">xyz</p>
  </div>
</div>

See if that works. Otherwise, maybe paste your markup for the page so that we can look at it. It would also be helpful if you inspected the footer element with chrome for example and attached the screenshot of it.

Solution 2

For me with Bootstrap 3 don't forget to specified col-md-12 col-sm-12 and col-xs-12 to work.

Other things avoid using style="color:#fff" it breaks color theme. Use navbar-text instead. So you should have something like this :

<nav class="navbar navbar-default  navbar-fixed-bottom" role="navigation">
    <div class="container text-center">
        <p class="navbar-text col-md-12 col-sm-12 col-xs-12">&copy; xyz</p>
    </div>
</nav>

Last word, use container and not container-fluid

Comments

[Nitin]

I thought and I read at many places that col-xs-12 gets applied by default for small screens. I am stuck with the same problem.

[Wilf]

This is solve my day. Keep searching around and bang with container only!