0

Hi I'm trying to get something done in my website, I'm using bootstrap 4 for the first time and I'm having a little difficulty.

This is my code:

<header class="header container-fluid">
    <div class="row justify-content-between d-flex flex-row align-items-center">

        <img class="logo" src="./images/logo.png" alt="Example Company" title="Example Company" />

        <ul class="menu align-self-center">
            <li><a href="{{ url("home") }}">Home</a></li>
            <li><a href="{{ url("home") }}">About us</a></li>
            <li><a href="{{ url("home") }}">How it works</a></li>
            <li><a href="{{ url("home") }}">Contact us</a></li>
        </ul>

    </div>
</header>

Now I want the logo to be aligned to the left the menu links to be aligned to the right however both should be vertically centered like this:

enter image description here

user3718908x100
  • 7,939
  • 15
  • 64
  • 123
  • 1
    Down vote for no reason with no comment? :/ – user3718908x100 Mar 16 '18 at 02:10
  • I'm not the downvoter but did you see the similar questions? https://stackoverflow.com/questions/41513463/bootstrap-4-align-navbar-items-to-the-right/41513784#41513784 – Carol Skelly Mar 16 '18 at 02:27
  • Yes I did, I have been able to align my content to the left an right, what I want is to do that and vertically align it as well which I can't seem to get right. – user3718908x100 Mar 16 '18 at 02:49
  • "Now I want the logo to be aligned to the left the menu links to be aligned to the right however both should be vertically centered like this:" – user3718908x100 Mar 16 '18 at 02:56
  • After which I post an *example* of how I want it to look like, wouldn't be any need for me to ask if it looked like the picture. – user3718908x100 Mar 16 '18 at 02:57
  • No I am asking for help to get it to look like that, I have been trying for a while with the bootstrap classes to get it to align that way but it hasn't worked. – user3718908x100 Mar 16 '18 at 02:59
  • You should probably start with the navbar docs: http://getbootstrap.com/docs/4.0/components/navbar/ .. and you already have an answer with help with how to get it to look like that – Carol Skelly Mar 16 '18 at 03:01

1 Answers1

2

Check this all alignment 

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Left</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="//codeply.com">Codeply</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    <div class="mx-auto order-0">
        <a class="navbar-brand mx-auto" href="#">Navbar 2</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Right</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>
Santosh Singh
  • 561
  • 2
  • 16
  • Thanks for your time, was hoping for a little explanation on what I was doing wrong in my code and what you changed to get it to align the way I want. – user3718908x100 Mar 16 '18 at 02:07