Changing the space between each item in Bootstrap navbar

Question

How can I create a larger space between each link on my navbar  so they are further apart  Is it something I change the CSS or HTML  Here s how I ve implemented my navbar in the html    lt div class  navbar-wrapper  gt   lt div class  container  gt       lt div class  navbar navbar-static-top  role  navigation  gt       lt div class  container full-width  gt       lt div class  navbar-header  gt             lt button type  button  class  navbar-toggle  data-toggle  collapse  data-target   navbar-collapse  gt               lt span class  sr-only  gt Toggle navigation lt  span gt               lt span class  icon-bar  gt  lt  span gt               lt span class  icon-bar  gt  lt  span gt               lt span class  icon-bar  gt  lt  span gt             lt  button gt           lt a class  navbar-brand  href     gt  lt  a gt        lt  div gt        lt div class  navbar-collapse collapse  gt           lt ul class  nav navbar-nav navbar-right  gt               lt li class  active  gt  lt a href   home page  gt Home lt  a gt  lt  li gt               lt li gt  lt a href   about page  gt About lt  a gt  lt  li gt               lt li gt  lt a href   portfolio page  gt Portfolio lt  a gt  lt  li gt               lt li gt  lt a href   contact page  gt Contact lt  a gt  lt  li gt           lt  ul gt        lt  div gt        lt  div gt        lt  div gt   lt  div gt   lt  div gt

User · Accepted Answer

You can change this in your CSS with the property padding:

.navbar-nav > li{
  padding-left:30px;
  padding-right:30px;
}

Also you can set margin

.navbar-nav > li{
  margin-left:30px;
  margin-right:30px;
}

User · Answer

As of Bootstrap 4  you can use the spacing utilities   Add for instance px-2 in the classes of the nav-item to increase the padding

User · Answer

Just remember that modifying the padding or margins on any bootstrap grid elements is likely to create overflowing elements at some point at lower screen-widths   If that happens just remember to use CSS media queries and only include the margins at screen-widths that can handle it   In keeping with the mobile-first approach of the framework you are working within  bootstrap  it is better to add the padding at widths which can handle it  rather than excluding it at widths which can t    media  min-width  992px        navbar li           margin-left   1em          margin-right   1em

User · Answer

I would suggest you just evenly space them as shown in this answer here   navbar ul     list-style-type  none    padding  0    display  flex    flex-direction  row    justify-content  space-around    flex-wrap  nowrap     assumes you only want one row

User · Answer

With regard to bootstrap  the correct answer is using spacing utilities as mentioned by loopasam in a previous comment  Following is an example of using padding for both left and right   lt a href  quot   quot  class  quot nav-item nav-link px-3 quot  gt Blog lt  a gt

[html] Changing the space between each item in Bootstrap navbar

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to navbar