CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
peter
peter

Reputation: 39

How to put the navbar in bootstrap on the left?

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>`

Upvotes: 2

Views: 3520

Answers (2)

Dalin Huang
Dalin Huang

Reputation: 11342

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>

Upvotes: 1

Mousa Saleh
Mousa Saleh

Reputation: 38

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>

Upvotes: 1

Related Questions