I am currently facing an issue with using Bootstrap classes to align my items to the right in the navbar. I am working on a Django tutorial and incorporating Bootstrap into my HTML page. Below is the code snippet:
<!-- Individual items in the navbar -->
<div class="collapse navbar-collapse" id="topNavBar"> <!-- This makes the collapse three bar button work -->
<ul class="nav navbar-nav">
<li class="active">
<a href="{% url 'pics:index' %}">
<span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
Folders
</a>
</li>
<li class="">
<a href="#">
<span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
Pictures
</a>
</li
</ul>
<form class="navbar-form navbar-left" role="search" method="get" action="#">
<div class="form-group">
<input type="text" class="form-control" name="q" value="">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="">
<a href="#">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add Folder
</a>
</li>
<li class="">
<a href="#">
<span class="glyphicon glyphicon-off" aria-hidden="true"></span> Logout
</a>
</li>
</ul>
</div>
Despite implementing the code correctly, the "Add Folder" and "Logout" buttons are not displaying to the right as intended. Instead, they appear next to the search bar. Any assistance or insights on resolving this issue would be greatly appreciated!