Create three centered grid in bootstrap 4 - html

Question

I am trying to mimic IG's navbar at some point.
I am trying to center all of my elements: logo, search bar and avatar icon and make them all have spaces on the center of the screen like you see here:
However even though I used col-push it doesn't change the behavior of my grids:
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-lg-12 no-space">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="col-lg-4">
<a class="navbar-brand white">LifeShot</a>
</div>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<div class="col-lg-4">
<input
class="form-control mr-sm-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
</div>
<div class="col-lg-4">
<i class="fa fa-user-o fa-lg white" aria-hidden="true"></i>
</div>
</div>
</nav>
</div>
</div>
</div>
Here's the jsfiddle.
Any idea what am I missing here?

Answer 1

.body {
width: 100%;
}
.white {
color: #fff !important;
}
.no-space {
padding: 0;
margin: 0;
}
.align-center {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-lg-12 no-space">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="col-lg-4 col-md-4 col-sm-4">
<a class="navbar-brand white">LifeShot</a>
</div>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<div class="row no-gutter">
<div class="col-lg-6 col-md-6 col-sm-6 align-center">
<input
class="form-control mr-sm-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 align-center">
<i class="fa fa-user-o fa-lg white" aria-hidden="true"></i>
</div>
</div>
</div>
</nav>
</div>
</div>
</div>

Answer 2

You are doing it wrong. You should have only "col-" classes under "row".
Here you have button in between.
You should have 12 columns in total for each row.
So following should be the structure:
<div class="row">
<div class="col-2">
<div class="row">
<div class="col-6">Logo</div>
<div class="col-6">Text</div>
</div>
</div>
<div class="col-8"><!--Empty Space--></div>
<div class="col-2">
<div class="row">
<div class="col-4">icon1</div>
<div class="col-4">icon2</div>
<div class="col-4">icon3</div>
</div>
</div>
</div>

Answer 3

Just remove the unwanted row and container in your code. Move the mobile collapse button near the navbar. I hope this solution will be helpful.
.body {
width: 100%;
}
.white {
color: #fff !important;
}
.no-space {
padding: 0;
margin: 0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
LifeShot
<div class="col-lg-4">
<input class="form-control" type="search" placeholder="Search" aria-label="Search" />
</div>
<div class="col-lg-4 text-md-right">
<i class="fa fa-user-o fa-lg white" aria-hidden="true"></i>
</div>
</div>
</nav>

Answer 4

I guess that nav as is is row at all. So you don't need to add it again. Maybe i'm wrong but this is working for me :
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="col-lg-12 col">
<div class="row">
<div class="col-lg-4 col">
Here comes logo
</div>
<div class="col-lg-4 col">
<input placeholder="Search">
</div>
<div class="col-lg-4 col text-right">
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</div>
</nav>

Answer 5

You can try this much simpler way:
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark justify-content-around">
<a class="navbar-brand" href="#">LifeShot</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-grow-0" id="navbarNavDropdown">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
</form>
<ul class="navbar-nav">
<li class="nav-item">
<i class="fa fa-user-o fa-lg" aria-hidden="true" style="color: #fff;"></i>
</li>
</ul>
</div>
</nav>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

Answer 6

I cleared your code a little. Dont put the NavBar in a Container, just in the body tag.
Then you can change the Container widht in the navbar, to make the space between your navbar-brand and your search box smaller.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark ">
<div class="container w-50">
<a class="navbar-brand white">LifeShot</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<form class="form-inline my-2 my-md-0 ml-auto">
<input
class="form-control mr-sm-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
</form>
<i class="fa fa-user-o fa-lg white" aria-hidden="true"></i>
</div>
</div>
</nav>
Now you can use the fix bootstrap "width-changer-classes" like w-25,w-50,w-75 (25%, 50%, 75% width) etc. or you can write your own width class like:
.costum-w-80 {
width: 80%;
}
And now just replace custom-w-80 with w-50.