Bootstrap navbar some item centered and others to the right - html

Question

I'm building my NavBar in ReactJS using bootstrap 4.
I would like to take some element at the center of the navbar and others on the right.
In this particular case I would like to have the logout icon on the right.
This is the current situation:
This is the current code:
render () {
return (
<nav className="navbar navbar-dark bg-primary fixed-top">
<Link className="navbar-brand" to="/">
App
</Link>
{
!localStorage.getItem('token') &&
<button className="btn btn-dark" onClick={this.loginClicked}>Login</button>
}
{
localStorage.getItem('token') &&
<div className="mx-auto order-0">
<button className="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-file-invoice-dollar fa-lg"></i>
<sup className="notification-badge"><span class="badge badge-success">1</span></sup>
</button>
<button className="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-envelope fa-lg"></i>
</button>
<button className="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-cogs fa-lg"></i>
</button>
<button className="btn btn-outline-danger btn-lg" onClick={this.logoutClicked}>
<i class="fas fa-sign-out-alt fa-lg"></i>
</button>
</div>
}
</nav>
);
}
And this is what I would like to have:

Answer 1

Here's what you will have to do:
You don't even have to over-write the flex properties. The bootstrap nav comes with display flex & space-around property by default.
Group your html content as shown -
A. navbar-brand
B. a parent div that contains the elements you want in the center
C. your logout button
Remove the margin auto class(mx-auto order-0) classes from your code. This is the culprit.
Change your react code to:
render() {
return (
<nav className="navbar navbar-dark bg-primary fixed-top">
<Link className="navbar-brand" to="/">
App
</Link>
{!localStorage.getItem("token") && (
<button className="btn btn-dark" onClick={this.loginClicked}>
Login
</button>
)}
{localStorage.getItem("token") && (
<React.Fragment>
<div className="first-part">
<button className="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-file-invoice-dollar fa-lg" />
<sup className="notification-badge">
<span class="badge badge-success">1</span>
</sup>
</button>
<button className="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-envelope fa-lg" />
</button>
<button className="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-cogs fa-lg" />
</button>
</div>
<div className="second-part">
<button
className="btn btn-outline-danger btn-lg"
onClick={this.logoutClicked}
>
<i class="fas fa-sign-out-alt fa-lg" />
</button>
</div>
</React.Fragment>
)}
</nav>
);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
<nav class="flex-container navbar navbar-dark bg-primary fixed-top">
<a class="navbar-brand" to="/"> App
</a>
<div class="first-part">
<button class="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-file-invoice-dollar fa-lg"></i>
<sup class="notification-badge"><span class="badge badge-success">1</span></sup>
</button>
<button class="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-envelope fa-lg"></i>
</button>
<button class="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-cogs fa-lg"></i>
</button>
</div>
<div class="second-part">
<button class="btn btn-outline-danger btn-lg">
<i class="fas fa-sign-out-alt fa-lg"></i>
</button>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

Answer 2

You can use display: flex, and align-content: space-between like so:
.wrapper{
width: 100%;
}
.mid_to_right{
padding-left: 50%;
background-color: red;
display: flex;
flex-flow: row nowrap;
flex-basis: 100%;
justify-content: space-between;
}
.left{
display: flex;
flex-flow: row nowrap;
}
.icon{
width: 50px;
height: 50px;
background-color: yellow;
}
.left .icon{
background-color: green;
}
<div class="wrapper">
<div class="mid_to_right">
<div class="left">
<div class="icon">
</div>
<div class="icon">
</div>
<div class="icon">
</div>
</div>
<div class="right">
<div class="icon">
</div>
</div>
</div>
</div>

Answer 3

As explained here and here you have to consider the width of adjacent flexbox items to ensure the center content is actually centered in the viewport.
The simplest method using Bootstrap 4 would be to use the w-100 utility classes to ensure the 3 separate flexbox children always fill the width equally, and then align as desired...
<nav class="navbar navbar-dark bg-dark fixed-top navbar-expand">
<a class="navbar-brand w-100" to="/">
App
</a>
<div class="d-flex">
<div class="text-nowrap">
<button class="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-star fa-lg"></i>
</button>
<button class="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-envelope fa-lg"></i>
<sup><span class="badge badge-success">1</span></sup>
</button>
<button class="btn btn-primary btn-lg navbar-btn">
<i class="fas fa-cogs fa-lg"></i>
</button>
</div>
</div>
<div class="w-100 text-right">
<button class="btn btn-outline-danger btn-lg" onclick="{this.logoutClicked}">
<i class="fas fa-sign-out-alt fa-lg"></i>
</button>
</div>
</nav>
https://www.codeply.com/go/SRy82V3M76