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

You would need to use the following markup. If you want to float any menu items to the right, create a separate <ul class="nav navbar-nav"> with navbar-right class to it.

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<html>_x000D_
_x000D_
<head>_x000D_
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>_x000D_
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
  <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">_x000D_
    <div class="container">_x000D_
      <div class="navbar-header">_x000D_
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">_x000D_
            <span class="sr-only">Toggle navigation</span>_x000D_
            <span class="icon-bar"></span>_x000D_
            <span class="icon-bar"></span>_x000D_
            <span class="icon-bar"></span>_x000D_
          </button>_x000D_
        <a class="navbar-brand" href="#">Project name</a>_x000D_
      </div>_x000D_
      <div class="collapse navbar-collapse">_x000D_
        <ul class="nav navbar-nav">_x000D_
          <li class="active"><a href="#">Home</a></li>_x000D_
          <li><a href="#about">About</a></li>_x000D_
_x000D_
        </ul>_x000D_
        <ul class="nav navbar-nav navbar-right">_x000D_
          <li><a href="#contact">Contact</a></li>_x000D_
        </ul>_x000D_
      </div>_x000D_
    </div>_x000D_
  </div>_x000D_
</body>_x000D_
_x000D_
</html>

_x000D_

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

[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