CODEWITHSUNDEEP
htmlcsstwitter-bootstrapwebnavbar
John Siviano
John Siviano

Reputation: 33

how to increase space between nav-pills bootsrap?

my nav pills are to close and i want them spread out, any way i can change the font and font size as well?

 <div id = "page">
       <ul class="nav nav-pills" role="tablist">
      <li role="presentation" class="active"><a href="#">Home</a></li>
      <li role="presentation"><a href="#">Profile</a></li>
      <li role="presentation"><a href="#">Messages</a></li>
      <li role="presentation"><a href="#">Profile</a></li>
      <li role="presentation"><a href="#">Messages</a></li>
    </ul>

   <div>

Upvotes: 2

Views: 7763

Answers (3)

Ali Gajani
Ali Gajani

Reputation: 15091

This would do, just replace ?? with the number of your choice.

.nav-pills > li > a { margin-left:??px;margin-right:??px; }

Upvotes: 1

Ignas Damunskis
Ignas Damunskis

Reputation: 1504

Simply create new CSS file and link it in your HTML. Then write this code in it:

.nav-pills li {
    margin-left: 5px; //use whatever you want
} 

.nav-pills a {
    //use font-family and font-size to change font and size of it.
}

Just remember to link this new css file after bootstrap, so it would overwrite it.

Upvotes: 2

Benjamin J. B.
Benjamin J. B.

Reputation: 1181

you can customize margin between each li like that:

.nav-pills>li+li {
  margin-left: 10px; // 2px by default
}

Upvotes: 3

Related Questions