Bootstrap navbar not placing the items correctly - html

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="">DELIVER</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">PANDA</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
{{ request.user.username }}
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">個人檔案</a></li>
<li><a class="dropdown-item" href="#">我的訂單</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">登出</a></li>
</ul>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search items" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
For the above code, I would like to put the navbar items on the right. However I had already tried me-auto and mr-auto but all the items are still put on the left. Even though I followed the documentation of Bootstrap it still didn't work. Can anyone tell me where is the problem?

To align navbar (place it on right), just add ".justify-content-end" to ".collapse" block, see Code snipper comment.
To check it in Code Snippet example you might need to open it in full screen.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="">DELIVER</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- add "justify-content-end" here -->
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<!-- remove unnecessary "me-auto" -->
<ul class="navbar-nav mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">PANDA</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">{{ request.user.username }}</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">個人檔案</a></li>
<li><a class="dropdown-item" href="#">我的訂單</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">登出</a></li>
</ul>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search items" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>

This is happen because the navbar-collapse are given display flex. And flexing default properties are pulling the items left and right.
To pull the navbar-items to the right just remove the "me-auto" class from unordered-list. and add the flex properties class "justify-content-end" with the "navbar-collapse" class.

Related

Navbar disappears after one second on smaller screens in Bootstrap

I am using bootstrap to implement a toggling navbar. On smaller screens, it toggles, but when I click the icon the navbar appears and disappears after one second. Can anyone help?
I will share the nav bar code below. As you can see I have added the necessary classes but still, the navbar disappears after one second on a smaller screen. I am new to bootstrap. Please help me
<nav class="navbar navbar-expand-sm fixed-top navbar-default">
<div class="navbar-header ">
<span class="navbar-brand"> <img class="rounded d-inline-block align-top "src="./mr.jpg" height="30px" width="30px" >HARISH</a></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="container">
<button class="navbar-toggler collapsed navbar-light " type="button" data-toggle="collapse" data-target = "#navbar" aria-controls = "navbarNav" aria-expanded = "false" aria-label = "Toggle navigation ">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbar-toggleable" id="navbar">
<ul class=" nav navbar-nav ">
<a class="nav-item nav-link a-style" href="#">Reviews</a>
<a class="nav-item nav-link a-style" href="#">About us</a>
<a class="nav-item nav-link a-style" href="#">FAQ</a>
</ul>
</div>
</div>
</nav>
Try This...
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>

Cannot align to right margin with bootstrap

I read a lot of post about this issue but I still cannot align my button to the right margin.
I have a navbar with multiple buttons and I need to align to the right the SingIn/SignOut button.
This is my code:
<header th:fragment="header">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Spring Boot</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarNav" aria-controls="navbarNav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active"><a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a></li>
<li class="nav-item"><a class="nav-link" th:href="#{/listar}">Clientes</a>
</li>
</ul>
<ul class="navbar-nav mr-auto">
<li sec:authorize="!isAuthenticated()"><a
class="btn btn-outline-primary" th:href="#{/login}">Sign In</a></li>
<li sec:authorize="isAuthenticated()" class="dropdown show">
<a class="btn btn-outline-primary dropdown-toggle" href="#"
role="button" id="dropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"><span sec:authentication="name"></span></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<form id="logoutForm" th:action="#{/logout}" method="post">
<button class="dropdown-item" onclick="document.getElementById('logoutForm').submit();" type="submit">Sign Out</button>
</form>
</div>
</li>
</ul>
</div>
</nav>
Change your mr-auto for ml-auto in:
<ul class="navbar-nav mr-auto"> because the way you set it push the block to the left by adding a margin-right: auto;
<header th:fragment="header">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Spring Boot</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarNav" aria-controls="navbarNav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto"> <!-- add the mr-auto class here -->
<li class="nav-item active"><a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a></li>
<li class="nav-item"><a class="nav-link" th:href="#{/listar}">Clientes</a>
</li>
</ul>
<ul class="navbar-nav"> <!-- remove the mr-auto class here -->
<li sec:authorize="!isAuthenticated()"><a
class="btn btn-outline-primary" th:href="#{/login}">Sign In</a></li>
<li sec:authorize="isAuthenticated()" class="dropdown show">
<a class="btn btn-outline-primary dropdown-toggle" href="#"
role="button" id="dropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"><span sec:authentication="name"></span></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<form id="logoutForm" th:action="#{/logout}" method="post">
<button class="dropdown-item" onclick="document.getElementById('logoutForm').submit();" type="submit">Sign Out</button>
</form>
</div>
</li>
</ul>
</div>
</nav>
See https://getbootstrap.com/docs/4.5/components/navbar/ for more info.
The mr-auto class was in the wrong place. It sets margin right to auto, which you should have on the parent component, not on the child

Bootstrap navbar not working. Why?

<html>
<head>
<title>Advertisements</title>
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Advertisements</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Advertisements</li>
<li>Users</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="row">
<?php require($view); ?>
</div>
</div><!-- /.container -->
</body>
</html>
It should create a navbar with design but only plan text shows up. I have both of the stylesheets and it is working in another project. I copied all the requested files, the links are working as well. I can visit other pages But there none of my stylesheets are working (Just like in this case.) Why is this ?
make sure that you add bootstrap.js file in your header
and put this code
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
for more details check this Bootstrap Components

Add form to new line in navbar

I am using this code for following things
->add search form to new line in sm or smaller screen sizes
->float right the toggle button in sm or smaller screen sizes
The main issue is that the text input is not expanding when size is changin in the small screen it keep a constant max size of 13rem.
and how to make the toggle button right aligned.
note: float-right is not working
<nav class="navbar navbar-expand-sm justify-content-between navbar-light bg-light d-flex flex-row">
<a class="navbar-brand" href="{{route('homepage')}}">ODekh</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<form method="get" action="{{route('product.search')}}" id="nav-form" class="form-inline">
<div class="input-group mb-3">
<input class="form-control" type="search" placeholder="Search" aria-label="Search" id="search" placeholder="Search Books, Authors" name="search" value="">
<div class="input-group-append border-0 bg-white">
<button class="btn btn-outline-secondary" type="submit"><span class="fa fa-search"></span></button>
</div>
</div>
</form>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="">Books</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Cart</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Login</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="">My Account</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="">Logout</a>
</div>
</li>
</ul>
Below is the fix for your toggle button alignment. It's not entirely clear what you want with the search input though. You want it to expand on smaller screens?? Do you really mean expand and not shrink? (expanding on smaller screens doesn't make any sense to me)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<nav class="navbar navbar-expand-sm justify-content-between navbar-light bg-light">
<a class="navbar-brand" href="{{route('homepage')}}">ODekh</a>
<form method="get" action="{{route('product.search')}}" id="nav-form" class="form-inline order-sm-12">
<div class="input-group mb-0">
<input class="form-control" type="search" placeholder="Search" aria-label="Search" id="search" placeholder="Search Books, Authors" name="search" value="">
<div class="input-group-append border-0 bg-white">
<button class="btn btn-outline-secondary" type="submit"><span class="fa fa-search"></span></button>
</div>
</div>
</form>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="">Books</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Cart</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Login</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="">My Account</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="">Logout</a>
</div>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

html - Bootstrap navbar - How to align items left and right

i am making some new efforts with Bootstrap in Angular. I implemented a template navbar into my html-site from Bootstrap. The navbar contains some items in an orderd list and a search button and relating form. I want to align the text items on the left side and the search button and input form on the right side.
I tried things like : nav navbar-nav navbar-left from this question:
[Bootstrap NavBar with left, center and right aligned items.
But this didn't helped.
Does anyone have an idea how to align the elements on right and left side?
Thank you so far.
The html-code:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- <a class="navbar-brand" href="#">Navbar</a> -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav navbar-left" id="text">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
SOLUTION:
i solved the problem like this.
I extended the width of the of the navbar to 100 %. Before that the navbar width was limited so the left/right alignment of the elements was not possible.
The class mr-auto in the <ul>-tag just sets the margin left/right automatically.
HTML:
<div class="navbar-collapse collapse navbar-adjustment" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto" id="text">
CSS:
.navbar-adjustment{
width: 100%;
}
As I can see you are using bootstrap4, so you have to replace <ul class="nav navbar-nav navbar-left" id="text"> to <ul class="navbar-nav mr-auto" id="text">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- <a class="navbar-brand" href="#">Navbar</a> -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto" id="text">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
use class navbar-right in the form class near search and navbar-left for other texts according to you
Use style="float:right" in div, you will get proper output
Replace this code instead of your html code. Hopefully it solved your problems. Make sure you have bootstrap 3.3.7 css, js and jquery include your code.
<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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 id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<div id="navbar" class="navbar-collapse collapse">
<form class="form-inline pull-right navbar-form">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
<!--/.navbar-collapse -->
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
Adding this class to the UL in your navbar will "center" the links. May need some tweaking to get it right in the center, left or right.
See examples:
.nav-center {
position: absolute;
left: 33%;
}
.nav-left{
position: absolute;
left: 1%;
}
.nav-right{
position: absolute;
right: 1%;
}
.nav-center {
position: absolute;
left: 33%;
}
.nav-left{
position: absolute;
left: 1%;
}
.nav-right{
position: absolute;
right: 1%;
}
li {
display: inline;
}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- <a class="navbar-brand" href="#">Navbar</a> -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav navbar-left nav-right" id="text">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>