CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
adraedin
adraedin

Reputation: 27

Centering a bootstrap footer

I'm trying to center a bootstrap footer on my page and I'm having problems. Right now, it's left aligned by default and I can't seem to find how to fix it after a many attempts over the last week - I'm stumped. Here's the code that I have so far...

Thanks for your help!

<footer>
  <div class="navbar navbar-inverse navbar-fixed-bottom">
    <div class="container">
      <div class="navbar-collapse collapse" id="footer">
        <ul class="nav navbar-nav">
          <li><a href="about.php">about</a></li>
          <li><a href="faq.php">faq</a></li>
          <li><a href="contact_feedback.php">contact us</a></li>
          <li><a href="contributions.php">donate</a></li>
          <li><a href="terms_of_use.php">terms of use</a></li>
          <li><a href="privacy_policy.php">privacy policy</a></li>
        </ul>
      </div>

      <div class="navbar-footer">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#footer">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
    </div>
  </div>
</footer>

Upvotes: 2

Views: 4161

Answers (3)

cnorthfield
cnorthfield

Reputation: 3501

Using text-align:center; will take care of centring the text inside of their containers. As for the footer, you should put a div or any other container around the <footer> tag with the class "container" to center the footer. Alternatively just give the class container to your footer tag i.e.

<footer class="container">
    <!-- footer content etc -->
</footer>

It depends on your layout and style requirements!

Upvotes: 1

APAD1
APAD1

Reputation: 13666

No need to alter your HTML, just add the following CSS to override Bootstrap's defaults:

.navbar-nav {
  text-align:center;
  float:none;
}
  .navbar-nav li {
      display:inline-block;
      float:none;
  }

Bootply example

Upvotes: 4

Kighted
Kighted

Reputation: 64

could you put your footer within a row? Then you could put it in the center column.

<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
--- Your footer ---
</div>
<div class="col-md-2">
</div>

Upvotes: 2

Related Questions