Issue
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
Solution
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;
}
Answered By - John Dyer
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.