How to put the navbar in bootstrap on the left?

Question

i am trying to create a navbar from Bootstrap. The name, about,portfolio, contact and more should be in the same line. Except the more on the right, the others should be on the left. However, by my code, all of them are shown in the middle. I tried several way to fix, however, no function. Could you give me some suggestions? Thanks. The code likes follows:

`<body>
    <nav class="navbar navbar-inverse" role = "navigation">
    <div class = "container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Name</a>
        </div>
        <ul class="nav nav-pills">
            <li class = "active"><a href ="#">ABOUT</a></li>
            <li><a href = "#">PORTFOLIO</a></li>
            <li><a href = "#">CONTACT</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right"> 
            <li><a href="#"><span class="glyphicon glyphicon-user"></span>Contact</a></li>
        </ul>
    </div>
    </nav>
</body>`

Thank you. It works. Just a little bit confusion.Base on the introduction about Navbar from W3school. The class of navbar should be on the left by default. Why in my case, the "pull-left" have to be used instead of by default? — peter, Jun 11 '17 at 22:28
Maybe this is what you are looking for https://stackoverflow.com/questions/19733447/bootstrap-navbar-with-left-center-and-right-aligned-items — Marshall, Jun 12 '17 at 02:22

score 1 · Answer 1 · answered Jun 11 '17 at 19:40

try to add class left in your div that want it be left

.left {
  float: left !important;
}

<ul class="nav nav-pills left">
   <li class = "active"><a href ="#">ABOUT</a></li>
   <li><a href = "#">PORTFOLIO</a></li>
   <li><a href = "#">CONTACT</a></li>
</ul>

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

Bootstrap have a class called pull-left which add float: left !important; to the element.

.pull-left

.pull-left {
  float: left !important;
}

REF: https://github.com/twbs/bootstrap/blob/v3.3.7/dist/css/bootstrap.css#L6519-L6524

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<body>
  <nav class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header pull-left">
        <a class="navbar-brand" href="#">Name</a>
      </div>
      <ul class="nav nav-pills pull-left">
        <li class="active"><a href="#">ABOUT</a></li>
        <li><a href="#">PORTFOLIO</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span>Contact</a></li>
      </ul>
    </div>
  </nav>
</body>

How to put the navbar in bootstrap on the left?

2 Answers2

.pull-left