Home/ Questions/Q 8538611
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T11:09:32+00:00

new to Bootstrap, following this question almost exactly, and can’t seem to make my

  • 0

new to Bootstrap, following this question almost exactly, and can’t seem to make my pills/tabs center?

</head> <body>
    <div class="container">
      <ul class="nav nav-pills">
        <li><a href="#home" data-toggle="tab">Home</a></li>
        <li><a href="#profile" data-toggle="tab">Profile</a></li>
        <li><a href="#messages" data-toggle="tab">Messages</a></li>
        <li><a href="#settings" data-toggle="tab">Settings</a></li>
      </ul>
    </div>
<html> 


.nav-tabs > li, .nav-pills > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
     zoom:1; /* hasLayout ie7 trigger */
}

.nav-pills {
    text-align:center;
}

I have the CSS in a file called style.css, and I am importing as such

<link href="style.css" rel="stylesheet" type = "text/css">

Both files are within the bootstrap folder, so not really sure what’s going on

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to override the .nav-pills css classes defined by bootstrap (as you are already doing). You should update the margin and the specify a width for the element.

    .nav-pills {
    margin: 0 auto;
    padding: 0;
    width: 400px;
}
    • 0