1

I am trying to build a very simple navbar with bootstap according to some online tutorials.

I am trying to align the navbar items horizontally but I keep getting the following formation:

enter image description here

My code is the following:

 <body> <nav class='navbar navbar-inverse'> <div class='container-fluid'> <div class='navbar-header'> <a href='#' class='navbar-brand'> $Whoami </a> </div> <ul class='nav navbar-inverse navbar-custom'> <li ><a href='#'>Skills</a></li> <li ><a href='#'>Interests</a></li> <li ><a href='#'>Contact</a></li> </ul> </div> </nav> <h1> Hello World! </h1> </body>
Improve this question
3
  • use the "float:left." style. e.g. <li style="float:left;"><a href='#'>Skills</a></li> Commented Sep 20, 2016 at 3:45
  • This is plain css right? Will it affect the responsiveness of the page? Commented Sep 20, 2016 at 3:46
  • 1
    add navbar-nav to your <ul class="nav... like <ul class='nav nav navbar-nav navbar-inverse navbar-custom'> for maintain it responsive too. Commented Sep 20, 2016 at 3:57

2 Answers 2

Reset to default
3

you need to just add navbar-nav to your ul

<nav class='navbar navbar-inverse'> <div class='container-fluid'> <div class='navbar-header'> <a href='#' class='navbar-brand'> $Whoami </a> </div> <ul class='nav navbar-nav navbar-inverse navbar-custom'> <li ><a href='#'>Skills</a></li> <li ><a href='#'>Interests</a></li> <li ><a href='#'>Contact</a></li> </ul> </div> </nav> <h1> Hello World! </h1>

Output image

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Try This

<!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> </nav> <div class="container"> <h1> Hello World! </h1> </div> </body> </html>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.