Your HTML code is lacking some essential elements such as row-xs
, col-xs
, and row-fluid
. These are not recognized classes in Bootstrap 3, and you also have syntax errors present.
To address this issue, I recommend starting with a standard navbar class and then customizing it according to your needs. Alternatively, if you require the use of columns and rows, refer to the official documentation for guidance on their correct usage.
You can view functional examples of a navbar and an adapted version of your code in the Snippet below.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav navbar-right">
<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>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn">
<button class="btn btn-default" type="button">Search</button>
</span>
</div>
</div>
</form>
</div>
</div>
</nav>
<hr>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<ul class="nav navbar-nav navbar-right">
<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>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>