Bootstrap 4 columns align issue

Question

I'm working on making a site, and im currently dealing with BS4.1.3 I'm still new to this world so i have this issue right now:

        <div class="container">
        <nav class="navbar sticky-top">
            <div class="grid">
                <div class="row">
                    <div class="col-md-4">
                        <a class="btn btn-primary" data-toggle="collapse" href="#collapse-top-menu" role="button" aria-expanded="false" aria-controls="collapse-top-menu">
                            <img src="img/baseline-menu-24px.svg">
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a class="navbar-brand" href="#">
                            <img src="img/bootstrap-solid.svg" width="40" height="40">
                        </a>
                    </div>
                    <div class="col-md-4">
                        Test
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="collapse" id="collapse-top-menu">
                            <input type="text" class="form-control" id="input-top-collapse-search" placeholder="Cosa stai cercando?">
                        </div>
                    </div>
                </div>
            </div>
        </nav>
    </div>

But the end result it's like this

While i wanted that the first blue button and the "logo" (B) were aligned, "test" a lot more in the right part of the navbar Also the bottom search bar should be the same width as the container, so full lenght

Answer 1

I am on mobile Stack Overflow app hence not able to test this. In Bootstap 4, to put the test at the right of the navbar you can try,

<ul class="navbar-nav ml-auto">The content which goes to right comes here as a li</ul>

Also for aligning the blue button (The button you are using here is called as hamburger , remember that) can be aligned by using some margin-top for it.

Just use a CSS selector to select the hamburger and give some margin-top property to it.

Please consider adding a codepen so that we mobile users can play around with your code.

Answer 2

  <div class="container">
        <nav class="navbar sticky-top">
            <div class="grid">
                <div class="row">
                    <div class="col-md-4">
                        <a class="btn btn-primary" data-toggle="collapse" href="#collapse-top-menu" role="button" aria-expanded="false" aria-controls="collapse-top-menu">
                            <img src="img/baseline-menu-24px.svg">
                        </a>
                    </div>
                    <div class="col-md-8 pull-right">
                        <a class="navbar-brand" href="#">
                            <img src="img/bootstrap-solid.svg" width="40" height="40">
                            <span>Test</span>
                         </a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="collapse" id="collapse-top-menu">
                            <input type="text" class="form-control" id="input-top-collapse-search" placeholder="Cosa stai cercando?">
                        </div>
                    </div>
                </div>
            </div>
        </nav>
    </div>

.collapse input{
  width:100%;
}