CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
4thSpace
4thSpace

Reputation: 44312

How to center Bootstrap navbar?

I've seen a few examples that try to center the Bootstrap navbar but I can't get any of them to work. I've tried style="text-align:center" on the nav, div and ul but it doesn't have any effect.

Any ideas what I'm doing wrong?

<!DOCTYPE html>
<html>

<head>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container">


    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <ul class="nav nav-pills">
          <li><a role="presentation" href="#">Link1</a></li>
          <li><a role="presentation" href="#">Link2</a></li>
          <li><a role="presentation" href="#">Link3</a></li>
          <li><a role="presentation" href="#">Link4</a></li>
        </ul>
      </div>
    </nav>

  </div>
</body>

</html>

https://plnkr.co/edit/EDf9leSPZVoS4l9dQCfv?p=preview

Upvotes: 0

Views: 76

Answers (2)

Ahmad Sharif
Ahmad Sharif

Reputation: 4435

.nav {
    padding-left: 0px;
    margin-bottom: 0px;
    list-style: none;
    display : table; // Add this
    margin: auto; // Add this
}

Add last two css styles in bootstrap 3963 no line. https://plnkr.co/edit/HAvko7diBJvtZRB5Vuxn?p=preview

Upvotes: 1

Alejandro Maliachi Quintana
Alejandro Maliachi Quintana

Reputation: 373

The problem is that ur "nav nav-pills li" have a default "float:left" in ur css. That makes that ur text-align never work because float will always overwritte any other text properties.

One way to fix this is copying the next declarations in ur css file:

.nav {
   padding-left: 0;
   margin-bottom: 0;
   list-style: none;
   text-align: center;
}
.nav-pills>li {
   float: none !important;
   display: inline-block;
}

Hope this works

Upvotes: 1

Related Questions