Bootstrap - floating navbar button right

Question

I m using the bootstrap navigation bar  but I want to float one of the buttons to the right instead of the left as it already is  Here s the HTML         lt div class  navbar navbar-inverse navbar-fixed-top  role  navigation  gt     lt div class  container  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 Project name lt  a gt       lt  div gt       lt div class  collapse navbar-collapse  gt         lt ul class  nav navbar-nav  gt           lt li class  active  gt  lt a href     gt Home lt  a gt  lt  li gt           lt li gt  lt a href   about  gt About lt  a gt  lt  li gt           lt li gt  lt a href   contact  class  navbar-nav pull-right  gt Contact lt  a gt  lt  li gt         lt  ul gt       lt  div gt     lt  div gt   lt  div gt    I ve tried using nav navbar-nav navbar-right  float right  and pull-right  I really don t know what else I could do  Any help is appreciated   JSFiddle

User · Answer

In bootstrap 4 use    lt ul class  nav navbar-nav ml-auto  gt    This will push the navbar to the right  Use mr-auto to push it to the left  this is the default behaviour

User · Answer

Create a separate ul nav for just that list item and float that ul right   jsFiddle

User · Answer

You would need to use the following markup  If you want to float any menu items to the right  create a separate  lt ul class  nav navbar-nav  gt  with navbar-right class to it    x000D   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt html gt  x000D   x000D   lt head gt  x000D     lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D     lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet    gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D     lt div class  navbar navbar-inverse navbar-fixed-top  role  navigation  gt  x000D       lt div class  container  gt  x000D         lt div class  navbar-header  gt  x000D           lt button type  button  class  navbar-toggle  data-toggle  collapse  data-target   navbar-collapse  gt  x000D               lt span class  sr-only  gt Toggle navigation lt  span gt  x000D               lt span class  icon-bar  gt  lt  span gt  x000D               lt span class  icon-bar  gt  lt  span gt  x000D               lt span class  icon-bar  gt  lt  span gt  x000D             lt  button gt  x000D           lt a class  navbar-brand  href     gt Project name lt  a gt  x000D         lt  div gt  x000D         lt div class  collapse navbar-collapse  gt  x000D           lt ul class  nav navbar-nav  gt  x000D             lt li class  active  gt  lt a href     gt Home lt  a gt  lt  li gt  x000D             lt li gt  lt a href   about  gt About lt  a gt  lt  li gt  x000D   x000D           lt  ul gt  x000D           lt ul class  nav navbar-nav navbar-right  gt  x000D             lt li gt  lt a href   contact  gt Contact lt  a gt  lt  li gt  x000D           lt  ul gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

[html] Bootstrap - floating navbar button right

Examples related to html

Examples related to css

Examples related to css-float

Examples related to twitter-bootstrap-3